I use grunt-contrib-less with grunt-contrib-watch to compile my less files automatically upon change.
When the css is not present, grunt compiles it ok. When a css already exists and watch sees the less file changed, the css file is not modified. I have to remove it every time and let grunt recreate it with the modifications.
less config:
less: {
options: {
banner: '<%= meta.banner %>'
},
dev: {
options: {
sourceMap: true,
sourceMapFileInline: true,
compress: true
},
src: '<%= meta.dev.less %>/main.less',
dest: '<%= meta.prod.css %>/main.css'
},
prod: {
options: {
plugins: [
new( require( 'less-plugin-clean-css' ) )( {
'advanced': true,
'compatibility': 'ie9'
} )
],
},
src: '<%= meta.dev.less %>/main.less',
dest: '<%= meta.prod.css %>/main.css'
}
},
I'm under Windows 10 and every user have the rights to modifiy/delete the files in my dist folder.
How can I let grunt modify the css file?
EDIT
watch config
watch: {
options: {
livereload: 6325
},
js: {
files: [ '<%= meta.dev.js %>/main.js', '<%= meta.dev.js %>/plugins/*.js' ],
tasks: [ 'newer:concat' ]
},
images: {
files: '<%= meta.dev.img %>/**/*.{png,jpg,gif,svg}',
tasks: [ 'newer:imagemin' ]
},
css: {
files: '<%= meta.dev.less %>/**/*.less',
tasks: [ 'newer:less:dev' ]
}
}
Registration
grunt.registerTask( 'default', [ 'less:dev', 'concat', 'imagemin', 'copy', 'watch' ] );
Grunt output (verbose)
>> File "dev\less\elements\menu.less" changed.
Initializing
Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ default, prod
Running tasks: newer:less:dev
Loading "grunt-newer" plugin
Registering "D:\[...]\static\node_modules\grunt-newer\tasks" tasks.
Loading "newer.js" tasks...OK
+ any-newer, newer, newer-clean, newer-postrun
Running "newer:less:dev" (newer) task
Options: cache="D:\\[...]\\static\\node_modules\\grunt-newer\\.cache", override=undefined
Files: dev/less/main.less -> dist/css/main.css
No newer files to process.
Here's what happens:
you modify menu.less
watch detects that and runs newer:less:dev
less:dev uses file main.less as only source (not menu.less)
that file hasn't changed, so newer concludes it doesn't need to run the task again
I suppose main.less includes menu.less, but newer doesn't know it.
So my suggested fix would be to get rid of the newer part.
Have you added correct watch config for less ?
watch: {
less: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
To run grunt with your profile : grunt.registerTask('myprofile', ['less:dev', 'watch']);
Related
I am developing a WordPress site on a server (not local). I want to refresh the page in my browser whenever I modify a sass file. I've got some grunt tasks listed, but right now I just want it to refresh on any sass modification. Right now, it catches whenever a file is modified, but it does not refresh the page.
Gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
options: { livereload: true },
files: ['**/*.scss'],
//tasks: ['criticalcss:front', 'criticalcss:page', 'cssmin', 'postcss'],
}
},
postcss: {
options: {
processors: [
require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes
//require('cssnano')() // minify the result
]
},
dist: {
src: 'style.css',
dest: 'style.css'
}
},
criticalcss: {
front : {
options: {
url: "https://grandeurflooring.ca/grand_dev/",
minify: true,
width: 1500,
height: 900,
outputfile: "critical_css/critical-front.css",
filename: "style.css",
buffer: 800*1024,
ignoreConsole: true
}
},
page : {
options: {
url: "https://grandeurflooring.ca/grand_dev/sample-page/",
minify: true,
width: 1500,
height: 900,
outputfile: "critical_css/critical-page.css",
filename: "style.css",
buffer: 800*1024,
ignoreConsole: true
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'critical_css',
src: ['*.css', '!*.min.css'],
dest: 'critical_css',
ext: '.min.css'
}]
}
}
});
// Load the plugin that provides the "critical" task.
grunt.loadNpmTasks('grunt-criticalcss');
// Load the plugin that provides the "cssmin" task.
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Load the plugin that provides the "watch" task.
grunt.loadNpmTasks('grunt-contrib-watch');
// Load the plugin that provides the "PostCSS" task.
grunt.loadNpmTasks('grunt-postcss');
// Critical task.
grunt.registerTask('critical', ['criticalcss:front']);
};
In footer.php, before wp_footer(), I put the script:
<script src="http://localhost:35729/livereload.js"></script>
You can configure Grunt to watch the compiled css file in your dist directory, which would be updated every time the Sass is recompiled.
Here is my watch configuration which is achieving what you want:
watch: {
options: {
livereload: true,
},
html: {
files: ['index.html'],
},
js: {
files: ['js/**/*.js'],
tasks: ['jshint'],
},
sass: {
options: {
livereload: false
},
files: ['css/scss/**/*.scss'],
tasks: ['sass'],
},
css: {
files: ['dist/css/master.css'],
tasks: []
}
}
You might need to change spawn: false to spawn: true depending on your setup as well.
EDIT: Additionally, you can use the grunt-contrib-watch plugin which allows you to:
Run predefined tasks whenever watched file patterns are added, changed or deleted
This plugin contains numerous additional options for live-reloading, watching, etc. which you may find useful.
I've installed bootstrap-sass and grunt-sass, and want to customise the bootstrap components included in my build.
I've created a copy of _bootstrap.scss in my app/styles/ folder and need to override the default import paths - what changes do I need to make to my Gruntfile for this to work?
I've tried including the full path the Bootstrap partials in my _bootstrap.scss file, but that doesn't compile. Gruntfile extract below.
Gruntfile
// Compiles Sass to CSS and generates necessary files if requested
sass: {
options: {
sourceMap: true,
sourceMapEmbed: true,
sourceMapContents: true,
includePaths: ['.']
},
dist: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
},
server: {
files: [{
expand: true,
cwd: '<%= config.app %>/styles',
src: ['*.{scss,sass}'],
dest: '.tmp/styles',
ext: '.css'
}]
}
},
Here is what I did using Grunt and Bower along with Bootstrap to make a custom install including / excluding bootstrap components which might help you.
Once I had Grunt and Bower set up I added bootstrap-sass using bower install boostrap-sass --save-dev so that my bower.json file was updated.
Modifying Bootstrap
I imported bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss into my my styles.scss file.
Then edited _bootstrap.scss commenting out which ever components I didn't want or need.
Next, created a file called _main.scss and stored this in a subdirectory (partials) of where my styles.scss file was, then imported _main.scss below the _bootstrap.scss.
This way I could override bootstrap if need be with my own custom styles by editing _main.scss.
Here's a starter grunt setup I used which might help explain the file structure.
Styles.scss file
// Bootstrap
#import 'bower_components/bootstrap-sass/assets/stylesheets/bootstrap';
// Custom styles
#import 'partials/main';
Gruntfile.js
module.exports = function(grunt){
// Configure task(s)
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// setup uglify task
uglify: {
build: {
files: {
'js/scripts.min.js': ['bower_components/jquery/dist/jquery.min.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js', 'src/js/*.js']
},
},
dev: {
options: {
beautify: true,
mangle: false,
compress: false,
preserveComments: 'all'
},
files: {
'js/scripts.min.js': ['bower_components/jquery/dist/jquery.js', 'bower_components/bootstrap-sass/assets/javascripts/bootstrap.js', 'src/js/*.js']
},
},
},
// setup watch task
watch: {
js: {
files: ['bower_components/**/*.js', 'src/js/*.js'],
tasks: ['uglify:dev']
},
css: {
files: ['src/scss/**/*.scss'],
tasks: ['sass:dev']
},
},
// setup sass
sass: {
dev: {
options: {
outputStyle: 'expanded'
},
files: {
'css/styles.min.css' : 'src/scss/styles.scss'
},
},
build: {
options: {
outputStyle: 'compressed'
},
files: {
'css/styles.min.css' : 'src/scss/styles.scss'
},
},
},
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
// Register task(s)
grunt.registerTask('default', ['uglify:dev','sass:dev']);
grunt.registerTask('build', ['uglify:build', 'sass:build']);
};
From there you should be able to add your own custom bootstrap styles and / or remove components from bootstrap you don't want. Then just run grunt or grunt build depending on whether you want a development output (non minified or not). Or grunt watch while you are editing for instant compile. Add in livereload chrome extension and the app and you'll have live updates across all files.
A couple of months late.. but hope this helps!
I have a grunt file which does the following tasks in order:
Pefrorm a git pull command (grunt-shell)
Uglify all the javascript files defined in package.json file (grunt-uglify)
Concatanate all the uglified javascript files (grunt-concat)
The problem here is, sometimes, pulled commit may have some changes in package.json. Grunt caches package.json in the beginning of tasks so package.json is not affected by git pull which means grunt performs task according to old package.json file.
I'm looking for a solution which refreshes the cached package.json file so I it will run after git pull as expected.
Edit: You can find the whole process here
Here is the snippet I read files from package json:
uglify: {
options: {
report: 'gzip',
compress: true,
banner: '<%= banner %>',
},
mangle: {
toplevel: false
},
squeeze: {
dead_code: false
},
codegen: {
quote_keys: true
},
dist: {
files: {
'<%= pkg.dirs.js.dist.min %>': '<%= pkg.dirs.js.dist.src %>'
}
}
}
concat: {
js: {
options: {
banner: '<%= banner %>',
stripBanners: true,
separator: ';\n'
},
src: '<%= pkg.dirs.js.dev %>',
dest: '<%= pkg.dirs.js.dist.src %>'
},
css: {
options: {
banner: '<%= banner %>',
stripBanners: true,
separator: ' \n'
},
src: '<%= pkg.dirs.css.dev %>',
dest: '<%= pkg.dirs.css.dist.src %>'
}
}
This is something I don't think you can do simply from the basic config, I think you may need a custom task. The reason I say this is that you have to re-read the package.json file somehow, and there isn't a way to do that in the config (that I know of). So, instead, we can create a simple custom task that reads in the package.json file in between tasks 1 and 2. I wrote up a couple blog posts on custom tasks if you want to read up on it more.
Here's what I would do for the custom task:
grunt.registerMultiTask('readpkg', 'Read in the package.json file', function() {
grunt.config.set('pkg', grunt.file.readJSON('./package.json'));
});
Then we need to set up our multi-task for your setup:
grunt.registerMultiTask('build', [ 'shell', 'readpkg', 'uglify:dist', 'concat:js' ]);
Obviously you may need to tweak those tasks. You can leave the initial reading of the package.json file in your Gruntfile.js config, it should just be overwritten by the readpkg task.
I am trying to automate my workflow with the help of Grunt. I have everything set up, but the watch task is not working - I can start it, but it doesn't detect changes. The problem really must be in the watch task, as I can trigger the sass task by hand and it compiles correctly without problems.
My Gruntfile looks like this:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
'style': 'compressed'
},
expand: true,
cwd: './sass/',
src: 'style.scss',
dest: './css/',
ext: '.css'
},
dev: {
options: {
'style': 'expanded',
},
expand: true,
cwd: './sass/',
src: 'style.scss',
dest: './css/',
ext: '.css'
}
},
watch: {
sass: {
files: ['<%= sass.dev.src %>'],
tasks: ['default']
}
}
});
grunt.registerTask('default', ['sass:dev']);
};
The structure in the project directory looks like this:
Gruntfile.js
index.html
package.json
css
> style.css (created by sass task)
node_modules
> all required modules
sass
> style.scss
To me everything looks good, but as it is not working something must be wrong. My guess it that the paths following the 'expand' option are off, although I already tried other structures that didn't work either.
Because sass.dev.src equals src: 'style.scss'. The watch task configured with files: ['<%= sass.dev.src %>'] will try and watch ./style.scss and not ./sass/style.scss.
The watch task has a cwd option (options:{cwd:'./sass'}) but probably easier to just set it to watch files: ['sass/*.scss'] instead.
I am trying to achieve a smooth workflow.
my problem:
My JS modifications are shown and minified and the live reload works fine. When I make changes to my SCSS files they do not run under the run command:
grunt
or the grunt plugin:
grunt watch
It only works when I invoke:
grunt sass
This was the output from the 'grunt sass' console window:
Macintosh:grunt-test Neil$ grunt sass
Running "sass:dist" (sass) task
File "css/global.css" created.
Done, without errors.
Notes:
When I run 'grunt watch' on a sass file I have noticed that grunt runs the minification on the javascript for no reason. Surely this be invoked when that file or one of its dependencies is effected?
Gruntfile.js Contents:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
files: ['css/*.css'],
livereload: true
},
css: {
files: ['css/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
scripts: {
files: ['js/*.js', 'scss/*.scss'],
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
expand: true,
cwd: 'scss/',
src: ['*.scss'],
dest: 'css/',
ext: '.css'
}
},
concat: {
// 2. Configuration for concatinating files goes here.
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/global.js' // This specific file
],
dest: 'js/build/production.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js'
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'images-lossy/',
src: ['**/*.{png,jpg,gif}'],
dest: 'images/'
}]
},
png: {
options: {
optimizationLevel: 7
}
},
jpg: {
options: {
progressive: true
}
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
// CONCATENATION PLUGIN
grunt.loadNpmTasks('grunt-contrib-concat');
// MINIFY PLUGIN
grunt.loadNpmTasks('grunt-contrib-uglify');
// IMG CRUSH PLUGIN
grunt.loadNpmTasks('grunt-contrib-imagemin');
// GRUNT WATCH PLUGIN
grunt.loadNpmTasks('grunt-contrib-watch');
// SASS LIBARY PLUGIN
grunt.loadNpmTasks('grunt-contrib-sass');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['sass','concat', 'uglify', 'imagemin', 'watch']);
};
I hope the above information helps. I have previously used Codekit, and it a really great app. I want to move to grunt but maybe my configuration file is incorrect I am close.
Any help would be greatly appreciated.
Neil
It looks like both of your issues occur within the watch configuration.
First, the reason the SASS task isn't working during watch is due to the files entry pointing to the wrong location. Your current files entry points to the "css" folder, but it should point to the "scss" folder, according to what you've specified in the actual "sass" task. In other words, your entry should be: files: ['scss/*.scss'].
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
}
Second, the JavaScript minification occurs during the watch whenever a SASS file changes because you have it listed here:
scripts: {
files: ['js/*.js', 'scss/*.scss'], // <-- scss is covered here
tasks: ['concat', 'uglify'],
options: {
spawn: false,
}
}
Change it to files: ['js/*.js'], instead to have the watch task kick in for JavaScript files only.
Once you address those issues, if things are slightly working you might want to expand the patterns so that it covers all files in the subdirectories for your JavaScript, CSS, SASS, etc. For example, js/*.js includes all .js files under the js folder, while js/**/*.js covers the js folder and its subfolders. You can read more under the GruntJS "globbing patterns" documentation.
EDIT: here's how the updated watch should look like...
watch: {
options: {
livereload: true
},
// css is really for Sass
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
// scripts will detect js changes
scripts: {
files: ['js/**/*.js'],
tasks: ['jshint', 'concat', 'uglify'],
options: {
spawn: false,
}
}
},
As mentioned, your individual tasks might need to use the ** pattern similar to what I've done with the "scripts" entry above: js/**/*.js