我愛工程化 之 gulp 使用（二）

     上一篇  介紹了gulp的安裝、環境等配置、基本使用，那麼如今，咱們快走進 速8，深刻了解吧......

1、各類安裝、環境配置、插件安裝（參考上一篇文章）

2、項目基本目錄結構

       

3、編寫 gulpfile.js 文件

      gulp經過gulpfile.js文件來完成相關任務

    示例目錄

    

   gulpfile.js

//引入gulp及組件
var gulp = require('gulp'),                           //基礎庫
    htmlmin = require('gulp-htmlmin'),                //壓縮html
    rev = require('gulp-rev-append'),                 //給頁面的引用添加版本號，清除頁面引用緩存
    //autoprefixer = require('gulp-autoprefixer'),    //根據設置瀏覽器版本自動處理瀏覽器前綴
    //cssmin= require('gulp-minify-css'),               //css壓縮（已經做廢）
    cssmin= require('gulp-clean-css'),               //css壓縮
    cssver = require('gulp-make-css-url-version'),    // css文件引用URL加版本號
    jshint = require('gulp-jshint'),                  //js檢查
    jsmin = require('gulp-uglify'),                   //js壓縮
    concat = require('gulp-concat'),                  //合併文件
    rename = require('gulp-rename'),                  //文件重命名
    imagemin = require('gulp-imagemin'),              //圖片壓縮
    pngquant = require('imagemin-pngquant'),          //深度壓縮png圖片
    cache = require('gulp-cache'),                    //圖片快取，只有更改過得圖片會進行壓縮
    notify = require('gulp-notify'),                  //更動通知
    clean = require('gulp-clean');                    //清空文件夾
    connect = require('gulp-connect'),                //web服務
    browserSync = require('browser-sync'),            //瀏覽器同步
    reload = browserSync.reload;                      //自動刷新

//配置開發和發佈路徑
var path = {
    //開發環境
    src:{
        html:'./src/*.html',
        css:['./src/css/*.css'],
        js:['./src/js/index.js'],
        //js:['./src/js/*.js','!./src/js/{zepto.min}.js'],
        //sass:'./src/sass', 
        image:'./src/images/**/*'
    },
    //發佈環境
    build:{
        html:'./build',
        js:'./build/js',
        css:'./build/css',
        image:'./build/images'
    },
    //不被處理的文件得複製
    copy:[
            {from:'./src/audio/*',to:'./build/audio'},
            {from:['./src/js/*','!./src/js/index.js'],to:'./build/js'}
        ],
    clear:['./build/*.html',
           './build/css/main.css',
           './build/js/main.js',
           './build/images'
    ]
};

/**
 * 創建任務
 * */
// 定義web服務模塊
gulp.task('webserver', function() {
   connect.server({
       livereload: true,
       port: 8888
   });
});

// 定義web服務模塊，增長瀏覽器同步瀏覽
gulp.task('browser-sync', function() {
   browserSync({
       server: {
           baseDir: '.'
       }
   });
});

//1.HTML壓縮
/*注意:壓縮時，textarea會出錯，須要手動修改*/
gulp.task('html', 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"
        /*不要壓頁面中的JS和CSS容易出錯*/
        //minifyJS: true,//壓縮頁面JS
        //minifyCSS: true//壓縮頁面CSS
    };
    gulp.src(path.src.html)
        .pipe(rev())
        //.pipe(htmlmin(options))
        .pipe(gulp.dest(path.build.html))
        .pipe(reload({stream: true}))
        .pipe(notify({message:'Html task complete'}));
});

//2.CSS壓縮(基本使用) 合併以後，記得手動修改html中的引入路徑
gulp.task('css', function () {
    gulp.src(path.src.css)
        // .pipe(autoprefixer({
        //     browsers: ['last 2 versions'],
        //     //是否美化屬性值 默認：true 像這樣：
        //     //-webkit-transform: rotate(45deg);
        //     //        transform: rotate(45deg);
        //     cascade:true,
        //     remove:true //是否去掉沒必要要的前綴 默認：true
        // }))

        .pipe(concat('index.css'))
        .pipe(cssver())                    // CSS文件引用URl加版本號
        .pipe(cssmin({
            advanced: false,//類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]
            compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: false,//類型：Boolean 默認：false [是否保留換行]
            keepSpecialComments: '*'
            //保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
        }))
        //.pipe(rename({ suffix: '.min' })) //若是是多個css合併，記得修改html引入文件的名字
        .pipe(gulp.dest(path.build.css))
        .pipe(reload({stream: true}))
        .pipe(notify({message:'Css task complete'}));
});

//3.js語法檢查及壓縮
gulp.task('js', function () {
    gulp.src(path.src.js)
        .pipe(jshint())   
        .pipe(jshint.reporter('default'))
        //.pipe(concat('main.js'))
        .pipe(jsmin())
        //.pipe(rename({suffix: '.min' }))
        .pipe(gulp.dest(path.build.js))
        .pipe(reload({stream: true}))
        .pipe(notify({message:'Javascript task complete'}));
});

//4.圖片處理
gulp.task('image', function(){
    return gulp.src(path.src.image)
        .pipe(cache(imagemin({
            optimizationLevel:5,//類型：Number  默認：3  取值範圍：0-7（優化等級）
            progressive:true,//類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced:true,//類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass:true,//類型：Boolean 默認：false 屢次優化svg直到徹底優化
            use: [pngquant()] //深度處理png格式的圖片
        })))
        .pipe(gulp.dest(path.build.image))
        .pipe(reload({stream: true}))
        .pipe(notify({message:'Images task complete'}));
});

//5.複製文件
gulp.task('copy', function(){
    for(var i=0,items=path.copy,len=items.length;i<len;i++){
        gulp.src(items[i].from).pipe(gulp.dest(items[i].to))
            .pipe(notify({message:'copy task complete'}));
    }
});
  

//6.清空圖片、樣式、js
gulp.task('clean', function() {
    gulp.src(path.clear,{read: false})
        .pipe(clean())
        .pipe(notify({message: 'Clean task complete'}));
});

//7.默認任務 清空圖片、樣式、js並重建 運行語句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('html','css','js','image','copy');
});

//X.監放任務 運行語句 gulp watch
//watch方法是用於監聽文件變化，文件一修改就會執行指定的任務
gulp.task('watch', function () {
    //監聽html
    gulp.watch(path.src.html, function (event) {
        gulp.run('html');
    });
    // 監聽css
    gulp.watch(path.src.css, function () {
        gulp.run('css');
    });
    // 監聽js
    gulp.watch(path.src.js, function () {
        gulp.run('js');
    });
    // 監聽images
    gulp.watch(path.src.image, function () {
        gulp.run('image');
    });
});

 

4、任務運行

   前提，cmd進入項目目錄

   能夠一個任務一個任務的執行，例如: gulp html   html對應的是 gulp.task('html', function () {}

   這裏面我要用批量任務方式，直接運行gulp命令，一波流搞定對應的是 

gulp.task('default', ['clean'], function(){
    gulp.start('html','css','js','image','copy');
});

  結果： 該有的全有了，帥吧。

 

6、複用gulp環境及配置工具

      本人最討厭的事情就是，重複、沒意思的事情不斷去作，有那時間還不如撩個妹兒，打個灰機呢，有人可能不屑於複用，那算你牛逼，我是拯救不了你這樣的單身狗了......

      複用gulp的好處：不用再次本地安裝那麼多插件了，若是你非要再裝一次，那 I 服了 YOU！

      我複用的步驟以下：

      1.先將這個demo備份，以防本身改錯，而後就SB了

      2.將src裏面的內容替換成本身項目的內容

      3.刪除build整個文件夾

      4.修改gulpfile.js

         根據本身狀況，修改文件便可