一句話(huà)先
gulp 是一個(gè)可以簡(jiǎn)單和自動(dòng)化"管理"前端文件的構建工具先說(shuō)我以前的主要工作，我主要是做游戲服務(wù)端的，用c++/python，所以我對東西的概念理解難免要套到自己做過(guò)的技術(shù)上，所以有時(shí)候有些技術(shù)說(shuō)法對不上，還請看到這篇文章的人指正指正。
[toc]
簡(jiǎn)單的說(shuō)
gulp 的作用就是幫你處理前端文件， 什么 js 什么 html 什么css 還有json等等前端文件。
麻溜的！自動(dòng)的！把本該由你合并，壓縮，重命名，檢查，編譯等等一系列操勞的動(dòng)作，一個(gè)命令，一條龍的做齊咯！
顯著(zhù)的優(yōu)點(diǎn)
要在項目里面使用 gulp 需要安裝兩次, 先全局安裝在本機上， 再安裝在項目里面
不想看我嘮叨，想直接安裝的 直接看 總結。
安裝 node&npm。教程很多， 我給一個(gè)還不錯的
Node.js 安裝配置
node --version
npm -v
如果有版本號顯出來(lái)就是安裝成功了
npm下
先在機器上全局安裝npm install -g gulp
-g 是指全局安裝
通過(guò)查詢(xún)版本看看安裝是不是成功， 如果出現了版本號，那就是成功了
gulp 畢竟是個(gè) node 項目， 所以你的項目中 node 祖傳的 package.json還是應有的。
我知道也有和一樣的node&前端新手， 所以就把 package.json 放上來(lái)咯。
package.json長(cháng)的啥樣呢 ，就是下面這個(gè)樣子
{ "name": "neptune", "version": "1.0.0", "description": "nothing", "main": "index.js", "scripts": { "test": "test" }, "author": "neptune", "license": "ISC", "devDependencies": { "gulp": "^3.9.1", "gulp-less": "^3.3.0" }}不要手動(dòng)去填，node 祖傳的神功大法， 我們這是個(gè)自動(dòng)化工具
部署 node 就一發(fā)npm init
自動(dòng)幫你寫(xiě) package.json的
然后，項目里面安裝 gulpnpm install gulp -save-dev
安裝完了 看看，你的項目package.json 多了
"devDependencies": { "gulp": "^3.9.1", "gulp-less": "^3.3.0" }我的項目里面還有一個(gè) gulp-less 插件， 也是安裝成功了就自然跑進(jìn)我的 依賴(lài)里面了。
有的小伙伴就看到自己的工程里面多了個(gè) node_modules，對，那就是工程中安裝 gulp 后生成的， 你裝了插件，也會(huì )在這里面。比如我安裝的這個(gè) gulp-less 插件.
gulp目錄下多了 package.json, 這個(gè)是 gulp 自己的. 上面我們 mpn init 是在自己的工程目錄里面執行的。 生成的 package.json 也是我們工程自己的, 就是用了 node,所以都上了node 的賊船的意思. 每個(gè)工程都是有自己的 package.json的 。 你安裝一個(gè) gulp-less ，看看里面也是有一個(gè) package.json的
在項目里面創(chuàng )建一個(gè)名為 gulpfile.js的文件
這個(gè)文件在我看來(lái)， 意義就和在c++項目里創(chuàng )建了一個(gè) main.cpp 或者 python中main.py ,前端中 index.html一樣。
而里面的task就相當于一個(gè)個(gè)準備好被調用的函數， default就相當于main函數一樣， 是系統默認的入口函數
簡(jiǎn)單來(lái)說(shuō)， 你在項目安裝 gulp 就需要做四個(gè)事情
1 安裝 node&npm
Node.js 安裝配置
2 全局安裝 gulpnpm install -g gulp
3 工程初始化 and 安轉 工程gulpnpm initnpm install gulp -save-dev
4 在你工程里面創(chuàng )建一個(gè) 名為 gulpfile.js 的文件, 開(kāi)始寫(xiě)你的 gulp 自動(dòng)化流程
按照程序員的規定，上一門(mén)新的語(yǔ)言技術(shù)，先要來(lái)發(fā) hello world
var gulp = require('gulp');gulp.task('default',function(){ console.log('hello world');});
var gulp = require('gulp');
這句很簡(jiǎn)單易懂，就是導入 XX 包。
類(lèi)似于
c/c++ 上的 #include "xxx"
python 上的 import xx
xx 語(yǔ)言上的 xx 程序員都懂的
gulp.task 就相當于定義函數的關(guān)鍵字
default 就相當與 別的程序里面的 main 函數
function(){ console.log('hello world');就是一個(gè)匿名函數。是個(gè)被用爛的概念，就是一個(gè)觸發(fā)回調，程序員都懂
我們很容易就明白了。這個(gè)其實(shí)就是在 js 這個(gè)爸爸語(yǔ)言下實(shí)現的子語(yǔ)言。
我們在腦袋里面構想一下。
程序運行起來(lái)，gulp把一大推task，放在一個(gè) blueprint 上面。
系統在 blueprint 上找到入口函數，也就是 default 函數(就相當于 main 函數)
然后 gulp 的小火車(chē)就跑起來(lái)了。
為了明白怎么寫(xiě) gulp ，我們要循序漸進(jìn)的來(lái)添加功能，我對上面的 helloworld 逐步的添加功能
var gulp = require('gulp');gulp.task('_task_one', function () { console.log('HI, I am task one');});gulp.task('default',['_task_one'],function(){ console.log('hello world');});上面看到我們的 default的 task 多了一個(gè)參數，
這個(gè)參數我們可以稱(chēng)呼為依賴(lài)函數。
什么意思呢，就是，我們要執行 default 函數前，先的把依賴(lài)函數執行咯，我們這個(gè)函數依賴(lài)的是_task_one函數,所以我們在工程下 輸入 gulp命令， 執行起來(lái)會(huì )得到。
[21:22:34] Using gulpfile ~/WebstormProjects/untitled/gulpfile.js[21:22:34] Starting '_task_one'...HI, I am task one[21:22:34] Finished '_task_one' after 129 μs[21:22:34] Starting 'default'...hello world[21:22:34] Finished 'default' after 57 μs程序就是先執行完 _task_one 再跑的hello world 的。好了有基礎概念了， 我們就開(kāi)始干活把。 復雜的不能做，那就簡(jiǎn)單的。 要循序漸進(jìn)??！
我們合并點(diǎn)文件把。畢竟這對前端來(lái)說(shuō)，是再正常不過(guò)的了，有時(shí)候為了減少請求次數，減少這些不必要網(wǎng)絡(luò )損耗，我們把這些零零碎碎的東西擠在一起。一次請求一個(gè)合并的 js 資源，相當于以前的幾個(gè) js 資源
上面我有個(gè) less 的插件，他的安裝和我們安裝 gulp 一樣簡(jiǎn)單
比如 less 就是npm install gulp-less
那么我們的合并插件也是npm install --save-dev gulp-concat
非常簡(jiǎn)單。
我們去我們的 package.json里面看看，可以看到依賴(lài)項多了我們安裝的"gulp-concat": "^2.6.1",
"devDependencies": { "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-less": "^3.3.0" }我們用合并插件寫(xiě)一個(gè)處理
var gulp = require('gulp'), concat = require('gulp-concat'); // 導入我們的合并插件gulp.task('default',function(){ gulp.src('testjs/*.js'). // 要處理的一堆 js 文件 pipe(concat('all.js')). // 用合并插件處理 pipe(gulp.dest('dist/')); // 把處理后的東西放進(jìn)目標目錄里面});我的 testjs 目錄下有個(gè) test1.js 還有一個(gè) test2.js
好現在執行我們的 gulp 命令
生成了一個(gè) all.js，里面是我們兩個(gè)文件的合并
肯定有人疑惑了
var gulp = require('gulp'), concat = require('gulp-concat'); // 導入我們的合并插件gulp.task('default',function(){ gulp.src('testjs/*.js'). // 要處理的一堆 js 文件 pipe(concat('all.js')). // 用合并插件處理 pipe(gulp.dest('dist/')); // 把處理后的東西放進(jìn)目標目錄里面});看到這里 你一定會(huì )疑惑gulp.src 還有 gulp.dest 是什么。 你已經(jīng)理解了gulp 的task 的運作方式，那么你去 找找資料理解下gulp.dest和gulp.src 也就是分分鐘的事情，我們程序員，就是有力量！ 力量就來(lái)自我們的學(xué)習方式。
這里我只說(shuō)下 .pipe是個(gè)啥意思。
pipe 很好理解， 就是類(lèi) unix 系統上經(jīng)常使用的管道么。
比如
ls-l |grep "某某某" 基本上是我們用的最多的命令了，如果你會(huì ) 類(lèi) unix 系統。你馬上就明白了。 這個(gè) pipe 就相當于 | 這個(gè)管道符號
如果不了解管道咋用的，我也簡(jiǎn)單的給說(shuō)下。 就相當于把 pipe 命令前面程序輸出 output 放在一個(gè)文件里面，再給 pipe 后面的那個(gè)命令 當做 輸入 input 來(lái)用， 就是說(shuō)gulp.src('testjs/*.js')這個(gè)命令的輸出是我 testjs 目錄下的所有的 js 文件吧，pipe就把這些 js 全部放在一個(gè)文件里面，運行到 pipe(concat('all.js')). 這句的時(shí)候，我們的 concat('all.js') 就從那個(gè)文件（其實(shí)就是一個(gè)匿名管道）里面讀?。ň褪?input的過(guò)程）所有的 js 文件名字，當做自己input，然后合并成一個(gè) all.js， 這是一種非常常見(jiàn)的進(jìn)程間通訊！還不會(huì )的要趕快學(xué)會(huì )啊。！
好了，這個(gè)也非常簡(jiǎn)單。很快我們就能舉一反三了吧
我們已經(jīng)合并了js 了，那還有性能優(yōu)化的空間啊。 對我們可以壓縮他！
我們按照上面的步奏
npm install --save-dev gulp-uglifyvar gulp = require('gulp'), concat = require('gulp-concat'), uglify = require('gulp-uglify');gulp.task('default',function(){ gulp.src('testjs/*.js'). pipe(concat('all.js')). pipe(uglify()). pipe(gulp.dest('dist/'));});執行 gulp
得到結果
all.js已經(jīng)被壓縮在一起咯。
too easy?。?！ 舉一反三的時(shí)刻就交給自己個(gè)人了。
gulp 是一種非常容易學(xué)習和使用的工具，基本上拿在手上看一下就能直接拿來(lái)生產(chǎn)和使用。是每個(gè)前端攻城獅都可以去嘗試的居家旅行殺人越貨必備良器！還沒(méi)有用的趕快學(xué)一學(xué)！非常值得！
聯(lián)系客服
