web-dev-qa-db-fra.com

Exécuter du code après une tâche gulp effectuée avec tous les fichiers

J'ai donc essayé Gulp pour voir comment il se compare à Grunt en ce qui concerne la vitesse et je suis assez impressionné par les résultats, mais j'ai une chose que je ne sais pas comment faire à Gulp.

J'ai donc cette tâche de gulp pour minimiser HTML:

gulp.task('html-minify', function() {
  var files = [
    relativePaths.webPath + '/*.html',
    relativePaths.webPath + '/components/**/*.html',
    relativePaths.webPath + '/' + relativePaths.appPath + '/components/**/*.html'
  ];

  var changedFiles = buildMetaData.getChangedFiles(files);

  //TODO: needs to execute only after successful run of the task
  buildMetaData.addBuildMetaDataFiles(changedFiles);
  buildMetaData.writeFile();
  return gulp.src(changedFiles, {
      base: relativePaths.webPath
    })
    .pipe(filelog())
    .pipe(minifyHtml({
      empty: true,
      quotes: true,
      conditionals: true,
      comments: true
    }))
    .pipe(gulp.dest(relativePaths.webPath + '/' + relativePaths.appPath +  '/' + relativePaths.buildPath));
});

L'objet buildMetaData a des fonctionnalités personnalisées dont j'ai besoin et pourquoi je ne peux pas utiliser de plugins comme gulp-changed. Ce que j'essaie de comprendre, c'est comment (si possible) exécuter un bloc de code une fois la minification terminée, traiter tous les fichiers et les exécuter correctement. Est-ce que quelque chose comme ça est possible avec gulp?

node.jsbuildgulp
34
ryanzec

Vous pouvez simplement effectuer une tâche qui dépend de html-minify:

gulp.task('other-task', ['html-minify'], function() {
  //stuff
});

Vous pouvez également écouter l'événement de flux end dans le html-minify tâche:

gulp.task('html-minify', function(done) {
  var files = [
    relativePaths.webPath + '/*.html',
    relativePaths.webPath + '/components/**/*.html',
    relativePaths.webPath + '/' + relativePaths.appPath + '/components/**/*.html'
  ];

  var changedFiles = buildMetaData.getChangedFiles(files);

  //TODO: needs to execute only after successful run of the task
  buildMetaData.addBuildMetaDataFiles(changedFiles);
  buildMetaData.writeFile();
  var stream = gulp.src(changedFiles, {
      base: relativePaths.webPath
    })
    .pipe(filelog())
    .pipe(minifyHtml({
      empty: true,
      quotes: true,
      conditionals: true,
      comments: true
    }))
    .pipe(gulp.dest(relativePaths.webPath + '/' + relativePaths.appPath +  '/' + relativePaths.buildPath));

  stream.on('end', function() {
    //run some code here
    done();
  });
  stream.on('error', function(err) {
    done(err);
  });
});
67
Ben

Vous pouvez également fusionner deux flux avec avec event-stream . Cet exemple prend l'entrée de la ligne de commande avec yargs , crée une configuration puis fusionne les deux:

var enviroment = argv.env || 'development';
gulp('build', function () {
    var config = gulp.src('config/' + enviroment + '.json')
      .on('end', function() { gutil.log(warn('Configured ' + enviroment + ' enviroment.')); })
      .pipe(ngConstant({name: 'app.config'}));
    var scripts = gulp.src('js/*');
    return es.merge(config, scripts)
      .pipe(concat('app.js'))
      .pipe(gulp.dest('app/dist'))
      .on('error', function() { });
  });

En plus du standard avant les tâches , vous pouvez également attendre la fin d'une tâche précédente. Ceci est utile lorsque vous devez passer des arguments à la tâche avant (que gulp ne prend pas en charge actuellement):

var tasks = {
  before: function(arg){
    // do stuff
  },
  build: function() { 
    tasks.before(arg).on('end', function(){ console.log('do stuff') });
  }
};

gulp('build', tasks.build);
3
Rimian

GULP V3

Utilisation des tâches de dépendance:

gulp.task('qr-task', ['md-task', 'js-task'], function() {
  gulp.src(src + '/*.qr')
    .pipe(plugin())
    .pipe(gulp.dest(dist));
});

Bien que la tâche principale démarre après toutes les tâches dépendantes mais qu'elles (tâches dépendantes) s'exécuteront en parallèle (en une seule fois), alors ne supposez pas que le les tâches commenceront/se termineront dans l'ordre ( md et js s'exécutent en parallèle avant qr ).

Si vous voulez un ordre exact pour plusieurs tâches et que vous ne voulez pas les diviser, vous pouvez utiliser async et attendre pour y parvenir:

function Async(p) {
   return new Promise((res, rej) => p.on('error', err => rej(err)).on('end', () => res()));
}

gulp.task('task', async () => {

  await Async(gulp.src(src + '/*.md')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));

  await Async(gulp.src(src + '/*.js')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));

  await Async(gulp.src(src + '/*.qr')
      .pipe(plugin())
      .pipe(gulp.dest(dist)));
});

GULP V4

dans gulp 4, l'ancien modèle de dépendance est supprimé et vous obtiendrez cette erreur:

AssertionError [ERR_ASSERTION]: Task function must be specified

à la place, vous devez utiliser gulp.parallel et gulp.series (qui permet une exécution correcte des tâches):

gulp.task('qr-task', gulp.series('md-task', 'js-task', function(done) {
  gulp.src(src + '/*.qr')
    .pipe(plugin())
    .pipe(gulp.dest(dist));
  done();
}));

pour plus de détails, visitez https://github.com/gulpjs/gulp/blob/4.0/docs/API.md

1
Ali