javascript - grunt-sass and grunt-contrib-watch seems to not work together as expected -
i use grunt-sass , grunt-watch compile , minify 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 modify 1 scss file, sass:compile kicks in, grunt-contrib-watch detects changes on javascript files , never run cssmin:minify.
however, running task (without watch) works well.
i thought grunt-contrib-watch cause (using spawn false instructed in https://github.com/gruntjs/grunt-contrib-watch/pull/509 kind of fix issue).
does have encountered same issue?
switching grunt-contrib-sass (using ruby-sass) fixes 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. * * set in setter avoid array flattening. */ grunt.config.set('project', project); /* * ========================================================================== * configuration * ========================================================================== */ /* * sass:compile * compile sass files 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 , minify css files. * * rebase url() correctly relativepath 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 single 1 (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 changes detected. // reload: true // reload grunt if gruntfiles.js 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 , minify css dist directory', ['sass:compile', 'cssmin:minify'] ); grunt.registertask( 'build:scripts', 'concat scripts files , uglify dist directory', ['concat:scripts', 'uglify:compile'] ); grunt.registertask( 'build', 'build scripts , styles (default task)', ['build:styles', 'build:scripts'] ); grunt.registertask( 'dev', 'deprecated, use `grunt build` instead', ['build'] ); // @deprecated grunt.registertask('default', ['watch']); }; for information, package.json looks 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" } }
Comments
Post a Comment