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 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')
// })