問題描述

我是 gulp 的新手，我想知道我想要實現(xiàn)的目標是實際的還是可能的.

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

我的項目結(jié)構(gòu):

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)

現(xiàn)在我想要的是 Gulp 將編譯后的 css 文件存儲在 public/assets 的相應(yīng) css 文件夾中，但使用它找到 scss 文件的文件夾的名稱.那可能嗎?我需要將它傳送到插件嗎?謝謝！PS我確實意識到我可以通過重命名scss來實現(xiàn)這一點，但這是我想避免的.

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.

推薦答案

這不會太難，這取決于你需要多少動態(tài).Gulp 是純 JS，因此您可以非常輕松地編寫自己的函數(shù).您可以使用 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'; }));

現(xiàn)在您將為每個組件創(chuàng)建名為 component_1-build、component_1-style、component_1-js 等的任務(wù).

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

您還有一個可以構(gòu)建所有組件的任務(wù).

You also have a task that can build all components.

這篇關(guān)于在 Gulp 中使用變量作為目標文件名?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！