gulp經常使用插件使用指南（一）

前言

若是你已經在項目中引入了gulp，那麼不妨嘗試用一些gulp集成好的插件來作一些任務。下面假定前端項目中根目錄有src以及dist兩個，分別用於開發和生產。

• 如下模塊地址均爲官網地址，若是以爲請求地址慢，能夠訪問淘寶鏡像的包說明地址，http://npm.taobao.org/
• 如下模塊介紹順序不分前後，代碼僅供參考，親測可用。
• 全部的模塊使用都須要require引入，若是下面代碼有遺漏請自覺加入。

gulp-less

• 模塊地址：https://www.npmjs.com/package/gulp-less/

• 安裝

  $ npm install gulp-less --save-dev 
  複製代碼

• 使用場景：開發完成以後利用任務自動將開發代碼編譯

• 使用

  var less = require('gulp-less');
  gulp.task('lessCompile', function () {
    return gulp.src('src/less/style.less')
      .pipe(less())//less編譯 
      .pipe(gulp.dest('dist/css'));//編譯爲同名的文件,不須要單獨命名樣式文件
  });
  
  複製代碼

gulp-rename

• 模塊地址：https://www.npmjs.com/package/gulp-rename/

• 安裝

  $ npm install gulp-rename --save-dev 
  複製代碼

• 使用場景：區別於開發文件或者追加版本號等，入參有path：子屬性有dirname，basename ，prefix，suffix，extname。能夠經過字符串，方法以及hash三種方式。我的建議使用最後一個最方便,fn的最強大。

• 使用

  var rename = require('gulp-rename');
  gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
      //第一種方式
    .pipe(rename({
      dirname: "main/text/ciao",  basename: "aloha",prefix: "bonjour-",
      suffix: "-hola", extname: ".md"}))
        //第二種方式
     .pipe(rename(function (path) {
      path.dirname += "/ciao";
      path.basename += "-goodbye";//支持更靈活的定義
    })
  複製代碼

gulp-clean-css

• 模塊地址：https://www.npmjs.com/package/gulp-clean-css/

• 安裝

  $ npm install gulp-clean-css --save-dev 
  複製代碼

• 使用場景：導出到生產以前須要壓縮樣式表 配置說明：

1. advanced: false,//類型：Boolean 默認：true [是否開啓高級優化（合併選擇器等）]
2. compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，''：IE9+兼容模式]
3. keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
4. keepSpecialComments: '*'//保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴

• 使用

  var cleanCSS = require('gulp-clean-css');
  gulp.task('cleanCss', function () {
    return gulp.src('src/less/style.less')
      .pipe(cleanCSS())//壓縮css文件
  });
  
  複製代碼

gulp del

• 模塊地址：http://www.gulpjs.com.cn/docs/recipes/delete-files-folder/

• 安裝

  $ npm install gulp del --save-dev 
  複製代碼

• 使用場景：刪除指定路徑的文件，刪除管道中的文件（須要vinylPaths模塊的安裝），若是是整 個文件夾內容清空/.若是是包括文件夾刪除，直接文件目錄便可，如/**/

• 使用

  var del=require('del'),vinylPaths = require('vinyl-paths')；
  //刪除指定路徑的文件
  gulp.task("clean:css",function(cb){
      del(['dist/css/*.css',  '!dist/css/*min.css'], cb);})
  gulp.task("del-less",function(){
      return gulp.src('src/less/demo.less')
      .pipe(vinylPaths(del))
  })//刪除管道中的文件
  
  複製代碼

gulp-uglify

• 模塊地址：https://www.npmjs.com/package/gulp-uglify

• 安裝

  $ npm install gulp-uglify --save-dev 
  複製代碼

• 使用場景：腳本上線以前完成壓縮工做

• 使用

  var uglify = require('gulp-uglify');
  gulp.task('js', function () {
    return gulp.src('src/js/*.js')
      .pipe(uglify())
  });
  
  複製代碼

gulp-concat

• 模塊地址：https://www.npmjs.com/package/gulp-concat

• 安裝

  $ npm install gulp-concat --save-dev 
  複製代碼

• 使用場景：web優化，合併文件減小http請求，同類型的文件才能夠合併，好比css能夠合併，js能夠合併等。

• 使用

  var fileConcat = require('gulp-concat');
  gulp.task('fileConcat', function () {
    return gulp.src('src/js/*.js') 
      .pipe(concat("combine.js"))//能夠控制合併生成的文件
  });
  
  複製代碼

gulp copy

• 不須要安裝任何模塊，由於自己gulp的文件流管道機制支持文件拷貝

• 使用場景：複製相關的文件結構到生產目錄，好比頁面文件。由於頁面文件中的都是相對目錄，因此當css以及js使用爲產出地址時，要求頁面等必備的但願產品的也放到產出目錄。

• 使用

  gulp.task("copyhtmldir",function(){
      return gulp.src(['src/html/**/*'])
      .pipe(gulp.dest('dist/html'))
  
  })
  複製代碼

gulp-imagemin

• 模塊地址：https://www.npmjs.com/package/gulp-imagemin

• 安裝

  $ npm install gulp-imagemin  --save-dev 
  複製代碼

• 使用場景：上線以前對沒必要要的高精度圖片進行壓縮，避免沒必要要的高清圖片。優化加載速度，提高頁面性能，配置項爲json類型。

1. optimizationLevel: 5, //類型：Number 默認：3 取值範圍：0-7（優化等級）
2. progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
3. interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
4. multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化

• 使用

  var imgmin=require("gulp-imagemin");
  gulp.task("imgmin",function(){
      return gulp.src('src/images/*')
      .pipe(imgmin())
      .pipe(gulp.dest("dist/images"))})
  複製代碼

gulp-autoprefixer

• 模塊地址：https://www.npmjs.com/package/gulp-autoprefixer

• 安裝

  $ npm install gulp-autoprefixer --save-dev 
  複製代碼

• 使用場景：不熟悉廠商前綴的開發者能夠在開發完成以後利用此模塊一次性追加前綴，能夠靈活配置前綴需求的瀏覽器列表。

1. browsers：[] （定義使用的瀏覽器版本）
2. cascade ： true （定義對屬性進行對齊操做）,默認true
3. remove : true (去掉沒必要要的前綴) ，默認true

• 使用

  //直接對管道文件操做
   .pipe(autoprefixer({
              browsers:["last 5 versions"],
              cascade:true,
              remove:true}))
  複製代碼

• 相關文檔地址：gulp設置autoprefixer

gulp-load-plugins

• 模塊地址：https://www.npmjs.com/package/gulp-load-plugins

• 安裝

  $ npm install gulp-load-plugins --save-dev 
  複製代碼

• 使用場景：全部gulp集成的模塊插件若是前面有gulp- 開頭而且在package.json中有依賴注入，那麼不須要重複聲明變量，能夠直接用$.name使用，後面多單詞從第二個詞開始首字母須要大寫。

• 使用

  var $ = require('gulp-load-plugins')();
  $.rename
  //等效於下面的寫法
  var rename=require('gulp-rename');
  rename
  
  複製代碼