web-dev-qa-db-ja.com

宛先ファイル名に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ファイルをpublic/assetsの対応するcssフォルダーに保存しますが、scssファイルを見つけたフォルダーの名前を使用することです。それは可能ですか？それをプラグインにパイプする必要がありますか？ありがとう！ PS私は、scssの名前を変更するだけでそれを達成できることを認識していますが、それは避けたいことです。

javascriptcsssassgulp
13
Vardumper

動的にするために必要な量にもよりますが、それほど難しくはありません。 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などの名前のタスクが作成されます。

すべてのコンポーネントを構築できるタスクもあります。

14
OverZealous

私が知っている古い質問ですが、私は今日この分野で遊んでいたので、この質問に出くわしました。これは、宛先パスで動的なことをしたい場合に役立つ可能性があります。

Gulp.destの引数として関数を指定できるため、次のように宛先パスで前処理を行うことができます。

.pipe(gulp.dest(function (file) {
    // file is the current file in the stream
    // do something here               
    return pathString;
}));
4
alfonsob