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对象并分配给变量。那么在你的stylus创建多个子任务，如下所示。因此，您也可以为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

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

创建监视任务，该任务不会为所有目标文件运行任何任务并将集合设置为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.');
        }

    }
});

有用的链接：

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

运行监视文件的任务

2 个答案: