web-dev-qa-db-fra.com

Comment exécuter une tâche UNIQUEMENT sur un fichier modifié avec Gulp watch

J'ai la tâche gulp actuelle que j'utilise dans un fichier gulp. Les chemins d’accès proviennent d’un fichier config.json et tout fonctionne parfaitement:

//Some more code and vars...

gulp.task('watch', function() {
    gulp.watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], ['imagemin-cfg']);
})

//Some more code ...

gulp.task('imagemin-cfg', function () {
    return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
});

Mais j'ai toujours un problème, le nombre d'images dans mon projet est énorme et cette tâche prend des siècles. Je cherche un moyen d'exécuter ma tâche UNIQUEMENT sur des fichiers modifiés. Si j'avais une image ou si je la modifiais, imagemin() ne fonctionnerait que sur cette image et pas sur toutes.

Une fois encore, tout fonctionne parfaitement, mais le temps d'exécution est vraiment long.

Merci.

gulpgulp-watch
50
soenguy

"gulp-modified" n'est pas la meilleure solution pour cela, car il ne regarde que les fichiers modifiés dans le dossier "buildType".

Essayez gulp-cached à la place.

48
nktssh

Une autre option consiste à utiliser l’option gulp.watch ("changer").

gulp
  .watch([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"])
  .on("change", function(file) {
      gulp
        .src(file.path)
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngcrush()]
        }))
        .pipe(gulp.dest(buildType))
        .pipe(connect.reload());
  });
27
Brad Berger

Avec gulp.watch, vous pouvez cibler uniquement le fichier modifié comme ceci.

gulp.watch(["src/**/*"], function (obj) {
 return gulp.src(obj.path, {"base": "src/"})
 .pipe(gulp.dest("dest"));
});
6
lofihelsinki

Puis-je suggérer gulp-newy dans lequel vous pouvez manipuler le chemin et le nom de fichier dans votre propre fonction. Ensuite, utilisez simplement la fonction en tant que rappel à la newy(). Cela vous donne un contrôle complet sur les fichiers que vous souhaitez comparer. 

Cela permettra 1: 1 ou plusieurs comparées à 1.

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}

 enter image description here

2
dman

Ouais, gulp-change fait exactement cela:

var changed = require('gulp-changed');

gulp.task('imagemin-cfg', function () {
return gulp.src([config.path.devfolder+"/**/*.png", config.path.devfolder+"/**/*.jpg", config.path.devfolder+"/**/*.gif", config.path.devfolder+"/**/*.jpeg"], {read: false})
    .pipe(changed(buildType))
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest(buildType))
    .pipe(connect.reload());
});
1
urban_raccoons

Voici un exemple concret que j'utilise tout le temps pour le faire sans avoir besoin de paquets supplémentaires. J'utilise ceci pour réduire, renommer et compiler tous les fichiers .js du répertoire js. Les fichiers compilés sont enregistrés dans un répertoire dist avec .min ajouté avant l'extension.

// Compile JS
var compileJS = function( file ) {
    var currentDirectory = process.cwd() + '/';
    var modifiedFile = file.path.replace( currentDirectory, '' );

    gulp.src( modifiedFile )
        .pipe( uglify() )
        .pipe( rename( {
            suffix: ".min"
        } ) )
        .pipe( livereload() )
        .pipe( gulp.dest( 'dist' ) );
};

// Watch for changes
gulp.watch( 'js/*.js', [ 'js' ] ).on( "change", compileJS );

Les réponses ci-dessus semblaient partiellement incomplètes et un peu obscures pour moi. J'espère que cela sera utile à quiconque cherche un exemple élémentaire.

0
Kevin Leary

Dans la tâche ou le rappel, vous aurez un paramètre d'événement, qui a une propriété type, qui vous dira si le fichier a été ajouté, supprimé ou modifié. Le mieux est d’en faire usage en fonction de votre tâche.

gulp.watch('path to watch', function(event){
  if(event.type === 'changed') { 
    gulp.start('your:task');
  }
};
0
Luis Lasser