GULP Watch - 順番にタスクを実行する（同期）

StackOverflow https://stackoverflow.com//questions/22082641

  •  24-12-2019
  •  | 
  •  

質問

私はウォッチャーから実行される一連のタスクを持っていますが、私はそれらを順番に発射させることができます：

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']);
.

SO SCSSファイルを更新すると、コンパイルされたCSSファイルを作成する必要があります。その後、ビルドタスクはファイルをベンダーファイルと連結します。しかし、私がファイルを保存するたびにその常に一歩後ろに一歩。例としてのビデオを参照してください。 http://screencast.com/t/065gftry

タスクの名前を変更し、監視コールバックなどの順序を変更しました。

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

役に立ちましたか？

解決

GULPは、依存関係を宣言しない限り、「同じ」時刻ですべてのタスクを開始します。

SO、タスク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

他のヒント

GULP v4

今年は1年以上経ってきた（2017年末にリリースされています）それはバッハと呼ばれるライブラリを使ってタスクを配列するためのいくつかの素晴らしい方法を提供します。

https://github.com/gulpjs/bach

注：v3にセキュリティの脆弱性があるため、GULP V4に移動することをお勧めします。[今すぐパッチが適用されているかどうかわからない]

クイック例

GULP v4はgulp.seriesとgulp.parallelを導入し、タスクを作成し、下図のように実行されているか、または混合されたタスクを選択できます。

説明： parallel のscssおよびjsタスクを実行します。 。

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
}
.
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top