web-dev-qa-db-ja.com

Gulpjsは2つのタスクを1つのタスクに結合します

現在、2つのタスクがあり、両方ともsassファイルをコンパイルします。 2つのディレクトリを別々のファイルに連結したいのですが、すべてのsassコンパイルを担当する「sass」タスクを単純に作成できれば、より保守しやすいようです。

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contact('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contact('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

更新：

私はこれを試しました：

// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return Promise.all([bootstrap, site]);
});

しかし、今ではどちらのファイルもコンパイルされていないようです。私が間違っていることに関する提案はありますか？

gulpgulp-sass
52
Noah Goodrich

これを行う適切な方法は、タスクの依存関係を使用することだと思います。

Gulpでは、特定のタスクの前に実行する必要があるタスクを定義できます。

例えば：

gulp.task('scripts', ['clean'], function () {
    // gulp.src( ...
});

gulp scriptsターミナルでは、スクリプトタスクの前にcleanが実行されます。

あなたの例では、一般的なSASSタスクの依存関係として、2つの別々のSASSタスクがあります。何かのようなもの：

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contact('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contact('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('sass', ['bootstrap-sass', 'site-sass']);

タスクの詳細については、Gulpレシピセクションを参照してください。 https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

63
mikaelb

できます。

var task1 = gulp.src(...)...
var task2 = gulp.src(...)...
return [task1, task2];
32
Deni35

ソリューション1：

gulp.task('sass', function() {
  gulp.start('bootstrap-sass', 'site-sass');
})

gulp.startは、タスクを並行して実行します。そして、それは非同期です。つまり、「bootstrap-sass」は「site-sass」の前に終了する可能性があります。しかし、それはお勧めしません

gulp.startは意図的に文書化されていません。これは、複雑なビルドファイルにつながる可能性があり、ユーザーが使用することを望まないためです。

https://github.com/gulpjs/gulp/issues/426 を参照してください

ソリューション2：

var runSequence = require('run-sequence');
gulp.task('sass', function (cb) {
  runSequence(['bootstrap-sass', 'site-sass'], cb);
});

run-sequence はgulpプラグインです。

一連のgulpタスクを指定された順序で実行します。この関数は、実行順序を定義したが、依存関係を使用しない、または使用できない状況を解決するように設計されています。

runSequence(['bootstrap-sass', 'site-sass'], cb);

この行は、「boostrap-sass」と「site-sass」を並行して実行します。タスクを連続して実行する場合は、

runSequence('bootstrap-sass', 'site-sass', cb);
21
gzc

Gulp4では、次を使用できます。

  • _gulp.series_順次実行の場合

  • _gulp.parallel_並列実行の場合

    gulp.task('default', gulp.series('MyTask001', 'MyTask002'));
    gulp.task('default', gulp.parallel('MyTask001', 'MyTask002'));

ここに関する記事
もう必要ありません run-sequence plugin
インストールが必要です：npm install -D gulp @ next

8
Mark

gulp-allというgulpプラグインを見つけて、試してみました。使い方は簡単です。

https://www.npmjs.com/package/gulp-all

パッケージのドキュメントには次のように書かれています：

var all = require('gulp-all')

var styl_dir = 'path/to/styles/dir'
var js_dir   = 'path/to/scripts/dir'

function build() {
    return all(
        gulp.src(styl_dir + '/**/*')
            // build Styles 
            .pipe(gulp.dest('dist_dir')),
        gulp.src(js_dir + '/**/*')
            // build Scripts 
            .pipe(gulp.dest('dist_dir'))
    )
}

gulp.task('build', build);

また、サブタスクを配列に入れることができます：

var scriptBundles = [/*...*/]

function build(){
    var subtasks = scriptBundles.map(function(bundle){
        return gulp.src(bundle.src).pipe(/* concat to bundle.target */)
    })
    return all(subtasks)
}
5
user5509760

site()関数がエラーを返していたことがわかりました。それを修正するために、bootstrap()が最初に実行されていることを確認する必要があったので、これで終わりました：

// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = function() {
    return gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  var site = function() {
    return gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));
  };

  return bootstrap().on('end', site);
});
2
Noah Goodrich

gulp4 （まだアルファ版）では、並列性があるため、次のことができます。

// Compile Our Sass
gulp.task('bootstrap-sass', function() {
  return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
    .pipe(sass())
    .pipe(contact('bootstrap.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('site-sass', function() {
  return gulp.src('./public/app/scss/*.scss')
    .pipe(sass())
    .pipe(contact('site.css'))
    .pipe(gulp.dest('./public/dist/css'));
});

gulp.task('sass', gulp.parallel('bootstrap-sass', 'site-sass')); // Combine

以下を実行することで、単一のタスクとして作成することもできます。

gulp.task('sass', gulp.parallel(
  function() {
      return gulp.src('./public/bower/bootstrap-sass/lib/*.scss')
        .pipe(sass())
        .pipe(contact('bootstrap.css'))
        .pipe(gulp.dest('./public/dist/css'));
  },
  function() {
      return gulp.src('./public/app/scss/*.scss')
        .pipe(sass())
        .pipe(contact('site.css'))
        .pipe(gulp.dest('./public/dist/css'));
  }));

メンテナンスが簡単なので、最初の方法が好きです

2
smac89

merge-stream を使用してみましたか？

merge = require('merge-stream');
// Compile Our Sass
gulp.task('sass', function() {
  var bootstrap = gulp
      .src('./public/bower/bootstrap-sass/lib/*.scss')
      .pipe(sass())
      .pipe(concat('bootstrap.css'))
      .pipe(gulp.dest('./public/dist/css'));

  var site = gulp
      .src('./public/src/scss/*.scss')
      .pipe(sass())
      .pipe(concat('site.css'))
      .pipe(gulp.dest('./public/dist/css'));

  return merge(bootstrap, site);

});

詳細については、 https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams を参照してください

1
I-Lin Kuo

質問を正しく理解しているかどうかはわかりませんが、理解できれば、これは簡単な解決策です。

gulp.task('sass', ['bootstrap-sass', 'site-sass']);
1
Tahi Reu

解決策：関数を呼び出します!!!

return Promise.all([bootstrap(), site()])

括弧に注意してくださいbootstrap（）、site（）約束を返します:)

1
nicoabie

また、次のようなタスク名の配列を渡すことにより、別のタスクを作成して別のタスクを作成することもできます。

gulp.task('sass-file-one', function () {
     console.log('compiled sass-file-one')
});
gulp.task('sass-file-two', function () {
     console.log('compiled sass-file-two')
});

gulp.task('compile-all-sass', ['sass-file-one','sass-file-two']);

その後、単にgulp compile-all-sassを実行できます

0
Angie