[TOC] ### 前言 本文將繼續前面的gulp系列插件，介紹一些其他你可能用到插件， * 以下模塊地址均為官網地址，如果覺得請求地址慢，可以訪問淘寶鏡像的包說明地址，http://npm.taobao.org/ * 以下模塊介紹順序不分先后，代碼僅供參考，親測可用。 * 所有的模塊使用都需要require引入，如果下面代碼有遺漏請自覺加入。 ### gulp-rev，gulp-rev-format，gulp-rev-replace * 模塊地址：https://npm.taobao.org/package/gulp-rev * 安裝 ``` bash $ npm install gulp-rev --save-dev ``` * 使用場景：對文件添加md5簽名，對可以搭配使用，對匹配的所有的相關引用文件都追加md5簽名 ~~~javascript var rev = require('gulp-rev'), revFormat = require('gulp-rev-format'), revReplace = require('gulp-rev-replace'); gulp.task('rev',function(){ gulp.src('src/*.css') .pipe(rev()) .pipe(revFormat({//文件重命名 suffix: '.min', lastExt: false })) .pipe(gulp.dest('dist/css'))//指定文件檢出的位置 .pipe(rev.manifest() ) .pipe(gulp.dest('dist/'));//指定rev-mainfest.json生成的位置 }) // 批量替換頁面中引入的鏈接 gulp.task('rev-replace',['rev'],function(){ var manifest=gulp.src(['dist/*.json']); function modifyUnreved(filename){ return filename; } function modifyReved(filename){ console.log(filename); if(filename.indexOf('.min')>-1){ const _md5= filename.match(/\-[\w]*\.min/)[0].replace(/(\-|.min)*/g,''); const _filename= filename.replace(/\-[\w]*/,''); filename =_filename + "?major=" + _md5; return filename; } return filename; } //參數說明：manifest,參考的文件替換原則modifyUnreved,沒有轉化前的名字，modifyReved//轉化后的名字 gulp.src(['src/*.html'])//需要替換的頁面 .pipe(revReplace({ manifest: manifest, modifyUnreved: modifyUnreved, modifyReved: modifyReved })) .pipe(gulp.dest('dist')); }) ~~~ ### gulp.spritesmith * 模塊地址：https://npm.taobao.org/package/gulp.spritesmith * 安裝 ``` bash $ npm install gulp.spritesmith --save-dev ``` * 使用場景：開發完成之后利用任務將若干的小圖自動拼接形成雪碧圖，供開發使用,方便簡單，可以支持css\less\sass\stylus等多種格式 ~~~javascript var spritesmith = require('gulp.spritesmith'); gulp.task('sprite', function () { gulp.src('src/images/sprite1/*.*') .pipe(spritesmith({ imgName: 'sprite1.png', cssName: 'sprite1.css', padding: 10 })).pipe(gulp.dest('src/images/sprites')) }) ~~~ ### browser sync * 模塊地址：https://npm.taobao.org/package/browser-sync * 可參考的模塊完整配置：[browerSync](http://www.hmoore.net/csnikey/fepro-guide/390364) * 安裝 ``` bash $ npm install browser-sync --save-dev ``` * 使用場景：開發階段保證開發與調試實時同步，可以實現同一地址多端同步顯示 ~~~ var browserSync = require('browser-sync').create(); var reload=browserSync.reload(); gulp.task('server',function(){ browserSync.init({ server: { baseDir: './', }, index:'./src/demo.html', reloadDelay: 1000, files:'./src', port: 8090 }); gulp.watch('./src/**/*', reload); }) ~~~ * 常用配置 1.如果你不想每次啟動都打開新頁面，可以配置open：false，默認是true 自動每次打開瀏覽器窗口按照本地地址訪問 2.配置指定的瀏覽器，如果你默認的瀏覽器不是你的開發瀏覽器，那么可以指定下browser：['google chrome','firefox'] 3.proxy,配置使用代理機完成訪問調試