Создать совпадающие имена файлов в Grunt - PullRequest
Новая
       17

Создать совпадающие имена файлов в Grunt

0 голосов
/ 06 марта 2020

У меня есть несколько проектов, каждый из которых использует один и тот же Gruntfile для запуска задач и помещает вывод в свою собственную папку dist. Настройка папки: 

MyProjects
    - Project1
        - src
        - dist
    - Project2
        - src
        - dist
.....

Я не могу понять, как запустить Grunt на верхнем уровне (MyProjects) и при этом динамически генерировать выходные данные в правильной папке dist.

Есть ли Как я могу сделать так, чтобы Grunt поместил вывод в нужную папку dist без необходимости кодировать его в Gruntfile? Что-то вроде: 

dist: {
    files: {
        // destination : source js
        '<% ProjectName %>/dist/app.js': '<% ProjectName %>/src/app.js'
    },

Спасибо 

module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
// Project configuration.
grunt.initConfig({

    watch: {
        scripts: {
            files: ['src/**/*.js'],
            tasks: ['browserify', 'file_append', 'concat'],
            options: {
                spawn: false
            }
        },
        sass: {
            files: "src/scss/*.scss",
            tasks: ['sass', 'file_append', 'concat']
        }
    },

    sass: {
        dist: {
            options: {
                style: 'expanded'
            },
            files: {
                // destination          // source file
                "format/css/styles.css": "src/scss/styles.scss"
            }
        },
        options: {
            sourcemap: "none",
            style: "compact",
            noCache: true
        }
    },

    file_append: {
        default_options: {
            files: [
                // Development build
                {
                    append: "",
                    prepend: "",
                    input: "format/app.js",
                    output: "format/dev.app.js"
                },
                {
                    append: "</style>`)",
                    prepend: "document.body.insertAdjacentHTML('afterbegin', `\n<style>\n",
                    input: "format/css/styles.css",
                    output: "format/css/dev.styles.html"
                },
                // Production build
                {
                    append: "</script>",
                    prepend: "<script>\n",
                    input: "format/app.js",
                    output: "format/prod.app.html"
                },
                {
                    append: "</style>",
                    prepend: "<style>\n",
                    input: "format/css/styles.css",
                    output: "format/css/prod.styles.html"
                }
            ]
        }
    },

    concat: {
        options: {
            seperator: '\n'
        },
        // Development build
        dev: {
            src: ['format/dev.app.js', 'format/css/dev.styles.html'],
            dest: 'dev/dev.app.js'
        },
        // Production build
        prod: {
            src: ['format/prod.app.html', 'format/css/prod.styles.html'],
            dest: 'dist/prod.app.html'
        }
    },

    browserify: {
        dist: {
            files: {
                // destination for transpiled js : source js
                'format/app.js': 'src/app.js'
            },
            options: {
                transform: [
                    [
                        'babelify', {
                            presets: "es2015",
                            comments: false,
                            plugins: "transform-object-rest-spread"
                        }
                    ]
                ],
                browserifyOptions: {
                    debug: false
                }
            }
        }
    }

});



grunt.registerTask('default', [
    'sass',
    'browserify:dist',
    'file_append',
    'concat',
    'watch'
]);

};

1 Ответ

0 голосов
/ 11 марта 2020

Есть несколько способов справиться с этим.

Один из вариантов - перегрузить аргументы, которые вы передаете задаче, и включить имя папки, для которой вы хотите указать sh. 

grunt sass:dist:Project1

Дополнительный аргумент доступен через loda sh шаблоны, которые являются частью Grunt JS framework и позволяют задавать конфигурацию во время выполнения задачи is run: 

sass: {
    dist: {
        options: {
            style: 'expanded'
        },
        files: {
            // destination          // source file
            "MyProjects/<%= grunt.task.current.args[0] %>/format/css/styles.css": "MyProjects/<%= grunt.task.current.args[0] %>/src/scss/styles.scss"
        }
    },
    options: {
        sourcemap: "none",
        style: "compact",
        noCache: true
    }
}

Этот подход работает в контексте выполняемой функции, но он не будет продолжать передавать аргументы следующей задаче. Для этого нам нужно добавить пользовательскую задачу, которая будет устанавливать объект конфигурации перед выполнением списка задач: 

grunt.registerTask("build", (project) => {
  const buildConfig = { project };
  grunt.config.set("build", buildConfig);
  grunt.task.run([
    'sass',
    'browserify:dist',
    'file_append',
    'concat',
    'watch'
  ]);
});

Теперь, когда мы запустим grunt build:Project1, ваша пользовательская задача build будет запущена и настроена свойство, которое мы передали в объект конфигурации grunt. Затем мы можем ссылаться на это значение в других наших объектах конфигурации grunt, используя loda sh, как мы это сделали для первого варианта. Чтобы получить доступ к значениям конфигурации с помощью шаблонов loda sh, нам просто нужно указать указатель конфигурации в записи json: 

files: {
  "MyProjects/<%= build.project %>/format/css/styles.css": "MyProjects/<%= build.project %>/src/scss/styles.scss"
}

Grunt компилирует конфигурации, необходимые для задачи, во время их запуска и затем обработает шаблоны loda sh, что позволит вам ввести имя вашего проекта в задачу. Поскольку мы сохранили значение в объекте config, оно будет сохраняться до тех пор, пока grunt не завершится и не завершится.

...