Gulp在前端的常用操作实例
以前在做代碼優化的時候，一般都用一些網上的在線工具來完成，寫LESS的時候，一般用Koala來編譯，感覺用起來也挺不錯的。但是現在構建工具的出現，讓以前做的那些繁瑣操作變的更方便一些了，我在這里也用構建工具來完成一下我以前一些前端的工作。這里我選用了Gulp來使用。
實例概要
- 代碼壓縮
- CSS自動加前綴
- LESS編譯
- 地址版本追加
- 文件合并
- 文件修改自動刷新頁面
Gulp一些入門知識
這里還是說一下Gulp的一些入門的必備知識，方便看后文的理解。
Gulp是一款自動構建工具，需要在Node.js的環境下運行，常用的API方法并不多，很快就能熟記，用到的大部分功能都是依靠插件來完成的。
Gulp的插件需要用npm來進行安裝：
npm install <name> [-g] [--save-dev]- -g全局安裝，通常只在項目下安裝即可，所以不用加這個參數
- --save-dev用于將依賴包保存到項目下的package.json文件中，-dev用來區分開發模式和生產模式下用到的模塊。指定則保存到package.json的devDependencies節點，不指定-dev將保存至dependencies節點。
使用Gulp需要先在項目下安裝Gulp模塊。
初始化項目環境
npm init進入項目，安裝gulp
npm install gulp --save-dev創建gulp配置文件gulpfile.js
Gulp 官網
實例一：編譯LESS
用到插件：gulp-less
安裝命令：install gulp-less --save-dev
Github: https: //github.com/plus3network/gulp-less
gulpfile.js代碼：
//引入必要文件 var gulp = require('gulp'),less = require('gulp-less');//創建任務 gulp.task('testLess', function(){gulp.src('src/less/*.less') //所有src/less下的less文件.pipe(less()) //執行less編譯.pipe(gulp.dest('src/css')) //將編譯后的文件寫到目的目錄下 });現在在src/less下創建less文件，并編碼，然后在CLI下執行：
gulp testLess即可在src/css下看到已經編譯完成的css文件。
實例二：在LESS中加入自動前綴
方法一：gulp-autoprefixer
安裝命令：install gulp-autoprefixer --save-dev
Github: https: //github.com/sindresorhus/gulp-autoprefixer
gulpfile.js代碼：
var gulp = require('gulp'),less = require('gulp-less'),autoprefixer = require('gulp-autoprefixer');gulp.task('testLess', function(){gulp.src('src/less/*.less').pipe(less()).pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0']})) //自動加入前綴.pipe(gulp.dest('src/css')) });在CLI下執行：
gulp testLess編譯的文件中已經自動加入了前綴，這對編寫CSS能夠提高很大的效率。
方法二：less-plugin-autoprefix
這里用的是less的插件。
安裝命令：install less-plugin-autoprefix --save-dev
Github: https: //github.com/less/less-plugin-autoprefix
gulpfile.js代碼：
var gulp = require('gulp'),less = require('gulp-less'),LessAutoprefix = require('less-plugin-autoprefix');gulp.task('testLess', function(){gulp.src('src/less/*.less').pipe(less({plugins: [new LessAutoprefix({ browsers: ['last 2 versions'] })]})).pipe(gulp.dest('src/css')) });自動前綴需要自行設置一些編譯參數，詳細了解可以看官方GitHub，兩種方法的配置基本一樣。
這個插件可單獨應用到為css加前綴。
實例三：在LESS中加入代碼壓縮
安裝命令：install gulp-minify-css --save-dev
Github: https: //github.com/less/less-plugin-autoprefix
這個插件實際上是用的clean-csshttps: //github.com/jakubpawlowicz/clean-css。
gulpfile.js代碼：
var gulp = require('gulp'),less = require('gulp-less'),autoprefixer = require('gulp-autoprefixer'),minifycss = require('gulp-minify-css');gulp.task('testLess', [], function(){gulp.src('src/less/*.less').pipe(less()).pipe(autoprefixer({browsers: ['last 2 versions', 'Android >= 4.0']})).pipe(gulp.dest('src/css')).pipe(minifycss()); //壓縮 });實例四：為鏈接文件追加版本號
安裝命令：install gulp-rev-append --save-dev
Github: https: //github.com/bustardcelly/gulp-rev-append
為在網頁中鏈接的資源文件路徑追加版本號，可以用于防止緩存文件。
版本號是依據文件內容進行MD5后的結果，所以只為文件內容變動，版本號就變動。
工作方式：(?:href|src)="(.*)[\?]rev=(.*)[\"]
var gulp = require('gulp'), rev = require('gulp-rev-append');gulp.task('testRev', function(){gulp.src('src/index.html').pipe(rev()).pipe(gulp.dest('src/rev')); });要執行這個功能，需要在鏈接資源地址后加入?rev=@@hash
<!-- inde.html--> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/index.css?rev=@@hash"></script> </head> <body><img src="a.jpg?rev=@@hash"> </body> </html> <!-- 編譯后的文件 --> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/index.css?rev=2e151da214ef1a3563abdc2cb8c23d7f"> </head> <body><img src="a.jpg?rev=d41d8cd98f00b204e9800998ecf8427e"> </body> </html>需要注意的是，如果鏈接的資源并不存在，那么是無法追加版本號的。
實例五：文件合并
安裝命令：install gulp-concat --save-dev
Github: https: //github.com/wearefractal/gulp-concat
為了生產模式下，為了減少網絡請求，通常將同類文件進行合并，例如合并JS、CSS。
合并JS：
var gulp = require('gulp'),concat = require('gulp-concat');gulp.task('concatJs', function(){//gulp.src('src/js/*.js')//這種方式合并文件的先后順序不能控制gulp.src(['src/js/js1.js','src/js/js2.js']) //按順序將文件寫入數組，做為參數.pipe(concat('all.js')) //合并后生成的文件.pipe(gulp.dest('src/css')) });合并CSS：
var gulp = require('gulp'),concat = require('gulp-concat');gulp.task('concatCss', function(){//gulp.src('src/css/*.css')gulp.src(['src/css/css1.css','src/css/css2.css']).pipe(concat('all.css')) .pipe(gulp.dest('src/css')) });實例六：文件改變 自動刷新瀏覽器
安裝命令：install gulp-connect --save-dev
Github: https: //github.com/AveVlad/gulp-connect/
當我們在做頁面編碼時，為了實時查看代碼效果，需要不斷的刷新瀏覽器，十分繁瑣。那有沒有什么工具可以監控文件，只要文件發生變化就及時自動刷新瀏覽器的？ 當然有了，這下我們就可以釋放F5了。
var gulp = require('gulp'),connect = require('gulp-connect');//創建服務任務 gulp.task('connect', function(){connect.server({//這里有配置端口和主機的選項，我這里就按默認的來了livereload: true //即時刷新}); });gulp.task('css', function(){gulp.src('src/css/*.css').pipe(connect.reload()); //重新加載 });//css文件監測 gulp.task('fileWatch', function(){gulp.watch('src/**/*.css', ['css']); });//默認任務啟動 gulp.task('default', [ 'connect','fileWatch']); //先打開連接，再監測文件這里直接運行gulp即可，因為沒有配置端口，所以根據CLI中的提示，在瀏覽器中打開地址即可。此命令不直接打開瀏覽器。
當在修改CSS文件并保存后，瀏覽器就會自動刷新了。
LiveReload是一個WebSockets協議：
結語
好了，在Gulp中常用的前端操作基本都寫了，大家可以根據自己的需求去定制。想進行更詳細的配置，可以參考每個插件中的GitHub地址。
博客名稱：王樂平 技術博客
CSDN博客地址：http://blog.csdn.net/lecepin
總結
以上是生活随笔為你收集整理的Gulp在前端的常用操作实例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux-No.04 Linux 设置
- 下一篇： 前端字符串内HTML标签无效的处理方式