Strange Images issue with Gulp.js
gulp
Solution
My guess is that it's the `gulp-cache` plugin. Remove that from the images task.
A better alternative to the cache plugin (which, in my opinion, has too much "magic") is the `gulp-newer` plugin, which simple filters the file list based on the last-modified date of the files. It's much simpler, and less magical.
Problem
I'm having a strange issue with gulp and my images directory. I have a range of images in `src/img`, but after I run gulp, every single image in the output folder `dist/img` is an exact copy of the last image in the source directory, but with the correct filenames. This was working fine before, it's just gone barmy recently for no apparent reason. Here is my gulpfile.js, adapted from this blog post: ``` // Load plugins var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), minifycss = require('gulp-minify-css'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), imagemin = require('gulp-imagemin'), rename = require('gulp-rename'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'), lr = require('tiny-lr'), server = lr(); // Styles gulp.task('styles', function() { return gulp.src('src/css/main.sass') .pipe(sass({ style: 'expanded', })) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) .pipe(gulp.dest('dist/css')) .pipe(rename({ suffix: '.min' })) .pipe(minifycss()) .pipe(livereload(server)) .pipe(gulp.dest('dist/css')) .pipe(notify({ message: 'Styles task complete' })); }); // .pipe(jshint('.jshintrc')) // .pipe(jshint.reporter('default')) // Scripts gulp.task('scripts', function() { return gulp.src('src/js/**/*.js') .pipe(concat('main.js')) .pipe(gulp.dest('dist/js')) .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(livereload(server)) .pipe(gulp.dest('dist/js')) .pipe(notify({ message: 'Scripts task complete' })); }); // Images gulp.task('images', function() { return gulp.src('src/img/**/*') .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(livereload(server)) .pipe(gulp.dest('dist/img')) .pipe(notify({ message: 'Images task complete' })); }); // Clean gulp.task('clean', function() { return gulp.src(['dist'], {read: false}) .pipe(clean()); }); // Default task gulp.task('default', ['clean'], function() { gulp.run('styles', 'scripts', 'images'); }); // Watch gulp.task('watch', function() { // Listen on port 35729 server.listen(35729, function (err) { if (err) { return console.log(err) }; // Watch .sass files gulp.watch('src/css/**/*.sass', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); gulp.run('styles'); }); // Watch .js files gulp.watch('src/js/**/*.js', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); gulp.run('scripts'); }); // Watch image files gulp.watch('src/img/**/*', function(event) { console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); gulp.run('images'); }); }); }); ```