Gulpjs combine deux tâches en une seule tâche

J’ai actuellement deux tâches, les deux comstackr des fichiers sass. Je voudrais quand même concaténer les deux répertoires dans des fichiers séparés, mais il semble que ce serait plus facile à maintenir si je pouvais simplement créer une tâche «sass» qui serait responsable de toute la compilation de sass.

// Comstack 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')); }); 

METTRE À JOUR:

J’ai essayé ceci:

 // Comstack 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]); }); 

Mais maintenant, il semble qu’aucun fichier n’est en cours de compilation. Des suggestions sur ce que je fais mal?

    Je pense que la méthode appropriée consiste à utiliser la dépendance aux tâches.

    Dans Gulp, vous pouvez définir des tâches à exécuter avant une tâche donnée.

    Par exemple:

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

    Lorsque vous gulp scripts dans le terminal, clean est exécuté avant la tâche des scripts.

    Dans votre exemple, les deux tâches SASS séparées constitueraient une dépendance d’une tâche SASS commune. Quelque chose comme:

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

    Vous en saurez plus sur la dépendance des tâches dans la section des recettes Gulp: https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md

    Ça marche.

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

    Solution 1:

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

    gulp.start exécute des tâches en parallèle. Et c’est asynchrone, ce qui signifie que ‘bootstrap-sass’ peut être terminé avant ‘site-sass’. Mais ce n’est pas recommandé car

    gulp.start est délibérément non documenté car il peut conduire à des fichiers de construction compliqués et nous ne voulons pas que les utilisateurs l’utilisent

    voir https://github.com/gulpjs/gulp/issues/426

    Solution 2:

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

    run-sequence est un plugin gulp.

    Exécute une séquence de tâches Gulp dans l’ordre spécifié. Cette fonction est conçue pour résoudre la situation dans laquelle vous avez défini l’ordre d’exécution, mais choisissez de ne pas utiliser ou non les dépendances.

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

    Cette ligne exécute ‘boostrap-sass’ et ‘site-sass’ en parallèle. Si vous voulez exécuter des tâches en série, vous pouvez

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

    Je viens de trouver un plugin Gulp appelé gulp-all et je l’ai essayé. C’est simple à utiliser.

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

    La documentation du paquet dit:

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

    vous pouvez également placer des sous-tâches dans un tableau:

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

    Il s’avère que la fonction site() renvoyait une erreur. Pour résoudre ce problème, je devais m’assurer que bootstrap() avait été exécuté en premier, donc j’ai fini avec ceci:

     // Comstack 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); }); 

    Avez-vous essayé d’utiliser un stream de fusion ?

     merge = require('merge-stream'); // Comstack 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); }); 

    Voir https://blog.mariusschulz.com/2015/05/02/merging-two-gulp-streams pour plus de détails

    Dans gulp4 (toujours en alpha), nous avons parallèlement, vous pouvez donc faire:

     // Comstack 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 

    Vous pouvez également l’écrire en une seule tâche en procédant comme suit:

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

    Je préfère la première méthode car elle est plus facile à maintenir

    LA SOLUTION: appelez les fonctions !!!

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

    Soyez conscient du parens bootstrap () , site () afin qu’ils renvoient une promesse 🙂

    Il est également possible de créer une autre tâche pour comstackr d’autres tâches en passant un tableau de noms de tâches comme ceci:

     gulp.task('sass-file-one', function () { console.log('comstackd sass-file-one') }); gulp.task('sass-file-two', function () { console.log('comstackd sass-file-two') }); gulp.task('comstack-all-sass', ['sass-file-one','sass-file-two']); 

    alors vous pouvez simplement lancer gulp comstack-all-sass

    Avec Gulp4, vous pouvez utiliser:

    • gulp.series pour l’exécution séquentielle
    • gulp.parallel pour l’exécution parallèle

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

    Article sur ici
    Vous n’avez plus besoin du plugin de séquence d’exécution
    Vous devez installer: npm install -D gulp @ next