example - instalar sass con gulp

Cómo ejecutar una tarea SOLAMENTE en un archivo modificado con Gulp watch

Question

Tengo la tarea actual que utilizo en un gulpfile. Las rutas son desde un config.json y todo funciona perfectamente:

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

Pero todavía tengo un problema, la cantidad de imágenes en mi proyecto es enorme y esta tarea lleva mucho tiempo. Estoy buscando una manera de ejecutar mi tarea SOLAMENTE en archivos modificados. Si tengo una imagen o la imagemin() , imagemin() solo se ejecutará en esta imagen, y no en todas.

Una vez más, todo funciona perfectamente bien, pero el tiempo de ejecución es realmente largo.

Gracias.

Answer 1

"gulp-changed" no es la mejor solución para hacer esto, ya que solo se ve el archivo modificado en la carpeta "buildType".

Intente gulp-cached lugar.

Answer 2

Con gulp.watch, puede segmentar solo el archivo modificado como este.

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

Answer 3

En la tarea o devolución de llamada, tendrá un parámetro de evento, que tiene una propiedad de tipo, que le dirá si el archivo se agregó, eliminó o modificó. Lo mejor es hacer uso de eso en forma condicional en su tarea.

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

Answer 4

Este es un ejemplo del mundo real que utilizo todo el tiempo para hacer esto sin necesidad de paquetes adicionales. Lo uso para minimizar, renombrar y compilar cualquier archivo .js en el directorio js . Los archivos compilados se guardan en un directorio dist con .min adjuntado antes de la extensión.

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

Las respuestas anteriores parecían parcialmente incompletas y un poco poco claras para mí, espero que esto sea útil para cualquier otra persona que busque un ejemplo básico.

Answer 5

Otra opción es usar la opción gulp.watch en ("cambiar").

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

Answer 6

Puedo sugerirle gulp-newy en el que puede manipular la ruta y el nombre de archivo en su propia función. Luego, solo use la función como la devolución de llamada al newy() . Esto le da un control completo de los archivos que desea comparar.

Esto permitirá 1: 1 o muchos a 1 compara.

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
}

Answer 7

Sí, gulp-log hace exactamente eso:

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