前端構建工具gulp之實際應用

1.gulp的API介紹

　　gulp.task(name[, deps], fn)    ------   定義要實現的任務

　　name：必選，任務名稱，自定義名稱，不過注意名稱中不要使用空格；

　　deps：可選，一個包含任務列表的數組，在當前任務以前執行的任務，必須使用正確的異步執行方式：使用一個 callback，或者返回一個 promise 或 stream；

　　fn： 必選，當前任務要執行的操做

　　gulp.src(globs[, options])  -------   輸出符合匹配模式或者匹配模式數組的文件

　　glpbs：必選，匹配模式或者匹配模式數組

　　options：可選，經過 glob-stream 所傳遞給 node-glob 的參數

　　gulp.dest(path[, options])  -------   寫文件並從新輸出數據

　　path：必選，文件將被寫入的路徑，也能夠傳入一個函數，在函數中返回相應路徑，若是文件夾爲空，將會自動建立

　　options：可選，輸出目錄的cwd參數和權限設置(mode)

　　gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])   --------   用於監控文件的變化

　　glob：必選，一個 glob 字符串，或者一個包含多個 glob 字符串的數組，指定具體監控的文件

　　opts：可選，傳給gaze的參數

　　tasks：必選，在文件變更後執行的一個或者多個建立的任務名稱

　　cb(event)：可選，每次變更執行的方法；event.type爲發生的變更類型（added, changed 或者 deleted），event.path爲觸發該事件的文件路徑

2.gulp的實際應用

　   匹配符 *、**、！、{}

gulp.src('./js/*.js') // * ------  匹配js文件夾下全部.js格式的文件
gulp.src('./js/**/*.js')   // **  ------  匹配js文件夾的0個或多個子文件夾
gulp.src(['./js/*.js','!./js/main.js'])    // ! ------  匹配除了main.js以外的全部js文件
gulp.src('./js/**/{test,index}.js')   // {} -------  匹配{}裏的文件名

　　css壓縮 

　　安裝插件：   npm install gulp-minify-css --save-dev 和  npm install  gulp-make-css-url-version --save-dev

var gulp = require('gulp'),
　　 cssver = require('gulp-make-css-url-version'), //給css文件裏引用url加版本號
    cssmin = require('gulp-minify-css');
/*css壓縮*/
gulp.task('cssmin',function(){
     gulp.src(['./wmmproject/css/*.css','!./wmmproject/css/common.css'])
         .pipe(cssver())  //給css文件裏引用文件加版本號（MD5）
         .pipe(cssmin({
               advanced:false, //是否開啓高級優化（合併選擇器）默認爲true
               compatibility:'ie7', //保留ie7以及一下兼容寫法 默認爲"*"兼容模式
               keepBreaks: true, //是否保留換行，默認爲false
               keepSpecialComments: '*' //保留全部特殊前綴，若是不加，有可能將會刪除你的部分前綴

         }))
         .pipe(gulp.dest('./wmmproject/dist/css'));
}) 

　　js壓縮   

　　安裝插件：   npm install gulp-uglify --save-dev   和   npm install gulp-rename --save-dev

var gulp = require('gulp'),
  　rename = require('gulp-rename'),//重命名
    uglify = require('gulp-uglify');//js壓縮　　

gulp.task('jsmin',function(){
　　gulp.src('./wmmproject/js/*.js')
　　　　.pipe(uglify({
　　　　　　mangle: true, //是否修改變量名，默認爲true
　　　　　　compress: true//是否徹底壓縮，默認爲true
　　　　}))
　　　　.pipe(rename({suffix:'.min'})) //重命名
　　　　.pipe(gulp.dest('./wmmproject/dist/js'));
})

　　html壓縮

　　安裝插件：   npm install gulp-htmlmin --save-dev   和    npm install gulp-rev-append --save-dev 

var gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin');//html壓縮
gulp.task('htmlmin',function(){
      gulp.src('./wmmproject/demo/*.html')
          .pipe(htmlver())   //html內的文件後必須加入?rev=
          .pipe(htmlmin({
                removeComments: true,//清除HTML註釋
                collapseWhitespace: true,//壓縮HTML
                collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="checked"/> ==> <input  checked/>
                removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input />
                removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
                removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
                minifyJS: true,//壓縮頁面JS
                minifyCSS: true//壓縮頁面CSS
          }))
          .pipe(gulp.dest('./wmmproject/dist/demo'))
})

　　image壓縮    

　　安裝插件：   npm install gulp-imagemin --save-dev

var gulp = require('gulp'),
     imgmin =  require('gulp-imagemin');
gulp.task('imagemin',function(){
      gulp.src('wmmproject/images/*jpg')
          .pipe(imgmin({
              optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
              progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
              interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
              multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化
          }))
          .pipe(gulp.dest('wmmproject/dist/images'))
})

　　文件合併 

　　安裝插件：   npm install gulp-concat --save-dev

var gulp = require('gulp'),
     concat = require('gulp-concat');
gulp.task('concat',function(){
      gulp.src(['wmmproject/js/flexible.js','wmmproject/js/normal.js'])
          .pipe(concat('all.js'))//合併後的文件名
          .pipe(gulp.dest('wmmproject/dist/js/'))
})

　　js檢查

　　安裝插件：   npm install gulp-jshint   jshint  --save-dev

      首先在package.json內配置以下：

"jshintConfig":{
    "undef":true,
    "unused":true,
    "predef": [ "MY_GLOBAL", "ads" ] 
  }

　　參數配置說明以下：

　　

var gulp = require('gulp'),
     jshint = require('gulp-jshint');

gulp.task('jshint',function(){
      gulp.src('wmmproject/js/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'))
})

 　　雪碧圖

  　  安裝插件：   npm install gulp.spritesmith  --save-dev

var gulp=require('gulp');  
    spritesmith=require('gulp.spritesmith'); 
gulp.task('sprite',function(){  
     gulp.src('wmmproject/images/*.png')  
        .pipe(spritesmith({  
            imgName:'wmmproject/images/sprite.png', //生成圖的名稱 
            cssName:'wmmproject/css/sprite.css',  //對應生成的css文件 
            padding:5,  //合成時兩個圖片的間距
            algorithm:'binary-tree' //圖片排列布局，有四個可選值，分別爲top-down、left-right、diagonal、alt-diagonal、binary-tree 
        }))  
        .pipe(gulp.dest('wmmproject/css'))  
})