Gulp の複数出力先を指定

Question

gulpを使って sass をコンパイルした時に生成されたCSSファイルを各ディレクトリに出力できるようにしたいのですが、これは難しいのでしょうか。

下記の二つの形式で試してみましたが、どちらも動きませんでした。

#コード１　１タスクで出力先を複数指定
var gulp = require('gulp');
var sass = require('gulp-sass');     //プラグインの定義


gulp.task('sass', function () {  //'sass'という名前でタスクを定義
  return gulp.src('./src/sass/**/*.scss')  //sassがあるパス
    .pipe(sass().on('error', sass.logError))  //sassコンパイル実行
    .pipe(gulp.dest('./e5/assets/css','./e-pd/assets/css', './e6/assets/css'));  //書き出し先
});


gulp.task('watch', ['sass'], function(){
    gulp.watch('./src/sass/**/*.scss', ['sass']);
});


gulp.task('default',['sass','watch']);

#コード２　タスクごとに分散させて出力先を指定
var gulp = require('gulp');
var sass = require('gulp-sass');    

gulp.task('sass', function () {  //'sass'という名前でタスクを定義
return gulp.src('./src/sass/**/*.scss')  //sassがあるパス
  .pipe(sass().on('error', sass.logError))  //sassコンパイル実行
  .pipe(gulp.dest('./e5/assets/css'));  //書き出し先
});

gulp.task('sass-pd', function () { 
return gulp.src('./src/sass/**/*.scss')  
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./e-pd/assets/css'));
});

gulp.task('sass-6', function () {  
return gulp.src('./src/sass/**/*.scss')  
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./e6W/assets/css'));  
});

gulp.task('watch', ['sass'], function(){
    gulp.watch('./src/sass/**/*.scss', ['sass']);
    gulp.watch('./src/sass/**/*.scss', ['sass-pd']);
    gulp.watch('./src/sass/**/*.scss', ['sass-6']);
});


gulp.task('default',['sass','watch']);

他にもインターネットで調べたのですが、いまいちうまく行くものがありませんでした。

Answer 1

gulp.task('sass', function () {  //'sass'という名前でタスクを定義
  return gulp.src('./src/sass/**/*.scss')  //sassがあるパス
    .pipe(sass().on('error', sass.logError))  //sassコンパイル実行
    .pipe(gulp.dest('./e5/assets/css'));  //書き出し先
    .pipe(gulp.dest('./e6/assets/css'));  //書き出し先2
});

これでうまくいくはずなんですけど、質問者さんがやった方法でなんでうまくいかなかったのかは謎です。

Comments

[jantyran]

ありがとうございます。
普通にgulp.destを2回書いてよかったんですね。

[teruri]

そうなんですー！