Gulp 在imagemin任务中吞下livereload?
我有下面的一大口,它处理我的sass、js和图像。所有任务我都有livereload。除了图像任务外,它在所有任务上都工作得很好 如果我在源目录中放置或更新一个图像,它不会重新加载,但会为所有其他任务重新加载 有人能指出我做错了什么吗Gulp 在imagemin任务中吞下livereload?,gulp,livereload,Gulp,Livereload,我有下面的一大口,它处理我的sass、js和图像。所有任务我都有livereload。除了图像任务外,它在所有任务上都工作得很好 如果我在源目录中放置或更新一个图像,它不会重新加载,但会为所有其他任务重新加载 有人能指出我做错了什么吗 // Required Plugins var gulp = require('gulp'), connect = require('gulp-connect'), livereload = require("gulp-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' );
});
我唯一能注意到的是 似乎您可能对这段代码有错误的理解:
.pipe( imagemin( options.imagemin ) )
.pipe( newer( dests.images ) )
它应该是:
.pipe( newer( dests.images ) )
.pipe( imagemin( options.imagemin ) )
也许试着交换一下,看看会不会有什么不同?
您也可以尝试不使用较新的流。gulp.watch显然不监视新文件。GulpWatch插件声称可以做到这一点,但由于某种原因,我无法让它与imagemin一起工作。