Grunt不更新主scss文件

我有一个使用GruntJS的项目,包括grunt-contrib-sass,grunt-contrib-watch和grunt-newer。

我的主app.scss文件使用@import指令导入一些.scss文件

@import“common / vars.scss”;

如果我在主app.scss中进行更改,一切正常。 问题是,当我正在导入的文件(如vars.scss)进行更改时,app.scss不会更新。

这是我的任务:

    watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['newer:sass'],
        options: {
          spawn: false,
        }
      }
    }

这本身就是一项繁重的任务:

sass: {
      dist: {
        options: {
          style: 'compressed',
          noCache: true
        },
        /* looks for every .scss file in the scss folder (checks nested folders too), 
         * compile it and create another file wit the same name in the style folder */
        files: [{
          expand: true,
          cwd: 'scss',
          src: ['**/*.scss'],
          dest: 'style',
          rename: function (dest, src) {
            var folder    = src.substring(0, src.lastIndexOf('/'));
            var filename  = src.substring(src.lastIndexOf('/'), src.length);

            filename  = filename.substring(0, filename.lastIndexOf('.'));

            return dest + '/' + folder + filename + '.css';
          }
        }]
      }
    }

任何想法如何改变Gruntfile.js以涵盖这种情况呢? :) 谢谢。


注意:这是在grunt-newer GitHub页面的一个问题上对此评论的最小修改副本。


我想出了这个简单的委托任务,它为你想对src属性中指定以外的更改作出反应的任务执行任务:

grunt.initConfig( {
    delegate: {
        some_other_TASK: {
            src: [ 'some/src/path/**/*.ext' ],
            dest: 'some/dest/path/'
        }
    }
} );

grunt.registerTask( 'delegate', function() {
    grunt.task.run( this.args.join( ':' ) );
} );

grunt-contrib-sass完整示例如下所示:

module.exports = function( grunt ) {
    require( 'load-grunt-tasks' )( grunt );

    grunt.initConfig( {
        delegate: {
            sass: {
                src: [ 'scss/**/*.scss' ],
                dest: 'style'
            }
        },

        sass: {
          dist: {
            options: {
              style: 'compressed',
              noCache: true
            },
            files: [{
              expand: true,
              cwd: 'scss',
              src: ['*.scss'],
              dest: 'style',
              ext: '.css'
            }]
          }
        }
    } );

    grunt.registerTask( 'delegate', function() {
        grunt.task.run( this.args.join( ':' ) );
    } );
};

你只需要调用newer:delegate:sass (通过CLI或其他一些任务)。 grunt-newer检查中,根据给定的文件delegate对象(其中i有文件名匹配模式**/包括在内)。 如果找到新文件(也是子文件夹中的.scss文件),则会调用相应的sass任务(具有给定的目标)。

不过,我不确定,如果制作一个单独的grunt插件将在这里使用。


编辑:我最近发布了上面的代码(清理)为单独的npm包grunt-delegate


我认为你的监视tasks变量是倒退的,你可以通过打开终端来检查,进入通常运行grunt watch的目录,但尝试运行newer:sass如果不行的话,试试sass:newer如果后面的工作改变那行在您的手表设置中。

此外,如果您只有一项sass任务,则可以将其更改为:

watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['sass']
        options: {
          spawn: false
        }
      }
    }

正如一个侧面说明,似乎你的sass有不必要的复杂的重命名功能,如果你只是scss/**/*.scss变成style/**/*.css scss/**/*.scss ,你应该能够使用这个(取自grunt-contrib-sass自述文件):

grunt.initConfig({
  sass: {
    dist: {
      files: [{
        expand: true,
        cwd: 'scss',
        src: ['**/*.scss'],
        dest: 'styles',
        ext: '.css'
      }]
    }
  }
});

如果您有使用多个点的文件,例如: file.src.scss请将extDot: 'last'添加到文件数组中

链接地址: http://www.djcxy.com/p/78971.html

上一篇: Grunt doesn't update main scss file

下一篇: watch infinite loop