gulp快速上手（不想看官方文檔的同窗朝這邊看）

前言

這幾天和一個團隊作項目用到gulp,這裏寫點本身的見解。
首先，來看這篇教程的確定是聽過gulp的，那麼必定也瞭解過nodejs，知道前端自動化工具，但是平時用sublime寫代碼用的好好的，沒以爲須要什麼工具來加快開發流程。那麼第一個問題必定是「咱們爲何用gulp？」

咱們爲何用gulp？

首先先問本身一個問題：平時用sass/less寫css，用jade寫/html代碼，那麼這些文件的的測試、檢查、合併、壓縮、格式化、部署，監聽。應該怎麼完成呢？就來壓縮合並來說，能夠減小多個css，js文件請求，優化網頁性能，這樣的工做是否應該有一個很好的解決方案呢？---答案就是gulp
gulp與grunt誰好誰壞的爭論一直存在，你們能夠自行搜索，這裏我想說，適合本身的就是最好的，我是前端菜鳥，因此一上手接觸的就是gulp。

安裝gulp

學習一門技術，最好的途徑就是看官方文檔。這裏我貼出地址
gulp官方網址 gulp插件地址 gulp 官方API gulp中文API
1.經過npm包安裝（前提是已經安裝了nodejs環境 和 npm）

npm install gulp -g

這裏稍微介紹一下命令的含義：由於npm安裝插件的命令行格式爲

npm install <name> [-g] [--save-dev]

其中 ：node插件名稱
-g：全局安裝。將會安裝在全局路徑下，而且寫入系統環境變量，最直觀的感受就是能夠能夠經過命令行在任何地方調用它；全局路徑 輸入npm config get prefix能夠看到路徑，個人ubuntu系統顯示/usr/local/lib/node_modules/
非全局安裝：將會安裝在當前定位目錄； 本地安裝將安裝在定位目錄的node_modules文件夾下，經過require()調用；
--save：將保存配置信息至package.json（package.json是nodejs項目配置文件）；由於node插件太多，不用一個package文件保存插件信息，以後維護和升級會比較麻煩
-dev：保存至package.json的devDependencies節點，不指定-dev將保存至dependencies節點；

在全局安裝完gulp後，運行gulp -v 能夠查看gulp版本號

第一個gulp項目

1.先新建一個項目目錄：mkdir gulp-file
2.進入這個目錄： cd gulp-file
3.再次在本地安裝gulp：npm install gulp --save
這樣作的目的是爲了讓gulp開發升級更加靈活，具體的我也不太懂，stackoverflow上面有人問過這個問題「爲何我要在全局和本地安裝兩次個人gulp」
4.新建package.json配置文件：npm init
5.會出來一個命令行對話輸入

依次填寫便可獲得你的package.json文件，ls一下能夠查看。
6.接下來假設gulp-flie 項目開發中還有css，js等文件，咱們能夠經過配置gulpfile.js文件來進行管理

gulpfile.js配置

7.在根目錄下建立配置文件：touch gulpfile.js
8.打開編輯:gedit gulpfile.js
9. gulpfile.js文件內容以下：

var gulp =require("gulp");//建立 gulp模塊
var uglify=require("gulp-uglify");//建立js混淆壓縮 模塊
var minify_css =require("gulp-minify-css");　//建立 css混淆壓縮模塊
var gulp_concat = require('gulp-concat');  //建立 文件合併模塊

以上這5個都是node_modules/裏的插件模塊。‘
由於以前沒有安裝過這些插件，因此得用npm安裝

10.安裝相應的模塊：npm install gulp-uglify gulp-minify-css gulp-concat gulp-rename --save
11.安裝完成以後，能夠打開package.json文件，看到相關插件的一些版本信息
12.插件的做用是爲了讓咱們前端開發更加流暢和規範化。
13.這個時候，打開官方文檔，發現官網說gulp有4個屬性，即src，dest，watch，dask。

**官方API**

        gulp.task(name[, deps], fn)
        gulp.src(globs[, options])
        gulp.dest(path[, options])
        gulp.watch(glob [, opts], tagulpsks)

看不懂不要緊，咱們先快速上手着幾個api再一個個分析接着在gulpfile.js中寫入下列幾行代碼

gulp.task('min-css',function(){  //1
        gulp.src('./src/css/*.css')  //2
        .pipe(gulp_concat("index.min.css"))//3 
        .pipe(minify_css())//4.混淆即壓縮
        .pipe(gulp.dest('./dist/css'));//5.輸出路徑
    });

//1. gulp.task('min-css',function(){ }

這個API用來建立任務，在命令行下能夠輸入$ gulp min-css來執行上面的任務。gulp.task(name[, deps], fn)，
第一個參數name是自定義你的任務名稱，
第二個參數[deps]是一個數組，裏面是你定義的其餘任務的名稱，這些任務會在本次定義的任務以前執行並完成。
第三個參數fn是本次任務的回調函數。
舉個栗子：

gulp.task('task1',function(){
    console.log("task1 done");
});
gulp.task('task2',function(){
    console.log("task2 done");
});
gulp.task('task3',function(){
    console.log("task3 done");
});
gulp.task('build',['task1','task2','task3'],function(){
    console.log("build done");
});

下圖是執行build任務的結果，用gulp build

如今應該很清除這3個參數的做用了吧

//pipe（），管道函數，及

//2.gulp.src('./src/css/*.css')

這個API得到要處理的文件源路徑 官方API gulp.src(globs[, options])

globs是一個匹配模式，如gulpfile.js中寫的 gulp.src('./src/css/*.css')
'./src/css/*.css'匹配同層路徑下src目錄下的css目錄下的全部以.css結尾的文件
更多的匹配模式能夠參考官方文檔。
globs類型：String 或者 Array。string則說明它匹配單一模式。array表示它能夠傳入數組多個匹配字段，如['./src/css/index.css','./src/css/pomelo.css']
[options]是可選的。主要是兩個，options.base----匹配的根目錄，options-read
舉個栗子：哈哈，這個得等學會gulp.dest() 這個API後才能具體說明。

//3 .pipe(gulp_concat("index.min.css"))

pipe（）方法是正如字面意思理解的那樣，把一個文件流輸入，經過pipe管道輸出，

下一個處理程序能夠把上一級輸出的流文件當作輸入

這樣能夠實現文件流的高效處理,我認爲這種方法很像jquery的寫法。可以進行鏈式調用處理。
那麼毫無疑問，第三段的代碼.pipe(gulp_concat("index.min.css"))//3 的意思就是把獲取到匹配gulp.src()字段的文件經過pipe管道進入插件gulp_concat()的處理程序，而且合併後的文件名爲index.min.css
這裏插件gulp_concat是文件合併的插件，詳細的使用方法請在gitbub或者npm網站中找到相關的api文檔。

//4 .pipe(minify_css())//混淆壓縮js插件

方法和第三步是同樣的

//5 .pipe(gulp.dest('./dist/css'));

官方API gulp.dest(path[, options])

第一個參數 path：String 或者 Function
string類型--------輸出文件的目標路徑（或目錄）'./dist/css'
function--------將接收一個 vinyl 文件實例 做爲參數（具體請看分析「Gulp思惟——Gulp高級技巧」）
第二個參數options有兩個屬性options.cwd 和 options.mode
options.cwd 用於計算輸出目錄的，只有提供的輸出目錄是相對路徑時此參數纔有用。
options.mode 用於建立的輸出目錄指定權限。默認值爲077

前面提到過。想使用gulp.src的一些屬性參數得先學會gulp.dest().這是由於源的參數設定（即輸入端）會影響輸出端的。

gulp.dest()的做用是將 目的地址（gulp.dest()）的基礎路徑（base）替換成 源地址(gulp.src())的基礎路徑（base）輸出

那麼什麼是基礎路徑base呢？
gulp.src('./src/css/*.css')中有第二個參數base，能夠指定基礎路徑，若是不設置，則默認基礎路徑爲 * 以前的路徑。

base：'./src/css'

若是設置了 gulp.src('./src/css/*.css',{base：'./'})
則base------'./'
gulp.dest('./dist/css')傳入的參數就是base路徑

base:'./dist/css'

舉個栗子來解釋什麼是替換

gulp.src('./src/css/*.css').pipe().pipe(gulp.dest('./dist/css'))；

那麼最後文件處理完成的最終路徑是

./dist/css/*.css

若是是

gulp.src('./src/css/*.css',{base：'./'}).pipe().pipe(gulp.dest('./dist/css'))；

那麼最後文件處理完成的最終路徑是

./dist/css/src/css/*.css

綜上所述：

快速入門gulp就算結束了。咱們已經學會如何裝gulp，如何安裝gulp插件，如何寫package.json文件。如何寫gulpfile.js配置文件
瞭解了gulp的3大APIgulp.src();gulp.task();gulp.dest()
實現的功能：完成了對多個css文件的合併與壓縮而且輸入到目標文件夾下

最後再次獻上gulp官方網站，想學習更多就得本身修煉了。 ^0^