运行监视文件的任务

Question

考虑关注Gruntfile.js

module.exports = function(grunt) {
    var 
        stylusFiles = [
            {
                expand: true,
                cwd: 'radio/static/css/',
                src: ['*.styl'],
                ext: ['.css']
            },
            {
                expand: true,
                cwd: 'radio/static/polymer/radio-light/',
                src: ['**/*.styl'],
                ext: ['.css']
            },
            {
                expand: true,
                cwd: 'radio/static/themes/',
                src: ['**/*.styl'],
                ext: ['.css']
            }
        ];

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        stylus: {
            all: {
                files: stylusFiles,
            },
        },

        watch: {
            files: [
                'radio/static/css/*.styl',
                'radio/static/themes/**/*.styl',
                'radio/static/polymer/radio-light/**/*.styl',
            ],
            tasks: ['stylus:all'],
        }
      });


    // Other stuff
};

Stylus 任务编译在指定文件夹中找到的每个 .styl 文件。 观看任务现在导致重新编译所有 .styl 文件，我只想重新编译观看过的文件。
我已经阅读了一些关于 watch.event 的内容，但我不明白如何使用监视的路径名运行默认任务（例如 stylus:single）。
换句话说，有没有办法实现手写笔子任务，可以由grunt.task.run()使用自定义文件选项运行？

已更新：解决方案在我自己的答案中。

Answer 1

我理解的方式是，您可以创建多个 json 对象并分配给变量。那么然后在你的styluscreate 多个子任务如下。所以你也可以对watch 使用相同的子任务。

例如

    var stylusStaticFiles = [ {
        expand : true,
        cwd : 'radio/static/css/',
        src : [ '*.styl' ],
        ext : [ '.css' ]
    } ];

    var stylusRadioLightFiles = [ {
        expand : true,
        cwd : 'radio/static/polymer/radio-light/',
        src : [ '**/*.styl' ],
        ext : [ '.css' ]
    } ];

    var stylusthemesFiles = [ {
        expand : true,
        cwd : 'radio/static/themes/',
        src : [ '**/*.styl' ],
        ext : [ '.css' ]
    } ];

在您的手写笔中

         stylus: {
         stylusStaticFiles: {
                    files: stylusStaticFiles,
                },
                stylusRadioLightFiles: {
                    files: stylusRadioLightFiles,
                },
                stylusthemesFiles: {
                    files: stylusthemesFiles,
                }
     }

在手表里

    watch: {
            stylusStaticFiles: {
                files: ['radio/static/css/*.styl'],
                tasks: ['stylus:stylusStaticFiles']
            },

             stylusRadioLightFiles: {
                files: ['radio/static/themes/**/*.styl'],
                tasks: ['stylus:stylusRadioLightFiles']
            },
            stylusthemesFiles: {
                files: ['radio/static/polymer/radio-light/**/*.styl'],
                tasks: ['stylus:stylusthemesFiles']
            }
  }

让我知道这是否适合你。

Answer 2

在这种特殊情况下的解决方案如下：

• 创建监视任务，它不会为所有目标文件运行任何任务，并且 spawn 设置为 false：

  grunt.initConfig({
      // ...
      watch: {
          stylus: {
              files: ['whatever/*.styl'],
              options: {
                  spawn: false,
              },
          },
      },
      // ..
  })
  

  • 收听观看事件：
    grunt.event.on('watch', function (action, filepath) { /* ... */ });

  • 检查动作类型：如果文件没有被删除重新编译，否则删除相应的 CSS 文件

完整代码示例：

grunt.initConfig({
    // ...
    stylus: {
        compile: {
            files: [
                {
                    expand: true,
                    cwd: 'whatever/',
                    src: ['/stylus/*.styl'],
                    dest: 'css/',
                    ext: '.css',
                    // Compile all files from 'whatever/stylus' and put results
                    // in 'whatever/css/<proper name>.css'
                },
            ],
        },
    },
    watch: {
        stylus: {
            files: ['whatever/*.styl'],
            options: {
                spawn: false,
            },
        },
    },
    // ..
});

grunt.event.on('watch', function (action, filepath) {
    var
        dst, ext, files;
    dst = filepath.split('.');
    ext = dst.slice(-1);
    if (ext == 'styl') {
        // prepare destination file name,
        // e.g. <dir>/stylus/<name>.styl -> <dir>/css/<name>.css
        dst.splice(-1,1,'css');
        dst = dst.join('.').split('/');
        dst.splice(-2,1,'css');
        dst = dst.join('/');

        if (action != 'deleted') {
            // replace stylus task dynamic patter
            files = {};
            files[dst] = filepath;
            grunt.config('stylus.compile.files', files);
            grunt.task.run('stylus:compile');
        } else {
            // delete obsolete css file
            grunt.file.delete(dst);
            grunt.log.writeln('File "' + dst + '" deleted.');
        }

    }
});

有用的链接：

• grunt-contrib-watch README
• Grunt FAQ: How can I share parameters across multiple tasks?
• Grunt FAQ: Globals and configs

希望，这会对某人有所帮助。