Как выполнять задачи на основе подпапки с помощью Grunt и Grunt-Watch

Question

Я хочу, чтобы в моем основном проекте были разные подпроекты. Например:

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

Я хочу иметь возможность изменить файл в subproject1 без запуска задач subproject2.

На данный момент я настраиваю свой 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'
            }
        ]
    },
}

Есть ли способ динамически указать, какую задачу выполнять, в зависимости от измененного файла (например, я изменяю папку/index.html, затем запускаю premailer:folder), или это единственный способ добиться этого?

Answer 1

Вы можете проверить все папки в вашей основной папке внутри Gruntfile, используя методы grunt.file ( здесь документы), создать массив имен подпроектов и затем использовать 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);

};