web-dev-qa-db-fra.com

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

J'ai actuellement deux tâches, que les deux compiler des fichiers sass. Je voudrais toujours 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.

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

PDATE:

J'ai essayé ceci:

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

Mais maintenant, il semble que ni l'un ni l'autre fichier n'est en cours de compilation. Des suggestions sur ce que je fais mal?

gulpgulp-sass
52
Noah Goodrich

Je pense que la bonne façon de faire est d'utiliser la dépendance à la tâche.

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( ...
});

En faisant gulp scripts dans le terminal, le nettoyage est exécuté avant la tâche de script.

Dans votre exemple, les deux tâches SASS séparées sont liées à une tâche SASS commune. Quelque chose comme:

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

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

63
mikaelb

Ça marche.

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

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 entraîner des fichiers de construction compliqués et nous ne voulons pas que les gens 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 d'absorption 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 ou ne pouvez pas utiliser de dépendances.

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

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

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

Avec Gulp4, vous pouvez utiliser:

  • gulp.series Pour une exécution séquentielle

  • gulp.parallel Pour une 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 séquence d'exécution
Vous devez installer: npm install -D gulp @ next

8
Mark

Je viens de trouver un plugin gulp appelé gulp-all et 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);

aussi vous pouvez mettre 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)
}
5
user5509760

Il s'avère que la fonction site() renvoyait une erreur. Afin de résoudre ce problème, je devais m'assurer que bootstrap() s'exécutait en premier, je me suis donc retrouvé avec ceci:

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

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

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

Vous pouvez également l'écrire comme une tâche unique en effectuant:

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 il est plus facile de maintenir

2
smac89

Avez-vous essayé d'utiliser 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);

});

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

1
I-Lin Kuo

Je ne suis pas sûr de bien comprendre la question, mais si je le comprends bien, cela devrait être une solution simple:

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

LA SOLUTION: appelez les fonctions !!!

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

Soyez conscient des parens bootstrap (), site () afin qu'ils renvoient une promesse :)

1
nicoabie

Il est également possible de créer une autre tâche pour compiler d'autres tâches en transmettant un tableau de noms de tâches comme celui-ci:

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

alors vous pouvez simplement exécuter gulp compile-all-sass

0
Angie