Gulp - 複数のフォルダを監視し、相対distフォルダに出力する

Question

gulpを使用してカスタムWordpressプラグイン用にSASSをコンパイルします。

すべてのプラグインフォルダを共有し、同じフォルダ構造：

のwp-コンテンツ/プラグイン/ pluginname

資産

DIST -

SRC - SCSS

GULPのTASK

gulp.task('plugin-css',() => { 
     // Main SASS Style Sheet 
     const pluginSass = gulp.src(`wp-content/plugins/**/assets/src/*.scss`) 
     .pipe(plumber(plumberErrorHandler)) 
     .pipe(sass()); 

     // Merge the two streams and concatenate their contents into a single file 
     return merge(pluginSass) 
     .pipe(autoprefixer()) 
     .pipe(cssmin()) 
     .pipe(gulp.dest(function(file) { 
     return file.base; 
     })); 
    }); 

は、現在、私のコンパイルされたCSSファイルは、src SASSと同じフォルダに出力されています。私のコンパイル済みのSassを 'dist'フォルダに出力するにはどうしたらいいですか？

Answer 1

は、（私はそれらを簡素化注）あなたがマージしてやろうとしているものを私に明確ではないが、ここであなたが置くことに得るのを助けるべきものですあなたはそれになりたいdistのフォルダにあなたの結果：

var path = require('path'); 
var rename = require('gulp-rename'); 

gulp.task('default', function() { 

    const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss") 
    .pipe(sass()) 

    // return merge(pluginSass) 

    .pipe(rename(function (file) { 
     var temp = path.dirname(file.dirname); 
     console.log('temp = ' + temp); 
     file.dirname = path.join(temp, "dist"); 
     console.log("file.dirname = " + file.dirname); 
    })) 

    .pipe(cssmin()) 

    // .pipe(autoprefixer()) 

    .pipe(gulp.dest("wp-content/plugins")); 
}); 

gulp-renameは、このような状況のために有用であり、常にそのgulp.dest（機能...パス操作）を使用する方が簡単であるように思われます。

Answer 2

distフォルダをgulp.dest関数に渡します。

const path = require('path') 

return merge(pluginSass) 
    .pipe(autoprefixer()) 
    .pipe(cssmin()) 
    .pipe(gulp.dest(function (file) { 
    return path.join(file.base, './dist') // ← Put your folder path here 
    })); 

はこちらのドキュメントを参照してください：https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpdestpath-options