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

2022-01-12 00:00:00 javascript css sass gulp

我是 gulp 的新手，我想知道我想要实现的目标是实际的还是可能的.

I am new to gulp and I am wondering if what I want to achieve is practical or possible.

我的项目结构:

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来实现这一点，但这是我想避免的.

Now what I want is that Gulp stores the compiled css files in the according css folder in public/assets but uses the name of folder where it found the scss file. Is that possible? Do I need to pipe that to a plugin? Thanks! PS i do realize I could achieve that by just renaming the scss, but that's what I'd like to avoid.

推荐答案

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

It wouldn't be too hard, depending on how much you need it to be dynamic. Gulp is pure JS, so you can very easily write your own functions. you can use the gulp-rename plugin to rename part or all of the file name before saving.

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

Here's a rough idea to get you started:

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

Now you'll have tasks named component_1-build, component_1-style, component_1-js, etc, for each component.

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

You also have a task that can build all components.

相关文章