gulp workflow

/*
* 1.为了减少http请求,把三个js合并成一个js,
* 2.为了减少js请求的加载时间,把合并后的js压缩成一个min.js
* 3.原来的三个js已经变成了一个js.需要把输出的jsp文件里的三个<script>去掉.换成引用新的min.js
* tip:gulp任务是异步的，task写法上可以省略return，但在需要同步执行任务时，这个return是不能省略的。
* */

var gulp = require('gulp');
var uglify = require('gulp-uglify');//压缩js
var clean_css = require('gulp-clean-css');//压缩css
var concat = require('gulp-concat');//合并代码
var less = require("gulp-less") // 编译 less
var del = require('del') // 删除代码
var notify = require('gulp-notify') // 消息通知
var rev = require("gulp-rev") //生成版本 hash 的静态文件
var gutil = require("gulp-util")// 一个工具库 //如果有自定义方法，会用到
var plumber = require("gulp-plumber") // 自动处理全部错误信息防止因为错误而导致 watch 不正常工作
var changed = require("gulp-changed") // 只编译修改过的文件，加快速度
var gulpFilter = require('gulp-filter')  //过滤文件
var override = require('gulp-rev-css-url') // 修正 css 文件里面的图片路径
var clean = require("gulp-clean") // 清除目录或文件
var gulpSequence = require('gulp-sequence');///每个同步执行的任务组用[]包起来，用逗号隔开,[]里面的任务将会异步执行
var fileinclude = require('gulp-file-include') // include复用html，详情见博客https://blog.csdn.net/u011500781/article/details/52311763
var inlinesource = require('gulp-inline-source') // 将js，css从外联变成内联
var replace = require('gulp-replace')//替换 ，例如实现将外联css变成内联
/*通过 gulp-replace 替换 link
（1）首先 html 页面中应该有对应 css 文件的 link 标签
（2）通过 gulp 把 link 标签替换成 style 标签的，并添加对应的 css 内容*/
var useref = require('gulp-useref') // 文件合并和替换
var gulpif = require('gulp-if') // if
var cheerio = require('gulp-cheerio')//dom操作
var htmlmin = require('gulp-htmlmin')//压缩html
var css_version = require('gulp-make-css-url-version')//css 文件里的 url 加版本号（根据引用文件的 MD5 生成版本号）。
var gulp_autoprefixer = require('gulp-autoprefixer')//自动处理css的前缀
//使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码，不必考虑各浏览器兼容前缀。(特别是开发移动端页面时，就能充分体现它的优势)

/**将px转化成rem**/
//详细情况见博客http://www.yaya12.com/archives/710
var postcss = require('gulp-postcss') // postcss
var px2rem = require('postcss-px2rem') // pxtorem
// var handleErrors = require('./lib/handleError')
var browserSync = require('browser-sync').create()
var reload = browserSync.reload
//
/**
 * dev本地测试环境
 * build最终的发布环境
 * */

//先清除dev和build目录下的js、css、img、html
gulp.task("del", function () {
    return del(['dev/js/*.js', 'dev/img/*.*', 'dev/css/*.css', 'dev/*.html'])
})
/***********本地调试环境***********/
// 合并并压缩js，合并并压缩css
gulp.task('yasuo_js', function () {
    return gulp.src('learn_less/js/*.js')
    // .pipe(concat('main.js'))//先合并
        .pipe(uglify({mangle: {eval: true}})) //压缩
        .pipe(gulp.dest('dev/js'))
})
//压缩并合并pxTorem
gulp.task('yasuo_css', function () {
    var processors = [px2rem({
        remUnit: 75
    })]
    //编译的less
    return gulp.src('learn_less/less/*.less')
        .pipe(
            less().on('error', function (e) {
                console.error(e.message)
                this.emit('end')
            })
        )
        .pipe(gulp_autoprefixer({//根据设置浏览器版本自动处理浏览器前缀
            browsers: ['last 2 versions', 'last 2 Explorer versions', "Firefox >= 20"],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(postcss(processors))
        .pipe(clean_css())//压缩css
        .pipe(gulp.dest('dev/css'))
})

//处理include
gulp.task('include', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('learn_less/*.html')
        .pipe(fileinclude())
        // .on('error', handleErrors)//先include
        // .pipe(htmlmin(options))//压缩
        .pipe(gulp.dest('dev/'));
});
//移动不需要处理的css
gulp.task('move_css', function () {
    return gulp.src('learn_less/css/*.*')
        .pipe(gulp.dest('dev/css'))
    // .pipe(notify({
    //   message: '图片移动成功'
    // }))
})
//将img里面的图片转到其他目录
gulp.task('move_img', function () {
    return gulp.src('learn_less/img/*.*')
        .pipe(gulp.dest('dev/img'))
    // .pipe(notify({
    //   message: '图片移动成功'
    // }))
})
gulp.task('move_font', function () {
    return gulp.src('learn_less/font/*.*')
        .pipe(gulp.dest('dev/font'))
        .pipe(notify({
            message: "字体移动成功"
        }))
})
gulp.task('move_include', function () {
    return gulp.src('learn_less/include/*.*')
        .pipe(gulp.dest('dev/include'))
        .pipe(notify({
            message: "include移动成功"
        }))
})

//监听各文件的变化并自动刷新页面
gulp.task('watch:html', function () {
    gulp.watch('learn_less/*.html', ['include'])
})
gulp.task('watch:include', function () {
    gulp.watch('learn_less/include/*.*', ['include'])
})
gulp.task('watch:less', function () {
    gulp.watch('learn_less/less/*.less', ['yasuo_css'])
})
gulp.task('watch:css', function () {
    gulp.watch('learn_less/css/*.css', ['move_css'])
})
gulp.task('watch:js', function () {
    gulp.watch('learn_less/js/*.js', ['yasuo_js'])
})
gulp.task('watch:others', function () {
    gulp.watch([
        'learn_less/font/*.*',
        'learn_less/img/*.*',
        'learn_less/include/*.*'
    ], function (event) {
        switch (event.type) {
            case 'deleted':
                // 之所以删除再移动，是为了防止重命名文件只导致的文件删除的问题
                gutil.log(event.path + ' deleted')
                var tmp = event.path.replace(/learn_less/, 'dev')
                gutil.log(tmp)
                del([tmp])
                // 获取所在的文件夹名称
                var target = event.path.match(/learn_less[\/|\\](.*?)[\/|\\]/)[1]
               gutil.log(target)
                gulp.src('learn_less/' + target + '/*.*')
                    .pipe(gulp.dest('dev/' + target))//响应比较慢，再问间列表里面出来的比较慢
                break
            case 'added':
                gutil.log(event.path + ' added')
                var target = event.path.match(/learn_less[\/|\\](.*?)[\/|\\]/)[1]
                gutil.log(target)
                gulp.src('learn_less/' + target + '/*.*')
                    .pipe(gulp.dest('dev/' + target))
                break
            case 'changed':
                gutil.log(event.path + ' changed')
                var target = event.path.match(/learn_less[\/|\\](.*?)[\/|\\]/)[1]
                gulp.src('learn_less/' + target + '*.*')
                    .pipe(gulp.dest('dev/' + target))
                break
        }
    })
})
gulp.task('watch:dev', function () {
    gulp.watch(['dev/**/*.*','dev/*.*']).on('change',reload)
})
//静态服务器
gulp.task('browser-sync', function () {
    return browserSync.init({
        server: {
            baseDir: './dev/'
        },
        port: "3000"
    })
})
gulp.task('default', gulpSequence(
    ['del', 'yasuo_js', 'yasuo_css', 'include', 'move_img','move_include','move_font','move_css'], ['watch:html', 'watch:css','watch:less','watch:js' , 'watch:dev','watch:others'], ['browser-sync']
))

/********
 * 生产环境
 * build
 * *********/
//现清空build文件
gulp.task('build_del',function(){
    return del(['build/js/*.js', 'build/css/*.css', 'build/img/*.*','build/font/*.*','build/*.html'])
})
//处理js
gulp.task('build_js',function(){
    return gulp.src('learn_less/js/*.js')
    // .pipe(concat('main.js'))//先合并
        .pipe(uglify({mangle: {eval: true}})) //压缩
        .pipe(gulp.dest('build/js'))
})
//处理css
gulp.task('build_less', function () {
    var processors = [px2rem({
        remUnit: 75
    })]
    //编译的less
    return gulp.src('learn_less/less/*.less')
        .pipe(
            less().on('error', function (e) {
                console.error(e.message)
                this.emit('end')
            })
        )
        .pipe(gulp_autoprefixer({//根据设置浏览器版本自动处理浏览器前缀
            browsers: ['last 2 versions', 'last 2 Explorer versions', "Firefox >= 20"],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(postcss(processors))
        .pipe(clean_css())//压缩css
        .pipe(gulp.dest('build/css'))
})
//移动css框架
gulp.task('build_css', function () {
    return gulp.src('learn_less/css/*.*')
        .pipe(gulp.dest('build/css'))
    // .pipe(notify({
    //   message: 'css移动成功'
    // }))
})
gulp.task('build_img', function () {
    return gulp.src('learn_less/img/*.*')
        .pipe(gulp.dest('build/img'))
    // .pipe(notify({
    //   message: '图片移动成功'
    // }))
})
//处理include
gulp.task('build_include', function () {
    var options = {
        removeComments: true,//清除HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    return gulp.src('learn_less/*.html')
        .pipe(fileinclude())
        // .on('error', handleErrors)//先include
        .pipe(htmlmin(options))//压缩
        .pipe(gulp.dest('build/'));
});
//将img里面的图片转到其他目录
gulp.task('build_img', function () {
    return gulp.src('learn_less/img/*.*')
        .pipe(gulp.dest('build/img'))
    // .pipe(notify({
    //   message: '图片移动成功'
    // }))
})
gulp.task('build_font', function () {
    return gulp.src('learn_less/font/*.*')
        .pipe(gulp.dest('build/font'))
        .pipe(notify({
            message: "字体移动成功"
        }))
})
gulp.task('build',gulpSequence(
    ['build_del'],['build_js'],['build_css'],['build_include'],['build_img'],['build_font'],['build_less']
))
// gulp.task('watch_css', function () {
//     gulp.watch('GF-WIFI/css/*.css', function (event) {
//         switch (event.type) {
//             case 'deleted':
//                 break
//             case 'added':
//                 break
//             case 'changed':
//                 gutil.log(event.path + ' changed')
//                 // var target = event.path.match(/src[\/|\\](.*?)[\/|\\]/)[1]
//                 // gulp.src(path.dirs.src + target + '/**/*.*')
//                 //     .pipe(gulp.dest(path.dirs.dev + target))
//                 break
//
//         }
//     })
// })
// gulp.task('hebing_css',function(){
//     var px_rem=[px2rem({
//         remUnit:75
//     })]
//     return gulp.src('GF-WIFI/css/*.css')
//         .pipe(concat('main.css'))
//         .pipe(clean_css())
//         .pipe(gulp_autoprefixer({
//             browsers: ['last 2 versions', 'Android >= 4.0'],
//             cascade: true, //是否美化属性值 默认：true 像这样：
//             //-webkit-transform: rotate(45deg);
//             //        transform: rotate(45deg);
//             remove:true //是否去掉不必要的前缀 默认：true
//         }))
//         .pipe(postcss(px_rem))
//         .pipe(gulp.dest('dev/css'))
// })
// // gulp.task('default', function() {
// //     // 将你的默认的任务代码放在这
// //     gulp.start('del','hebing_js','hebing_css');
// // })
// gulp.task('default', function() {
//     // 将你的默认的任务代码放在这
//     gulp.start('del','hebing_js','hebing_css','del_script','move_img');
// })
// gulp.task('test',function(){
//     console.log('ceshi')
// })