gulp备忘录

//tip1、gulp任务是异步的，task写法上可以省略return，但在需要同步执行任务时，这个return是不能省略的。

//tip2、安装gulp时，一定要全局安装一个，项目依赖安装一个，要使用gulp的命令必须全局安装


/*
* 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 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

//
/**
 * dev本地测试环境
 * build最终的发布环境
 * */

//先清除dev和build目录下的js、css、img、html
gulp.task("del",function(){
    return del(['dev/js/*.js','dev/img/*.*','dev/css/*.css','build/js/*.js','build/css/*.css','build/img/*.*','dev/*.html'])
})
/***********本地调试环境***********/
// 合并并压缩js，合并并压缩css
gulp.task('hebing_js',function(){
    return gulp.src(['GF-WIFI/js/adaptive.js','GF-WIFI/js/zepto.min.js','GF-WIFI/js/zepto.touch.js','GF-WIFI/js/swiper.jquery.min.js','GF-WIFI/js/dropload.min.js','GF-WIFI/js/index.js'])
        .pipe(concat('main.js'))//先合并
        .pipe(uglify({ mangle: {eval:true} }))
        .pipe(gulp.dest('dev/js'))
})
//压缩并合并css
gulp.task('hebing_css',function(){

    return gulp.src(['GF-WIFI/css/index.css','GF-WIFI/css/swiper.min.css','GF-WIFI/css/reset.css','GF-WIFI/css/dropload.css'])
        .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(concat('main.css'))//先合并
        .pipe(clean_css())//压缩css
        .pipe(gulp.dest('dev/css'))
})

//处理html
gulp.task('minhtml', 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('GF-WIFI/*.html')
        // .pipe(replace(/\<\!--should move start--\>[^]*\<\!--should move end--\>/g, ''))
        .pipe(replace(/\<\!--link move start--\>[^]*\<\!--link move end--\>/g, '<link rel="stylesheet" type="text/css" href="./css/main.css"/>'))
        .pipe(replace(/\<\!--js move start--\>[^]*\<\!--js move end--\>/g, '<script  src="./js/main.js"> </script>'))
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dev/'));
});
// gulp.task('del_script',function(){
//     return gulp .src('GF-WIFI/*.html')
//         .pipe(gulp.dest('dev'))
//     // return gulp.src('GF-WIFI/*.html')
//     //     .pipe(cheerio(function($){
//     //         if($('script')){
//     //             console.log('数据%o',$('script'))
//     //             $('script').remove();
//     //             $('body').append('<script src="./js/main.js"></script>')//这个会为每一个html加这个压缩合并的js
//     //         }
//     //     }))
//     //     // .pipe(htmlmin())
//     //     .pipe(gulp.dest('dev'))
// })
//将img里面的图片转到其他目录
gulp.task('move_img',function(){
    return gulp.src('GF-WIFI/img/*.*')
        .pipe(gulp.dest('dev/img'))
})
gulp.task('default', gulpSequence(
    ['del'], ['hebing_js'],['hebing_css'],['minhtml'],['move_img'],['watch_css']
))
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')
// })

//编译的less
gulp.task('less',function(){
    return gulp.src('learn_less/less/*.*')
        .pipe(
            less().on('error', function (e) {
                console.error(e.message)
                this.emit('end')
            })
        )
        .pipe(gulp.dest('learn_less/css'))
})