Использование переменных в Gulp для имени файла назначения?

Я новичок в gulp, и мне интересно, действительно ли то, что я хочу достичь, практично или возможно.

Структура моих проектов:

root
|
components
|   |
|   component_1
|   |   styles.scss
|   |   actions.js
|   |   template.html
|   |   ...
|   component_2
|   |   styles.scss
|   |   template.html
|   |   ...
|
public
    |
    assets
         |
         css (dest)
         |    component_1.css
         |    component_2.css
         |    ...
         js (dest)

Теперь я хочу, чтобы gulp хранил скомпилированные файлы css в соответствующей папке css в public/assets, но использует имя папки, в которой он нашел файл scss. Это возможно? Нужно ли мне подключать его к плагину? Благодарю! PS Я понимаю, что могу добиться этого, просто переименовав scss, но этого я бы хотел избежать.

Ответ 1

Это не будет слишком сложно, в зависимости от того, насколько вам нужно, чтобы он был динамичным. Gulp - это чистый JS, поэтому вы можете легко написать свои собственные функции. вы можете использовать плагин gulp-rename для переименования части или всего имени файла перед сохранением.

Вот приблизительная идея, чтобы вы начали:

var rename = require('gulp-rename'),
    path = require('path'),
    glob = require('glob'); // npm i --save-dev glob    

var components = glob.sync('components/*').map(function(componentDir) {
        return path.basename(componentDir);
    });

components.forEach(function(name) {
    gulp.task(name+'-style', function() {
        return gulp.src('components/'+name+'/styles.scss')
            .pipe(sass()) // etc
            .pipe(rename(name + '.css'))
            .pipe(gulp.dest('public/assets/css'))
    });

    gulp.task(name+'-js', function() {
        // similar idea for JS files
    });

    gulp.task(name+'-build', [name+'-style', name+'-js']);
});

// build all components
gulp.task('build-components', components.map(function(name){ return name+'-build'; }));

Теперь у вас будут задачи с именем component_1-build, component_1-style, component_1-js и т.д. для каждого компонента.

У вас также есть задача, которая может создавать все компоненты.

Ответ 2

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

Вы можете предоставить функцию в качестве аргумента для gulp.dest и, следовательно, выполнить некоторую предварительную обработку на пути назначения следующим образом:

.pipe(gulp.dest(function (file) {
    // file is the current file in the stream
    // do something here               
    return pathString;
}));