sass and grunt
I use grunt-sass and grunt-watch to compile and minify my code
grunt.config('watch', {
scripts: {
files: ['<%= project.src.js.directory %>/*.js'],
tasks: ['concat:scripts', 'uglify:compile']
},
styles: {
files: [
'<%= project.src.css.directory %>/**/*.scss'
],
tasks: ['sass:compile', 'cssmin:minify']
}
});
Problem:
When I modify one scss file, the sass:compile kicks in, grunt-contrib-watch detects changes on all javascript files and never run the cssmin:minify .
However, running my task (without watch) works well.
I thought grunt-contrib-watch was the cause (using spawn to false like instructed in https://github.com/gruntjs/grunt-contrib-watch/pull/509 kind of fix the issue).
Does anyone have encountered the same issue?
Switching to grunt-contrib-sass (using ruby-sass) fixes the problem.
My Gruntfile.js:
'use strict';
module.exports = function(grunt) {
/*
* Time grunt tasks execution time.
*/
require('time-grunt')(grunt);
/*
* Autoload grunt npm load tasks.
*/
require('load-grunt-tasks')(grunt);
/*
* ==========================================================================
* PROJECT
* ==========================================================================
*/
var project = {
'bower': grunt.file.readJSON('./.bowerrc') || { 'directory': './bower_components/' },
'src': {
'css' : {
'directory': 'assets/css',
'files': [
'<%= project.bower.directory %>/jquery-ui/themes/smoothness/jquery-ui.css',
'<%= project.bower.directory %>/jquery-ui/themes/smoothness/jquery.ui.theme.css',
'<%= project.bower.directory %>/ionicons/css/ionicons.min.css',
]
},
'js': {
'directory': 'assets/js',
'files': [
'<%= project.bower.directory %>/jsgettext/lib/Gettext.js',
'<%= project.bower.directory %>/jquery-ui/ui/minified/jquery-ui.min.js',
'<%= project.bower.directory %>/matchHeight/jquery.matchHeight-min.js',
'<%= project.bower.directory %>/twig.js/twig.min.js',
'<%= project.bower.directory %>/slick-carousel/slick/slick.min.js',
'<%= project.bower.directory %>/jquery-validation/dist/jquery.validate.min.js',
'<%= project.bower.directory %>/dropzone/dist/min/dropzone.min.js',
'<%= project.bower.directory %>/bootstrap-sass/assets/javascripts/bootstrap.min.js',
'<%= project.src.js.directory %>/main.js',
'<%= project.src.js.directory %>/messenger.js',
'<%= project.src.js.directory %>/item.uploader.js',
]
}
},
'dest': {
'css': { 'directory': 'assets/css/dist', },
'js': { 'directory': 'assets/js/dist', }
}
};
/*
* ==========================================================================
* INIT
* ==========================================================================
*/
grunt.initConfig({
// Load package.json
pkg: grunt.file.readJSON('package.json'),
});
/*
* Project configuration.
*
* It is set in an early setter to avoid array flattening.
*/
grunt.config.set('project', project);
/*
* ==========================================================================
* CONFIGURATION
* ==========================================================================
*/
/*
* sass:compile
* Compile SASS files to dist directory.
*/
grunt.config('sass', {
compile: {
options: {
includePaths: [
'<%= project.bower.directory %>'
],
sourceMap: true,
style: 'compressed',
},
files: {
"<%= project.dest.css.directory %>/theme1.css": "<%= project.src.css.directory %>/theme1.scss",
"<%= project.dest.css.directory %>/theme2.css": "<%= project.src.css.directory %>/theme2.scss",
}
}
});
/*
* cssmin:minify
*
* Concat and minify CSS files.
*
* It also rebase url() correctly like relativePath does in LESS.
*/
grunt.config('cssmin', {
minify: {
options: {
rebase: true
},
files: {
'<%= project.dest.css.directory %>/theme1.min.css': grunt.config('project.src.css.files').concat(['<%= project.dest.css.directory %>/theme1.css']),
'<%= project.dest.css.directory %>/theme2.min.css': grunt.config('project.src.css.files').concat(['<%= project.dest.css.directory %>/theme2.css'])
}
}
});
/*
* concat:scripts
*
* Concat Javascript files to a single one (non-minified).
*/
grunt.config('concat', {
scripts: {
options: {
separator: ';'
},
src: grunt.config('project.src.js.files'),
dest: '<%= project.dest.js.directory %>/main.js'
}
});
/*
* uglify
*
*
*/
grunt.config('uglify', {
compile: {
options: {
compress: true,
mangle: true,
preserveComments: 'some',
drop_console: true,
},
src: '<%= concat.scripts.dest %>',
dest: '<%= project.dest.js.directory %>/main.min.js'
}
});
/*
* watch
*
* Watch
*/
grunt.config('watch', {
options: {
// interrupt: true, // Cancel build if another changes is detected.
// reload: true // Reload Grunt if Gruntfiles.js is changed.
},
scripts: {
files: ['<%= project.src.js.directory %>/*.js', /*'Gruntfile.js'*/],
tasks: ['build:scripts']
},
styles: {
files: [
'<%= project.src.css.directory %>/**/*.scss',
'<%= project.bower.directory %>/cssr/src/**/*.scss'
],
tasks: ['build:styles']
}
});
/*
* ==========================================================================
* TASKS
* ==========================================================================
*/
grunt.registerTask(
'build:styles',
'Compile SASS and minify CSS to dist directory',
['sass:compile', 'cssmin:minify']
);
grunt.registerTask(
'build:scripts',
'Concat scripts files and uglify to dist directory',
['concat:scripts', 'uglify:compile']
);
grunt.registerTask(
'build',
'Build scripts and styles (default task)',
['build:styles', 'build:scripts']
);
grunt.registerTask(
'dev',
'Deprecated, use `grunt build` instead',
['build']
); // @deprecated
grunt.registerTask('default', ['watch']);
};
For information, my package.json looks like this:
{
...
"devDependencies": {
"grunt": "~0.4.5",
"time-grunt": "~1.3.0",
"load-grunt-tasks": "~3.5.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-uglify": "~0.9.2",
"grunt-contrib-watch": "~0.6.1",
"grunt-sass": "~1.1.0",
"grunt-contrib-cssmin": "~1.0.1"
}
}
上一篇: 从Google的CDN下载jQuery UI CSS
下一篇: sass和咕噜声