sass - Grunt 不更新主 scss 文件

Question

我有一个项目使用带有 grunt-contrib-sass、grunt-contrib-watch 和 grunt-newer 的 GruntJS。

我的主要 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 任务本身:

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 以涵盖这种情况吗？ :) 谢谢。

Answer 1

注意:这是 this comment in an issue on the grunt-newer GitHub page 的最小修改副本.

我想出了这个简单的委派任务，它可以解决您希望对 src 中未指定的更改使用react的任务。属性(property):

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 中给出的文件目标(我有 globbing 模式 **/ 包括在内)。如果发现新文件(还有 .scss 子文件夹中的文件)，则根据 sass任务(具有给定目标)将被调用。

不过，我不确定是否可以在这里使用单独的 grunt 插件。

编辑:我最近将上述代码(已清理)作为单独的 npm 包 grunt-delegate 发布.