项目gulp下的 gulpfile.js 可引用再调整

'use strict';
var gulp         = require('gulp'),
    minifyCSS    = require('gulp-minify-css'),
    clean        = require('gulp-clean'),
    del          = require('del'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin     = require('gulp-imagemin'),
    changed      = require('gulp-changed'),
    rename       = require('gulp-rename'),
    concat       = require('gulp-concat'),
    cache        = require('gulp-cache'),
    jshint       = require('gulp-jshint'),
    uglify       = require('gulp-uglify'),
    watch        = require('gulp-watch'),
    plumber      = require('gulp-plumber'),
    htmlmin      = require('gulp-htmlmin'),
    sass         = require('gulp-sass'),
    browserSync  = require('browser-sync').create(),
    reload       = browserSync.reload;
// 目标目录清理
gulp.task('clean', function(cb) { 
    return del(['dist/**/*'], cb); 
});
// HTML处理
    var htmlSrc = 'src/**/*.jsp',
        htmlDest = 'dist/';
// gulp.task('html', function() {
//     return gulp.src(htmlSrc)
//         .pipe(plumber())
//         .pipe(changed(htmlDest))
//         .pipe(gulp.dest(htmlDest))

// });
gulp.task('html', function () {
    var options = {
        removeComments: true,  //清除HTML注释
        collapseWhitespace: true,  //压缩HTML
        collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
        minifyJS: true,  //压缩页面JS
        minifyCSS: true  //压缩页面CSS
    };
    gulp.src('src/**/*.jsp')
        .pipe(htmlmin(options))
        .pipe(changed('dist/'))
        .pipe(gulp.dest('dist/'));
});
//编译sass,压缩css并输出
var sassSrc = 'src/sass/**/*.scss',
    sassDest = 'src/css';
gulp.task('sass', function () {
    return gulp.src(sassSrc)
        .pipe(plumber())
        .pipe(watch(sassSrc))
        .pipe(sass())
        // .pipe(autoprefixer({
        //       browsers: 'last 3 versions'
        //     }))
        .pipe(minifyCSS({keepSpecialComments: '*'}))//sass编译后直接注入src/css/文件中
        .pipe(gulp.dest(sassDest))
        .pipe(browserSync.stream());
});
//压缩css并输出
var cssSrc = 'src/css/**/*.css',
    cssDest = 'dist/css';
gulp.task('css', function () {
    return gulp.src(cssSrc)
        .pipe(plumber())
        .pipe(changed(cssDest))
        .pipe(minifyCSS({
            compatibility: 'ie8',
            keepBreaks: true,//类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        }))
        // .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(cssDest))
})
//压缩js并输出
var jsSrc = 'src/js/*.js',
    jsDest = 'dist/js';
gulp.task('uglifyjs', function () {
    return gulp.src(jsSrc)
        .pipe(plumber())
        .pipe(changed(jsDest))
        // .pipe(rename({ suffix: '.min' }))
        .pipe(jshint())     //自动在目录查找.jshintrc 直到找到为止
        .pipe(jshint.reporter('default'))    //在命令行中或者gulp面板报告错误当然也可以自定义报告格式
        .pipe(uglify())
        .pipe(gulp.dest(jsDest));
});
//压缩图片并输出
var imagesSrc = 'src/images/**/*',
    imagesDest = 'dist/images';
gulp.task('images', function() {
    return gulp.src(imagesSrc)
        .pipe(plumber())
        .pipe(changed(imagesDest))
        .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
        .pipe(gulp.dest(imagesDest));
});
//browser-sync同步测试
// gulp.task("browser-sync", function() {
//     browserSync({
//         files: "**",
//         server: {
//             baseDir: "./"
//         }
//     });
// });
gulp.task('serve',function() {
    browserSync.init({
        proxy: "http://localhost:80/siming/src/index.html"
    });
    gulp.watch("src/sass/**/*.scss", ['sass']);
    gulp.watch("src/**/*.html").on('change', reload);   //监听reload路径

});

//默认任务
gulp.task('default',['clean','sass','html','images','uglifyjs','css','watch','serve']);
//同步测试任务
// gulp.task('sync',['browser-sync']);
//监听任务
gulp.task('watch',function(){
    // 监听html
    gulp.watch(htmlSrc,['html']);
    // 监听sass
    gulp.watch(sassSrc,['sass']);
    // 监听css
    gulp.watch(cssSrc,['css']);
    // 监听images
    gulp.watch(imagesSrc,['images']);
    // 监听js
    gulp.watch(jsSrc,['uglifyjs']);
});

jshint的配置，可以把配置放入package.json中，也可以独立一个.jshintrc 文件，
//压缩js并输出（含检验）
var jsSrc = 'src/js/*.js',
jsDest = 'dist/js';
gulp.task('uglifyjs', function () {
return gulp.src(jsSrc)
.pipe(plumber())
.pipe(changed(jsDest))
// .pipe(rename({ suffix: '.min' }))
.pipe(jshint()) //自动在目录查找.jshintrc 直到找到为止
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(gulp.dest(jsDest));
});
1：当运行上面uglifyjs任务时，.pipe(jshint()) //自动在目录查找.jshintrc 直到找到为止，对于这个js检验语法的配置对应可以浏览器搜索，当然从字面上也能看出来:
下面是.jshintrc内容

{
  "bitwise":true,
  "browser":true,
  "camelcase":true,
  "curly":true,
  "eqeqeq":true,
  "forin":true,
  "freeze":true,
  "indent":2,
  "latedef":true,
  "maxdepth": 6,
  "maxparams": 6,
  "maxstatements": 50,
  "noarg":true,
  "noempty":true,
  "nonbsp":true,
  "trailing":true,
  "undef":true,
  "unused":"vars",
  "immed":true,
  "browser": true,
  "jquery":true,
  "shadow":"true",
  "predef": [
    "alert",
    "confirm",
    "console",
    "escape",
    "define",
    "module",
    "require"
  ]
}

2：运行gulp默认任务时先clean清除掉编译过的图片，js，css,及页面文件，后面任务编译文件到dist文件夹的时间会相对比较长，如果你的项目比较多文件的话，（我弄的项目起码要几分钟编译时间），因此如果没有编译的垃圾或者清除必要，可以不用运行clean任务