gulp備忘錄

//tip一、gulp任務是異步的，task寫法上能夠省略return，但在須要同步執行任務時，這個return是不能省略的。

//tip二、安裝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'))
})