sass和咕噜声
我使用grunt-sass和grunt-watch来编译和缩小我的代码
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']
}
});
问题：
当我修改一个scss文件时， sass:compile开始， grunt-contrib-watch检测所有javascript文件的变化，并且从不运行cssmin:minify 。
然而，运行我的任务（没有观看）效果很好。
我认为grunt-contrib-watch是原因（使用spawn为false，如https://github.com/gruntjs/grunt-contrib-watch/pull/509中的指示修复此问题）。
有没有人遇到同样的问题？
切换到grunt-contrib-sass （使用ruby-sass）修复了这个问题。
我的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']);
};
有关信息，我的package.json如下所示：
{
...
"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"
}
}
上一篇: sass and grunt