gulp入門

前幾天在尋找壓縮js文件的工具，開始接觸到gulp這款出色的前端代碼部署工具，看了官方文檔和一些資料，學會了怎麼使用gulp進行壓縮，特意寫個簡單的入門操做指南，加深本身的印象。
gulp可以實現不少功能，在這裏我就以本身使用的壓縮js文件爲例子進行介紹

1.安裝nmp
NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題,全部能夠直接安裝nodejs，就能一塊兒安裝好npm了。下面附上下載地址：
nodejs官網

安裝好，打開window命令行，輸入node -v 和 npm -v查看版本號確認是否成功安裝,能看到版本號就證實安裝成功了：

2.全局安裝gulp

npm install gulp -g

//全局安裝gulp，-g表明全局的意思，安裝好一樣用gulp -v確認是否成功安裝

3.項目本地安裝gulp
爲何全局安裝過了gulp，還要在項目中再安裝一遍呢，這是由於全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能，否則是沒法調用插件功能的，下面的例子截圖中能夠看到效果。

首先進入到本地項目的根目錄，再進行gulp的安裝，切記！！必定要先進入項目根目錄中（我例子中的根目錄是e:/xampp/htdocs/project/test）

npm install gulp --save-dev

--save：將保存配置信息至package.json（package.json是nodejs項目配置文件）

-dev：保存至package.json的devDependencies節點.

4.新建package.json文件（在項目文件根目錄新建）
package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件。

新建的過程必須填入項目的name和版本號version,其餘的根據須要填寫，寫好以後輸出y，建立完成，能夠看到本地目錄中多了一個package.json文件，這就是咱們剛剛建好的文件。

5.安裝須要的gulp插件
gulp有不少插件，項目中須要哪些都須要安裝，本例以壓縮js文件爲例，因此天然要安裝uglify插件

npm install gulp-uglify --save-dev

能夠看到左側的文件夾中會新增一個 node_modules 文件夾，這裏面存放着 npm 安裝的模塊，其中就有咱們剛剛安裝的uglify模塊。

6.新建gulpfile.js文件

var gulp=require("gulp"); //導入gulp包

var uglify=require("gulp-uglify");//導入uglify插件包

gulp.task("script",function(){ //gulp添加一個任務，第一個參數爲任務名稱，第二個參數是任務的執行函數
    gulp.src("someFunction.js") //執行任務須要的文件
        .pipe(uglify()) //對該文件進行壓縮
        .pipe(gulp.dest("gulp/js")) //壓縮完成的新文件地址
});

7.運行gulp命令

文件建好以後，在CMD執行gulpfile.js中新建的任務（本例子中爲"script"）便可，命令執行完畢後，會在相應位置生成新的壓縮文件。

8.補充

到上面7步已經完成壓縮js的任務了，可是隻要js代碼一有變化，又要從新執行gulp命令從新壓縮，這樣不太方便，因此在這裏補充兩個經常使用的操做：

8.1 監測代碼修改並自動執行任務
gulp.watch(src, tasks) ： //src:監聽的文件名 tasks：文件發生變更後執行的命令

該指令用來檢測指定目錄下文件的修改後執行任務。可是運行 gulp.watch() ，須要將gulp.watch() 包含在一個任務中。因此二者結合起來就有了下面代碼來自動監聽代碼改變並運行壓縮.

gulp.task("auto",function(){
    gulp.watch("someFunction.js",["script"]); //監聽文件的修改,一旦修改就執行script命令
})

接在在命令行輸入 gulp auto ，自動監聽 someFunction.js 文件的修改，並調用上面定義的script命令壓縮js。

8.2 定義默認任務
gulp.task('default', [command],fn) //定義默認任務

其實原理是基於gulp.task(name[, deps], fn)命令的第二個參數，必須先完成第二個參數定義的任務 ：

因此咱們上面的操做能夠這麼寫：

gulp.task("default",["scipt","auto"]);



在CMD運行 gulp -default 命令獲得的結果以下：

總結：
使用gulp對前端的開發確實會帶來很大的幫助，經過以上幾步就能完成壓縮代碼的任務，其餘的功能插件還有不少，好比經常使用的sass的編譯（gulp-sass）、less編譯 （gulp-less）、重命名（gulp-rename）、壓縮css（gulp-clean-css）、自動添加css前綴（gulp-autoprefixer）、壓縮圖片（gulp-imagemin）、合併js文件（gulp-concat）等。再進一步的學習要多看官方文檔和API了。在文章的末尾附上這些參考地址

官方API
中文API
插件地址