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

Question

我是新手,我想知道我想达到的目标是否实用或可行.

我的项目结构:

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,所以你可以很容易地编写自己的函数.您可以在保存之前使用该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,等,为每个组件.

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