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，所以你可以很容易地编写自己的函数。在保存之前，您可以使用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;
}));

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

2 个答案: