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

Using variables in Gulp for the destination file name?

本文关键字：目标 文件名 变量 Gulp 使用      更新时间：2023-09-26

我是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文件夹中，但使用它找到的scss文件的文件夹名称。这可能吗?我需要管道到一个插件吗?谢谢!另外，我确实意识到我可以通过重命名scss来实现这一点，但这是我想避免的。

这并不难，这取决于您对动态的需要程度。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等的任务。

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

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

您可以提供一个函数作为gulp.dest的参数，从而在目标路径上做一些预处理，如下所示:

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