web-dev-qa-db-ja.com

Gulpウォッチ-タスクを順番に実行します（同期）

ウォッチャーから実行する一連のタスクがありますが、それらを順番に起動させることができます。

これがgulpタスクとウォッチャーです。

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'Android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
});

gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);

したがって、scssファイルを更新すると、それらをコンパイルして単一のcssファイルを作成する必要があります。次に、ビルドタスクはファイルをベンダーファイルと連結します。しかし、ファイルを保存するたびに、常に1ステップ遅れます。例としてビデオを参照してください： http://screencast.com/t/065gfTrY

タスクの名前を変更したり、ウォッチコールバックの順序を変更したりしました。

私は明らかな間違いを犯していますか？

javascriptgulp
15
Lee

Gulpは、依存関係を宣言しない限り（またはストリームを相互にパイプするようにしない限り）、すべてのタスクを「同時に」開始します。

したがって、たとえば、タスクapp_build_cssでタスクapp_scssとapp_vendor_cssが完了するのを待つ場合は、依存関係を宣言します。

gulp.task('app_scss', function(){
    return gulp.src(appScssDir + '/main.scss')
        .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
        .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'Android 4'))
        .pipe(gulp.dest(appBuilderDir));
});

gulp.task('app_vendor_css', function(){
    return gulp.src(appProviderCssDir + '/*.css')
        .pipe(minifyCSS({ keepSpecialComments: 0 }))
        .pipe(concat('app_vendor.css'))
        .pipe(gulp.dest(appBuilderDir));

});

gulp.task('app_build_css', ['app_scss', 'app_vendor_css'], function(){
    return gulp.src(appBuilderDir + '/*.css')
        .pipe(concat('style.css'))
        .pipe(gulp.dest(targetCssDir));
});


gulp.task('watch', function () {
    gulp.watch(appScssDir + '/**/*.scss', ['app_build_css']);
});

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

Gulp.task（）docs を確認してください

19
AntouanK

GULP 3では、 run-sequence パッケージを使用して、タスクを並列ではなく順番に実行できるようにしています。これは、watchタスクを構成する方法です。次に例を示します。

var gulp = require('gulp'),
    runSequence = require('run-sequence');

gulp.task('watch', function() {
    gulp.watch('templates/**/*.html', function(){ runSequence('templates', 'bundleJS') });
});

上記の例は、変更時にリッスンされるファイルと、変更が検出されたときに実行されるコールバック関数を使用してgulp.watchメソッドをフックする典型的なwatchタスクを示しています。次に、runSequence関数が（特定のwatchのコールバック内で）呼び出され、タスクを並行して実行するデフォルトの方法とは異なり、同期的に実行されるタスクのリストが表示されます。

20
vsync

Gulp v4

Gulp v4は1年近くリリースされており（2017年末にリリース）、bachと呼ばれるライブラリを使用してタスクをシーケンスするための優れた方法をいくつか提供しています。

https://github.com/gulpjs/bach

注：v3にはセキュリティの脆弱性があるため、Gulpv4に移行することをお勧めします[これらにパッチが適用されているかどうかはわかりません]。

簡単な例

Gulpv4ではgulp.seriesとgulp.parallelが導入されています。これにより、タスクを作成し、以下に示すように、直列、並列、または混合で実行するタスクを選択できます。

説明：これにより、scssおよびjsタスクがparallelで実行されます。完了すると、seriesにあるため、watchタスクが実行されます。

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}

拡張例

これは私のgulpファイルがどのように見えるかを簡略化した例です。

const gulpScss = require('gulp-sass');
const gulpBabel = require('gulp-babel');

const paths = {
  scss: [
    'public/stylesheets/*.scss'
  ],
  js: [
    'public/js/*.js'
  ]
};

const scss = () => {
  return gulp.src(paths.scss)
    .pipe(gulpScss)
    .pipe(gulp.dest('dist'));
}
scss.description = 'Transpiles scss files to css.';

const js = () => {
  return gulp.src(paths.js)
    .pipe(gulpBabel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('dist'));
}
js.description = 'Transpiles JS with babel';

const watch = () => {
  gulp.watch(paths.scss, scss);
  gulp.watch(paths.js, js);
}
watch.description = 'Watches for changes to files and runs their associated builds.';

const defaultTasks = gulp.series(
  gulp.parallel(scss, js),
  watch
);
defaultTasks.description = 'Builds scss, and js, then watches them for changes and rebuilds upon change.';

module.exports = {
  default: defaultTasks,
  scss,
  js
}
2
CTS_AE