我的gulp文件如下。我的Watch任务中有两个实例?我怎样才能这样做所以我可以捆绑所有代码文件(包括CSS,JS和HTML)以便在保存时注入和重新加载,而不是单独检查,观察和重新注入它们?我想知道如何优化我当前的设置!任何帮助表示赞赏!
var gulp = require('gulp'), //Task runner
uglify = require('gulp-uglify'), //Minimizies JS
sass = require('gulp-ruby-sass'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
//Error look-out
function errorLog(error){
console.error.bind(error);
this.emit('end');
}
// Scripts
gulp.task('scripts', function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.on('error', errorLog)
.pipe(gulp.dest('build/js'))
});
// Jobs Scripts
gulp.task('jobs-scripts', function(){
gulp.src('src/js/*.js')
.pipe(uglify())
.on('error', errorLog)
.pipe(gulp.dest('jobs/build/js'))
.pipe(browserSync.stream())
});
// Styles
gulp.task('styles', function(){
return sass('src/css/*.sass',{
style: 'compressed'
})
.on('error', errorLog)
.pipe(gulp.dest('build/css'))
.pipe(browserSync.stream())
});
//Jobs Styles
gulp.task('jobs-styles', function(){
return sass('jobs/src/css/*.sass',{
style: 'compressed'
})
.on('error', errorLog)
.pipe(gulp.dest('jobs/build/css'))
.pipe(browserSync.stream())
});
// Images
gulp.task('imagemin', function(){
gulp.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('build/img'))
});
// Jobs Images
gulp.task('jobs-imagemin', function(){
gulp.src('jobs/src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('jobs/build/img'))
});
// Static server
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
// Watch
gulp.task('watch', function(){
gulp.watch('src/js/*.js', ['scripts', browserSync.reload]);
gulp.watch('src/js/*.js', ['jobs-scripts', browserSync.reload]);
gulp.watch('src/css/*.sass', ['styles', browserSync.reload]);
gulp.watch('jobs/src/css/*.sass', ['jobs-styles', browserSync.reload]);
gulp.watch(['*.html', 'jobs/*.html'], ['browser-sync', browserSync.reload]);
});
//Run task
gulp.task('default', ['browser-sync', 'scripts', 'styles', 'jobs-styles', 'jobs-scripts', 'jobs-imagemin', 'imagemin', 'watch']);