Gulp orologio - eseguire i compiti in ordine (sincrona)

Question

Ho una serie di attività per essere eseguito da un osservatore, ma posso farli a fuoco in ordine:

Qui è il gulp compiti e watcher.

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

Così, quando ho l'aggiornamento di un file scss si dovrebbe compilare loro di creare un unico file css.Quindi l'attività di generazione concats il file con il venditore di file.Ma ogni volta che si salva un file è sempre un passo indietro.Vedere il video di esempio: http://screencast.com/t/065gfTrY

Ho rinominato i compiti, cambiato l'ordine l'orologio richiamata etc.

Sto facendo un evidente errore?

Answer 1

Gulp avvia tutte le attività allo stesso tempo ", a meno che non dichiari dipendenze (o rendono i flussi tubo con l'uno all'altro).

Quindi, ad esempio, se si desidera che si desidera attirare app_build_css di attendere le attività app_scss e app_vendor_css da completare, dichiarare le dipendenze,

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

.

Controllare il gulp.task () doc

Answer 2

Con GULP 3 Io uso Run-sequence Package per aiutare a eseguire attività in sequenza enon in parallelo.Ecco come configurando le mie attività watch, ad esempio:

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

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

.

L'esempio sopra mostra una tipica attività watch che collegherà il metodo gulp.watch con file che da ascoltare quando vengono modificati e con una funzione di callback da eseguire quando è stato rilevato il cambiamento.La funzione runSequence viene quindi chiamata (all'interno del callback di un certo watch) con un elenco di attività da eseguire in modo sincrono, a differenza del modo predefinito che esegue le attività in parallelo.

Answer 3

Gulp v4

Ora che Gulp v4 è stato fuori per quasi più di un anno (uscito alla fine del 2017) offre alcuni ottimi modi per la sequenza delle attività, utilizzando il loro libreria che si chiama bach.

https://github.com/gulpjs/bach

Nota:Vorrei raccomandare di trasferirsi a Gulp dal v3 v4 avuto alcune vulnerabilità di sicurezza [non so se coloro che sono stati patchati ora].

Esempio Veloce

Gulp v4 introduce gulp.series e gulp.parallel, questo consente di creare attività e scegliere quale eseguire in serie, in parallelo, o mista, come illustrato di seguito.

Spiegazione:Questo sarà il scss e js attività in in parallelo, una volta completato tali eseguirà il watch compito perché sono in serie.

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
}

Estesa Esempio

Ecco una spogliato esempio di ciò che il mio gulp file.

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
}