这是我的文件目录结构图
下面是我gulpfile.js的配置
'use strict' var gulp=require('gulp');
var gutil=require('gulp-util');
var uglify=require('gulp-uglify');
var watchPath=require('gulp-watch-path');
var combiner=require('stream-combiner2');
var sourcemaps=require('gulp-sourcemaps');
var minifycss=require('gulp-minify-css');
var autoprefixer=require('gulp-autoprefixer');
var sass=require('gulp-sass');
var imagemin=require('gulp-imagemin'); var handleError=function(err){
var colors=gutil.colors;
console.log('\n')
gutil.log(colors.red('Error!'))
gutil.log('fileName: ' + colors.red(err.fileName))
gutil.log('lineNumber: ' + colors.red(err.lineNumber))
gutil.log('message: ' + err.message)
gutil.log('plugin: ' + colors.yellow(err.plugin))
} var combiner=require('stream-combiner2') gulp.task('gutil',function(){
gutil.log('message');
gutil.log(gutil.colors.red('error'))
gutil.log(gutil.colors.green('message:')+"some")
})
//压缩js
gulp.task('uglifyjs',function(){
var combined=combiner.obj([
gulp.src('src/js/**/*.js'),
sourcemaps.init(),
uglify(),
sourcemaps.write('./'),
gulp.dest('dist/js/')
])
combined.on('error',handleError)
})
//压缩css
gulp.task('minifycss',function(){
gulp.src('src/css/**/*.css')
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/css'));
})
//编译scss
gulp.task('sass',function(){
gulp.src('src/sass/**/*.scss')
.on('error',function(err){
console.error('Error!',err.message)
})
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))
.pipe(sass({outputStyle: 'compact'}))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist/css'))
})
//压缩图片
gulp.task('image', function () {
gulp.src('src/images/**/*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/images'))
}) // gulp.watch('src/js/**/*.js',function(event){
// console.log(event); // 当修改 src/js/log.js 文件时
// event {
// // 发生改变的类型,不管是添加,改变或是删除
// type: 'changed',
// // 触发事件的文件路径
// path: 'D:/wamp/www/gulpBuildProject/src/js/log.js'
// } // }) //捕获错误信息
var handleError=function(err){
var colors=gutil.colors;
console.log('\n');
gutil.log(colors.red('Error!'))
gutil.log('filename: '+colors.red(err.filename))
gutil.log('lineNumber: '+ colors.red(err.lineNumber))
gutil.log('message: ' + err.message)
gutil.log('plugin: ' + colors.yellow(err.plugin))
} //监听js修改
gulp.task('watchjs',function(){
gulp.watch('src/js/**/*.js',function(event){
var paths=watchPath(event,'src/','dist/') paths={
srcPath: 'src/js/log.js',
srcdir:'src/js/',
distPath:'dist/js/log.js',
distDir:'dist/js',
srcFilename:'log.js',
distFilename:'log.js'
} gutil.log(gutil.colors.green(event.type)+ ' ' + paths.srcPath)
gutil.log('Dist '+ paths.distPath) var combined=combiner.obj([
gulp.src(paths.srcPath),
uglify(),
gulp.dest(paths.distDir) ])
// gulp.src(paths.srcPath)
// .pipe(uglify())
// .pipe(gulp.dest(paths.distDir))
combined.on('error',handleError);
})
})
//监听css修改
gulp.task('watchcss',function(){
gulp.watch('src/css/**/*.css',function(event){
var paths=watchPath(event,'src/','dist/'); gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' +paths.distPath) gulp.src(paths.srcPath)
.pipe(sourcemaps.init())
.pipe(autoprefixer({
browsers: 'last 2 versions'
}))
.pipe(minifycss())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.distDir));
})
})
//监听编译sass
gulp.task('watchsass',function(){
gulp.watch('src/sass/**/*',function(event){
var paths=watchPath(event,'src/sass/','dist/css/') gulp.log(gutil.colors.green(event.type)+ ' ' + paths.srcPath)
gulp.log('Dist ' + paths.distPath)
sass(paths.srcPath)
.on('error',function(err){
console.error('Error!', err.message);
})
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(minifycss())
.pipe(autoprefixer({
browsers:'last 2 versions'
}))
.pipe(sourcemaps.write('./'))
pipe(gulp.dest(paths.distDir))
})
})
//监听压缩图片
gulp.task('watchimage', function () {
gulp.watch('src/images/**/*', function (event) {
var paths = watchPath(event,'src/','dist/') gutil.log(gutil.colors.green(event.type) + ' ' + paths.srcPath)
gutil.log('Dist ' + paths.distPath) gulp.src(paths.srcPath)
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest(paths.distDir))
})
}) //配置文件复制任务
gulp.task('watchcopy',function(){
gulp.watch('src/fonts/**/*',function(event){
var paths=watchPath(event) gulp.log(gutil.colors.green(event.type)+ ' ' + paths.srcPath)
gulp.log('Dist ' + paths.distPath) gulp.src(paths.srcPath)
.pipe(gulp.dest(paths.distDir)) })
}) gulp.task('copy',function(){
gulp.src('src/fonts/**/*')
.pipe(gulp.dest('dist/fonts/'))
}) gulp.task('default',['watchjs','watchcss','watchsass','watchimage','watchcopy'])
另外以下插件有需要也可以用得上
【gulp-plumber】例外處理
【gulp-livereload】自動重新載入頁面
【gulp-notify】gulp 處理通知
【browser-sync】瀏覽器同步檢視