在 Gulp 中使用变量作为目标文件名？

Question

我是 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 文件存储在 public/assets 的相应 css 文件夹中，但使用它找到 scss 文件的文件夹的名称。那可能吗？我需要将它传送到插件吗？ 谢谢！ PS我确实意识到我可以通过重命名scss来实现这一点，但这是我想避免的。

Answer 1

这不会太难，这取决于您需要多少动态。 Gulp 是纯 JS，因此您可以非常轻松地编写自己的函数。您可以在保存前使用the gulp-rename plugin 重命名部分或全部文件名。

这里有一个粗略的想法可以帮助您入门：

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 等的任务。

您还有一个可以构建所有组件的任务。

Answer 2

我知道的老问题，但我今天一直在这个领域玩耍，因此遇到了这个问题。如果您想对目标路径进行动态处理，这可能会对某人有所帮助。

您可以提供一个函数作为 gulp.dest 的参数，从而对目标路径进行一些预处理，如下所示：

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