一、gulp介紹
gulp是前端開發(fā)過程中對代碼進行構建的工具，是自動化項目的構建利器；它不僅能對網站資源進行優(yōu)化，而且在開發(fā)過程中很多重復的任務能夠使用正確的工具自動完成；使用它，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
二、工程化的作用
- 自動壓縮JS文件
- 自動壓縮CSS文件
- 自動合并文件
- 自動編譯sass
- 自動壓縮圖片
- 自動刷新瀏覽器
三、Node環(huán)境安裝
- window下，下載node安裝即可。 node下載地址：http://nodejs.cn/download/ ,安裝比較簡單，基本一直下一步即可，安裝路徑隨意。
- 安裝完成后，終端輸入如下命令 顯示版本號即安裝成功。
node -v
四、gulp安裝
(一) 推薦安裝cnpm：
因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現(xiàn)異常，如果npm的服務器在中國就好了，所以我們樂于分享的淘寶團隊干了這事。網址：http://npm.taobao.org
(二) 安裝：命令提示符執(zhí)行
npm install cnpm -g --registry=https://registry.npm.taobao.org
(三) 全局安裝gulp
- 在com中執(zhí)行
cnpm install gulp –g
- 查看是否正確安裝：命令提示符執(zhí)行
gulp –v，出現(xiàn)版本號即為正確安裝
五、gulp插件安裝（編譯/壓縮/合并/代碼檢查/即時刷新）
(一) 項目文件根目錄新建package.json
注：package.json是基于nodejs項目必不可少的配置文件，它是存在項目根目錄的普通json文件重點內容
進入你的項目文件
執(zhí)行命令
cnpm init來新建package.json檢測
package.json是否成功新建查看項目文件根目錄，是否新建package.json，且內容是否和你終端中輸入的一致。package.json內容如下：
{
"name": "test",
"version": "1.0.0",
"description": "我是描述",
"main": "index.js",
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
"author": "",
"license": "ISC"
}
注：可不使用cnpm init方式，可選擇手動創(chuàng)建package.json配置文件
- 在項目中新建配置文件
package.json配置文件是為了將來項目遷移使用，測試demo時，可以不需要
{
“name”:”test”, //項目名稱（必須）
“version”: “1.0.0”, //項目版本（必須）
“description”:”This is for study gulp project!”, //項目描述（必須）
“author”:{
//項目作者信息
“name”:”zzl”,
“email”:[Hsu@xx.com](mailto:Hsu@xx.com)
},
“devDependencies”:{
//項目依賴的插件，這個不用寫，待會裝完插件自動生成
“gulp”:”^3.8.11”,
“gulp-less”:”^3.0.0”
}
}
注：由于json文件里是不能寫注釋的，所以實際開發(fā)的時候，記得把注釋去掉
-
Package.json的作用 當有一個新的項目需要建立，或者有人跟你合作開發(fā)時，我們不需要把項目中所有用到的模塊（文件大小可能上百兆）都上傳到git,只需要給項目帶上一個配置文件 而對方拿到項目后，只需要一個命令npm install Node就可以自動讀取項目的配置文件，并將所有依賴模塊自動下載，這樣不是更快捷，更方便嗎？
(二) 本地安裝gulp插件
注：全局安裝gulp是為了執(zhí)行gulp任務，本地安裝gulp則是為了調用gulp插件的功能
(三) 進入你的項目文件路徑中后，執(zhí)行
cnpm install gulp --save-dev
(四) 安裝gulp-sass插件（拿該插件進行示例）進入你的項目文件路徑中后，執(zhí)行
cnpm install gulp-sass --save-dev
(五) 常用插件
sass的編譯（
gulp-sass）less編譯 （
gulp-less）重命名（
gulp-rename）自動添加css前綴（
gulp-autoprefixer）壓縮css（
gulp-minify-css）js代碼校驗（
gulp-jshint）合并js文件（
gulp-concat）壓縮js代碼（
gulp-uglify）壓縮圖片（
gulp-imagemin）自動刷新頁面（
gulp-livereload，谷歌瀏覽器親測，谷歌瀏覽器需安裝livereload插件）圖片緩存，只有圖片替換了才壓縮（
gulp-cache）更改提醒（
gulp-notify）
(六) 安裝以上插件
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
六、gulp使用
(一)創(chuàng)建一個gulpfile.js在根目錄下，gulp只有四個API：tast,watch,src和dest
Task：這個API用來創(chuàng)建任務，在命令下可以輸入gulp test來執(zhí)行test任務。Watch: 這個API用來監(jiān)聽任務。Src: 這個API設置需要處理的文件的路徑，可以是多個文件以數(shù)組的形式[main.scss，vender.scss],也可以是正則表達式/**/*.scss。
4.Dest: 這個API設置生成文件的路徑，一個任務可以有多個生成路徑，一個可以輸出未壓縮的版本，另一個可以輸出壓縮后的版本
(二) 載入插件
- 接下來，我們需要建立一個
gulpfile.js檔案，并且載入這些插件：
var gulp = require('gulp'),
sass = require('gulp- sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
七、 Gulp API
(一) 工作方式
gulp的使用流程一般是：
首先通過gulp.src()方法獲取到想要處理的文件流，
然后把文件流通過pipe方法導入到gulp的插件中，
最后把經過插件處理后的流再通過pipe方法導入到gulp.dest()中，gulp.dest()方法則把流中的內容寫入到文件中。
例如：
var gulp = require('gulp');
gulp.src('script/jquery.js') // 獲取流的api
.pipe(gulp.dest('dist/foo.js')); // 寫放文件的api
(二)globs的匹配規(guī)則
我們重點說說gulp用到的globs的匹配規(guī)則以及一些文件匹配技巧，我們將會在后面用到這些規(guī)則。 gulp內部使用了node-glob模塊來實現(xiàn)其文件匹配功能。我們可以使用下面這些特殊的字符來匹配我們想要的文件：
| 匹配符 | 說明 |
|---|---|
| * | 匹配文件路徑中的0個或多個字符，但不會匹配路徑分隔符，除非路徑分隔符出現(xiàn)在末尾 |
| ** | 匹配路徑中的0個或多個目錄及其子目錄,需要單獨出現(xiàn)，即它左右不能有其他東西了。如果出現(xiàn)在末尾，也能匹配文件。 |
| ? | 匹配文件路徑中的一個字符(不會匹配路徑分隔符) |
| [...] | 匹配方括號中出現(xiàn)的字符中的任意一個，當方括號中第一個字符為^或!時，則表示不匹配方括號中出現(xiàn)的其他字符中的任意一個，類似js正則表達式中的用法 |
| !(pattern|pattern|pattern) | 匹配任何與括號中給定的任一模式都不匹配的 |
| ?(pattern|pattern|pattern) | 匹配括號中給定的任一模式0次或1次，類似于js正則中的(pattern|pattern|pattern)? |
| +(pattern|pattern|pattern) | 匹配括號中給定的任一模式至少1次，類似于js正則中的(pattern|pattern|pattern)+ |
| *(pattern|pattern|pattern) | 匹配括號中給定的任一模式0次或多次，類似于js正則中的(pattern|pattern|pattern)* |
| @(pattern|pattern|pattern) | 匹配括號中給定的任一模式1次，類似于js正則中的(pattern|pattern|pattern) |
下面以例子來加深理解
| 匹配符 | 能匹配 | 不能匹配 |
|---|---|---|
| *.* | a.js, style.css, a.b, x.y | |
| */*/*.js | a/b/c.js,x/y/z.js, | a/b.js,a/b/c/d.js |
| ** | abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用來匹配所有的目錄和文件 | |
| **/*.js | foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js | |
| a/**/z | a/z, a/b/z ,a/b/c/z, a/d/g/h/j/k/z | |
| a/**b/z | a/b/z,a/sb/z, | a/x/sb/z, 因為只有單**單獨出現(xiàn)才能匹配多級目錄 |
| ?.js | a.js,b.js,c.js | |
| a?? | a.b,abc, | ab/,因為它不會匹配路徑分隔符 |
| [xyz].js | 只能匹配 x.js,y.js,z.js, | xy.js,xyz.js等, 整個中括號只代表一個字符 |
| [^xyz].js | a.js,b.js,c.js等, | x.js,y.js,z.js |
(三) src：獲取流(源文件路徑)
gulp.src()方法正是用來獲取流的，但要注意這個流里的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲著原始文件的路徑、文件名、內容等信息。其語法為：gulp.src(globs[, options]);
globs參數(shù)是文件匹配模式(類似正則表達式)，用來匹配文件路徑(包括文件名)，當然這里也可以直接指定某個具體的文件路徑。當有多個匹配模式時，該參數(shù)可以為一個數(shù)組;類型為String或 Array。當有多種匹配模式時可以使用數(shù)組
//使用數(shù)組的方式來匹配多種文件
gulp.src(['js/\*.js', 'css/*.css', '\*.html'])
(四) dest：寫文件（目標文件路徑）
gulp.dest()方法是用來寫文件的，其語法為：
gulp.dest(path[,options])
path為寫入文件的路徑；
(五) watch：監(jiān)聽文件
gulp.watch()用來監(jiān)視文件的變化，當文件發(fā)生變化后，我們可以利用它來執(zhí)行相應的任務，例如文件壓縮等。其語法為
gulp.watch(glob[, opts], tasks);
如：
gulp.task(“one”,function(){
});
gulp.task(“two”,function(){
});
gulp.watch('js/\*\*/*.js', [“one”,”two”]);
(六) task：定義任務
gulp.task方法用來定義任務，其語法為：
gulp.task(name[, deps], fn)
name為任務名；
deps 是當前定義的任務需要依賴的其他任務，為一個數(shù)組。當前定義的任務會在所有依賴的任務執(zhí)行完畢后才開始執(zhí)行。如果沒有依賴，則可省略這個參數(shù)；
fn 為任務函數(shù)，我們把任務要執(zhí)行的代碼都寫在里面。該參數(shù)也是可選的。
當你定義一個簡單的任務時，需要傳入任務名字和執(zhí)行函數(shù)兩個屬性。
如：
gulp.task('greet', function () {
console.log('Hello world!');
});
八、 結合sass的使用
(一) 建立任務
- 編譯
sass,Autoprefix及縮小化 - 首先，我們
設置編譯Sass。我們將編譯Sass、接著通過Autoprefixer，最后儲存結果到我們的目的地。接著產生一個縮小化的.min版本、自動重新整理頁面及通知任務已經完成：
gulp.task('styles', function() {
//編譯sass
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
//添加前綴
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//保存未壓縮文件到我們指定的目錄下面
.pipe(gulp.dest('dist/assets/css'))
//給文件添加.min后綴
.pipe(rename({suffix: '.min'}))
//壓縮樣式文件
.pipe(minifycss())
//輸出壓縮文件到指定目錄
.pipe(gulp.dest('dist/assets/css'))
//提醒任務完成
.pipe(notify({ message: 'Styles task complete' }));
});
- 說明：
gulp.task('styles', function() { ... )};
這個gulp.taskAPI用來建立任務。可以透過終端機輸入$ gulp styles指令來執(zhí)行上述任務。 -
return gulp.src('src/styles/main.scss')用來定義一個或多個來源檔案。 -
.pipe(sass({ style: 'expanded' }))使用pipe()來找到哪個插件 -
.pipe(gulp.dest('dist/assets/css'));這個是用來設定目的路徑。
(二) JS代碼校驗、合并和壓縮
//發(fā)布任務
gulp.task(“scripts”,function(){
//js代碼校驗
return gulp.src(“javascripts/*.js”)
.pipe(jshint())
.pipe(jshint.reporter(“default”))
//js代碼合并
.pipe(concat(“all.js”))
//給文件添加.min后綴
.pipe(rename({suffix:”.min”}))
//壓縮腳本文件
.pipe(uglify())
//輸出壓縮文件到指定目錄
.pipe(gulp.dest(“assets”))
//提醒任務完成
.pipe(notify({message : “Scripts task complete”}));
});
(三) 圖片壓縮
Gulp.task(“images”,function(){
return gulp.src(“images/*”)
.pipe(cache(imagemin({optimizationLeve1: 3,progressive:true, interlaced:true})))
.pipe(gulp.dest(“images”))
.pipe(notify({message : “Images task complete”}));
});
(四) 事件監(jiān)聽
Gulp.task(“watch”,function(){
gulp.watch(“stylesheets/\*.scss”,[‘styles’]);
gulp.watch(“javascripts/\*.js”,[“scripts”]);
gulp.watch(“images/\*”,[‘images’]);
livereload.listen();
gulp.watch([“assets/\*”]).on(“change”,livereload.changed);
});
(五) 運行
Gulp defaultGulp watch- 運行整個任務
gulp
(六) 總結
- 安裝node
- 安裝gulp（全局gulp,本地gulp及所需插件）
- 新建gulpfile.js文件
3.1 引入模塊
3.2 創(chuàng)建任務 - 運行 gulp 任務名
- 我們自己設置的項目文件路徑
5.1 如：
assets: 壓縮后樣式和腳本存放的目錄
images: 圖片存放目錄
javascripts: 腳本存放目錄
stylesheets: 樣式存放目錄
plugin: 插件存放目錄
gulpfile.js
