Gulp livereload для задачи imagemin?

У меня есть следующий глоток, который обрабатывает мои sass, js и изображения. У меня также есть livereload на всех задачах. Он отлично работает со всеми задачами, кроме задачи изображения.

Если я помещаю или обновляю изображение в исходном каталоге, оно не перезагружается, но перезагружается для всех других задач.

Может кто-нибудь указать, что я делаю неправильно?

// Required Plugins
var gulp = require('gulp'),
    connect = require('gulp-connect'),
    livereload = require("gulp-livereload"),
    gutil = require('gulp-util'),
    notify = require('gulp-notify'),
    scss = require('gulp-ruby-sass'),
    sass = require('gulp-sass'),
    autoprefix = require('gulp-autoprefixer'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    changed = require('gulp-changed'),
    clean = require('gulp-clean'),
    rename = require('gulp-rename'),
    minifycss = require('gulp-minify-css'),
    newer = require('gulp-newer'),
    exec = require('child_process').exec,
    sys = require('sys');

// Config
var paths = {
        scss: 'site/source/scss/**/*.scss',
        js: 'site/source/js/**/*.js',
        images: ['site/source/images/**/*.png', 'site/source/images/**/*.gif', 'site/source/images/**/*.jpg', 'site/source/images/**/*.svg'],
        html: 'site/**/*.html',
        root: 'site/',
    },
    dests = {
        css: 'site/assets/css/',
        js: 'site/assets/js/',
        images: 'site/assets/images/',
    },
    options = {
        autoprefix: 'last 10 version',
        imagemin: { optimizationLevel: 3, progressive: true, interlaced: true },
        jshint: '',
        jshint_reporter: 'default',
        scss: { style: 'compressed', compass: true, require: ['compass', 'susy', 'breakpoint'] },
        uglify: { mangle: false },
        clean: { read: false }
    };

// Clean Task
gulp.task('clean', function() {
    return gulp.src([
            dests.css, dests.js, dests.images
        ], options.clean )
        .pipe( clean() );
});

// SASS
gulp.task('styles', function () {
    return gulp.src( paths.scss )
        .pipe( scss( options.scss ).on( 'error', gutil.log ) )
        .pipe( autoprefix( options.autoprefix ) )
        .pipe( gulp.dest( dests.css ) )
        .pipe( connect.reload() )
        .pipe( notify( { message: 'CSS task complete.' } ) );
});

// Scripts
gulp.task('scripts', function () {
    return gulp.src( paths.js )
        .pipe( jshint( options.jshint ) )
        .pipe( jshint.reporter( options.jshint_reporter ) )
        .pipe( gulp.dest( dests.js ) )
        .pipe( uglify( options.uglify ) )
        .pipe( concat( 'all.min.js' ) )
        .pipe( gulp.dest( dests.js ) )
        .pipe( connect.reload() )
        .pipe( notify( { message: 'Scripts task complete.' } ) );
});

// Images
gulp.task('images', function() {
    return gulp.src( paths.images )
        .pipe( imagemin( options.imagemin ) )
        .pipe( newer( dests.images ) ) 
        .pipe( gulp.dest( dests.images ) )
        .pipe( connect.reload() )
        .pipe( notify( { message: 'Images task complete.' } ) );
});

// HTML
gulp.task( 'html', function () {
    return gulp.src( paths.html )
        .pipe( connect.reload() );
});

// Gulp Connect Server
gulp.task('connect', function() {
  connect.server({
    root: paths.root,
    livereload: true
  });
});

// Watch
gulp.task('watch', function () {
    gulp.watch( paths.scss, ['styles'] );
    gulp.watch( paths.js, ['scripts'] );
    gulp.watch( paths.images, ['images'] );
    gulp.watch( paths.html, ['html'] );
});

// Default task
// Note we make sure the clean task will finish before running the other tasks
gulp.task('default', ['clean'], function() {
    gulp.start( 'styles', 'scripts', 'images', 'connect', 'watch' );
});

person Brigante    schedule 28.05.2014    source источник
comment
gulp.watch явно не ищет новые файлы. Плагин gulp-watch предназначен для этого, но по какой-то причине я не могу заставить его работать с imagemin.   -  person Jesse Hattabaugh    schedule 17.06.2014


Ответы (1)


Единственное, что я могу заметить, глядя на https://www.npmjs.org/package/gulp-newer

Кажется, у вас может быть этот фрагмент кода неправильно:

.pipe( imagemin( options.imagemin ) )
.pipe( newer( dests.images ) ) 

Вместо этого должно быть:

.pipe( newer( dests.images ) ) 
.pipe( imagemin( options.imagemin ) )

Может быть, попробовать поменять их местами, чтобы увидеть, есть ли разница? Также вы можете попробовать без более нового потока.

person davidlonjon    schedule 18.06.2014