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

J’ai la tâche actuelle de gulp que j’utilise dans un fichier gulpfile. Le chemin provient d’un 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 beaucoup de temps. 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.

Encore une fois, tout fonctionne parfaitement, mais le temps d’exécution est très long.

Merci.

“gulp-changed” n’est pas la meilleure solution pour cela, car il ne regarde que les fichiers modifiés dans le dossier “buildType”.

Essayez plutôt gulp-caché .

Une autre option consiste à utiliser l’option gulp.watch on (“change”).

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

Avec gulp.watch, vous pouvez cibler uniquement le fichier modifié comme celui-ci.

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

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 comme rappel du newy() . Cela vous donne un contrôle complet sur les fichiers que vous souhaitez comparer.

Cela permettra de comparer 1: 1 ou plusieurs à 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 } 

entrer la description de l'image ici

Ouais, gulp-changed 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()); }); 

Dans la tâche ou le rappel, vous aurez un paramètre d’événement, qui possède une propriété type, qui vous indiquera si le fichier a été ajouté, supprimé ou modifié. Le mieux est de l’utiliser dans une condition à votre tâche.

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

Voici un exemple concret que j’utilise tout le temps pour le faire sans avoir besoin de paquets supplémentaires. Je l’utilise pour minimiser, renommer et comstackr tout fichier .js dans le répertoire js . Les fichiers compilés sont enregistrés dans un répertoire dist avec .min ajouté avant l’extension.

 // Comstack JS var comstackJS = 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", comstackJS ); 

Les réponses ci-dessus semblaient en partie incomplètes et un peu floues pour moi. J’espère que cela sera utile à quiconque recherchera un exemple de base.