[TOC] ### 前言 如果你已經在項目中引入了gulp，那么不妨嘗試用一些gulp集成好的插件來做一些任務。下面假定前端項目中根目錄有src以及dist兩個，分別用于開發和生產。 * 以下模塊地址均為官網地址，如果覺得請求地址慢，可以訪問淘寶鏡像的包說明地址，http://npm.taobao.org/ * 以下模塊介紹順序不分先后，代碼僅供參考，親測可用。 * 所有的模塊使用都需要require引入，如果下面代碼有遺漏請自覺加入。 ### gulp-less * 模塊地址：https://www.npmjs.com/package/gulp-less/ * 安裝 ``` bash $ npm install gulp-less --save-dev ``` * 使用場景：開發完成之后利用任務自動將開發代碼編譯 * 使用 ``` javascript 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/ * 安裝 ``` bash $ npm install gulp-rename --save-dev ``` * 使用場景：區別于開發文件或者追加版本號等，入參有path：子屬性有dirname，basename ，prefix，suffix，extname。可以通過字符串，方法以及hash三種方式。個人建議使用最后一個最方便,fn的最強大。 * 使用 ``` javascript 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/ * 安裝 ``` bash $ 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生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴 * 使用 ``` javascript 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/ * 安裝 ``` bash $ npm install gulp del --save-dev ``` * 使用場景：刪除指定路徑的文件，刪除管道中的文件（需要vinylPaths模塊的安裝），如果是整 個文件夾內容清空/*.如果是包括文件夾刪除，直接文件目錄即可，如/**/* * 使用 ``` javascript 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 * 安裝 ``` bash $ npm install gulp-uglify --save-dev ``` * 使用場景：腳本上線之前完成壓縮工作 * 使用 ``` javascript 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 * 安裝 ``` bash $ npm install gulp-concat --save-dev ``` * 使用場景：web優化，合并文件減少http請求，同類型的文件才可以合并，比如css可以合并，js可以合并等。 * 使用 ``` javascript var fileConcat = require('gulp-concat'); gulp.task('fileConcat', function () { return gulp.src('src/js/*.js') .pipe(concat("combine.js"))//可以控制合并生成的文件 }); ``` ### gulp copy * 不需要安裝任何模塊，因為本身gulp的文件流管道機制支持文件拷貝 * 使用場景：復制相關的文件結構到生產目錄，比如頁面文件。因為頁面文件中的都是相對目錄，所以當css以及js使用為產出地址時，要求頁面等必備的希望產品的也放到產出目錄。 * 使用 ``` javascript gulp.task("copyhtmldir",function(){ return gulp.src(['src/html/**/*']) .pipe(gulp.dest('dist/html')) }) ``` ### gulp-imagemin * 模塊地址：https://www.npmjs.com/package/gulp-imagemin * 安裝 ``` bash $ 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直到完全優化 * 使用 ``` javascript 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 * 安裝 ``` bash $ npm install gulp-autoprefixer --save-dev ``` * 使用場景：不熟悉廠商前綴的開發者可以在開發完成之后利用此模塊一次性追加前綴，可以靈活配置前綴需求的瀏覽器列表。 1. browsers：[] （定義使用的瀏覽器版本） 2. cascade ： true （定義對屬性進行對齊操作）,默認true 3. remove : true (去掉不必要的前綴) ，默認true * 使用 ``` javascript //直接對管道文件操作 .pipe(autoprefixer({ browsers:["last 5 versions"], cascade:true, remove:true})) ``` * 相關文檔地址：[gulp設置autoprefixer](http://www.ydcss.com/archives/94) ### gulp-load-plugins * 模塊地址：https://www.npmjs.com/package/gulp-load-plugins * 安裝 ``` bash $ npm install gulp-load-plugins --save-dev ``` * 使用場景：所有gulp集成的模塊插件如果前面有gulp- 開頭并且在package.json中有依賴注入，那么不需要重復聲明變量，可以直接用$.name使用，后面多單詞從第二個詞開始首字母需要大寫。 * 使用 ``` javascript var $ = require('gulp-load-plugins')(); $.rename //等效于下面的寫法 var rename=require('gulp-rename'); rename ```