如何使用 Grunt 和 Grunt-Watch 基于子文件夹执行任务

Question

我希望能够在我的主项目中拥有不同的子项目。例如：

-- my-project/
   - Gruntfile.js
   - subproject1/
     - index.html
     - scss/
       - main.scss
   - subproject2/
     - index.html
     - scss/
       - main.scss

我希望能够在不触发 subproject2 任务的情况下修改 subproject1 中的文件。

到目前为止，我正在像这样配置我的 gruntfile：

watch: {
    subproject1: {
        files: ['subproject1/*.html', 'subproject1/scss/**/*.scss'],
        tasks: ['sass', 'premailer:subproject1']
    },
    subproject2: {
        files: ['subproject2/*.html', 'subproject2/scss/**/*.scss'],
        tasks: ['sass', 'premailer:subproject2']
    }
},

premailer: {
    subproject1: {
        options: {
            css: 'subproject1/css/main.css',
            verbose: false
        },
        files: [
            {
            'subproject1/dist/index.html' : 'subproject1/index.html'
            }
        ]
    },
    subproject2: {
        options: {
            css: 'subproject2/css/main.css',
            verbose: false
        },
        files: [
            {
            'subproject2/dist/index.html' : 'subproject2/index.html'
            }
        ]
    },
}

有没有办法根据修改的文件动态指定运行什么任务（例如，我修改 folder/index.html，然后运行 ​​premailer:folder ) 或者这是实现它的唯一方法？

Answer 1

您可以检查 Gruntfile 中主文件夹中的所有文件夹，使用 grunt.file 方法（文档here），创建子项目名称数组，然后使用 forEach 动态创建任务。

应该是这样的：

/*global module:false*/
module.exports = function(grunt) {

    var mycwd = "./";

    var tempFileList = grunt.file.expand(
        { filter: function (src) {
            if (grunt.file.isDir(src) == true) {
                return true;
            }
            return false;
        } },
        [ mycwd + "!(Gruntfile.js|node_modules|package.json)" ] // structure to analyse
    );

    // I create an empty array to put all elements in, once cleaned.
    var fileList = [];

    tempFileList.forEach(function(url){
        var cwd = url;
        cwd = cwd.replace(mycwd, "");
        fileList.push(cwd);
    })

    var watchObject = {};
    var premailerObject = {};

    fileList.forEach(function(name) {
        watchObject[name] = {
            files: [name + '/*.html', name + '/scss/**/*.scss'],
            tasks: ['sass', 'premailer:' + name]
        };
        var filesObject = {};
        filesObject[name+'/css/main.css'] = name + '/index.html';
        premailerObject[name] = {
            options: { css: name + '/css/main.css', verbose: false },
            files: [ filesObject ]
        };
    });

    var configObject = {
        watch: watchObject,
        premailer: premailerObject
    };

    // just to check the final structure
    console.log(configObject); 

    grunt.initConfig(configObject);

};