Question

我有以下gulp处理我的sass，js和图像。我还完成了所有任务的实时重载。除了图像任务外，它完美地完成了所有任务。

如果我在源目录中放置或更新图像，它不会重新加载，但它可以用于所有其他任务。

有人可以指出我做错了吗？

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

Answer 1

我唯一注意到的是https://www.npmjs.org/package/gulp-newer

看起来你可能错误地使用了这段代码：

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

应该是：

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

也许尝试交换它们以查看它是否有所作为？您也可以尝试没有新的流。

在imagemin任务上gulp livereload？

1 个答案: