web-dev-qa-db-fra.com

Comment nettoyer un projet correctement avec gulp?

Sur la page gulp , vous trouverez l'exemple suivant:

gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
 return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

Cela fonctionne assez bien. Mais il y a un gros problème avec la tâche watch. Si je change une image, la tâche de surveillance la détecte et exécute la tâche images. Cela a aussi une dépendance (gulp.task('images', **['clean']**, function() {) sur la tâche clean, donc ça marche aussi. Mais il manque des fichiers de script car la tâche scripts ne s'est pas relancée et la tâche clean a supprimé tous les fichiers.

Comment puis-je simplement exécuter la tâche de nettoyage au premier démarrage et conserver les dépendances?

javascriptgulp
43
Jan Hommes

Vous pouvez faire que des tâches distinctes soient déclenchées par watch:

gulp.task('clean', function(cb) {
  // You can use multiple globbing patterns as you would with `gulp.src`
  del(['build'], cb);
});

var scripts = function() {
  // Minify and copy all JavaScript (except vendor scripts)
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
};
gulp.task('scripts', ['clean'], scripts);
gulp.task('scripts-watch', scripts);

// Copy all static images
var images = function() {
 return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
};
gulp.task('images', ['clean'], images);
gulp.task('images-watch', images);

// the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts-watch']);
  gulp.watch(paths.images, ['images-watch']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);
41
Ben

Utilisez del.sync. Il termine le del puis revient de la tâche

gulp.task('clean', function () {
    return $.del.sync([path.join(conf.paths.dist, '/**/*')]);
});

et assurez-vous que le nettoyage est la première tâche d'une liste de tâches. Par exemple,

gulp.task('build', ['clean', 'inject', 'partials'], function ()  {
    //....
}

@ Ben, j'ai aimé la façon dont vous avez séparé clean: css clean: js tâches. C'est un bon conseil

19
SonKrishna

Utilisez simplement le module directement, car gulp.src est coûteux. Assurez-vous que vous utilisez la méthode sync (), sinon vous pourriez avoir des conflits.

gulp.task('clean', function () {
    del.sync(['./build/**']);
});

L'autre façon de le faire si vous voulez utiliser les gulp pipes: https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md

var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('clean:tmp', function () {
  return gulp.src('tmp/*')
    .pipe(vinylPaths(del))
    .pipe(stripDebug())
    .pipe(gulp.dest('dist'));
});
5
magiccrafter

J'ai eu un problème avec la méthode de rappel. Le rappel était en cours d'exécution avant la fin de l'opération de suppression, ce qui a entraîné des erreurs. Le correctif renvoyait le résultat de suppression à l'appelant comme ci-dessous:

// Clean
gulp.task('clean', function() {
    return del(['public/css', 'public/js', 'public/templates'])
});

// Build task
gulp.task('build', ['clean'], function() {
    console.log('building.....');
    gulp.start('styles', 'scripts', 'templates');
});
3
Vaughn Muirhead

J'ai trouvé ce problème. Je viens de nettoyer mes fichiers cibles dans ma tâche. comme ça:

gulp.task('img', function() {
    //clean target before all task
    del(['build/img/*']);
    gulp.src(paths.images)
        .pipe(gulp.dest('build/img'));
});

juste une ligne pour le résoudre. J'espère que cela pourrait vous aider.

2
stackFish

pour la tâche par défaut, je suggérerais d'utiliser 'run-sequence' pour exécuter une séquence de tâches gulp dans un ordre spécifié, regardez-la ici: https://www.npmjs.com/package/run-sequence
J'utiliserais alors la tâche de "surveillance" comme à mon habitude.

Pour la tâche images, je voudrais ajouter la mise en cache car il s’agit d’une tâche lourde, regardez-la ici: https://www.npmjs.com/package/gulp-cache

la combinaison de tout cela ressemblera à ceci:

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

// Clean build folder function:
function cleanBuildFn() {
    return del.sync(paths.build);
}

// Build function:
function buildFn(cb) {
    runSequence(
        'clean:build', // run synchronously first
        ['scripts, 'images'], // then run rest asynchronously
        'watch',
        cb
    );
}

// Scripts function:
function scriptsFn() {
  return gulp.src(paths.scripts)
    .pipe(coffee())
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('build/js'));
}

// Images function with caching added:
function imagesFn() {
    gulp.src(paths.source + '/images/**/*.+(png|jpg|gif|svg)')
    .pipe(cache(imagemin({optimizationLevel: 5})))
    .pipe(gulp.dest(paths.build + '/images'));
}

// Clean tasks:
gulp.task('clean:build', cleanBuildFn);

// Scripts task:
gulp.task('scripts', scriptsFn);

// Images task:
gulp.task('images', imagesFn);

// Watch for changes on files:
gulp.task('watch', function() {
    gulp.watch(paths.source + '/images/**/*.+(png|jpg|gif|svg)', ['images']);
    gulp.watch(paths.source + '/scripts/**/*.js', ['scripts']);
});

// Default task:
gulp.task('default', buildFn);
2
Ilia luk