原文來自:http://www.reibang.com/p/6b3f14b3a5d1
<pre>
一嗦随、安裝流程
1列荔、安裝 nodejs(請參考http://www.runoob.com/nodejs/nodejs-install-setup.html)
(關(guān)于 nodejs 的知識可以去 http://nodejs.cn/ 或者 [w3c]http://www.runoob.com/nodejs/nodejs-tutorial.html 了解)
檢查 nodejs 以及 npm 是否安裝成功
$ node -v
$ npm -v
2、安裝 cnpm
因為 npm 下載組件速度較慢枚尼,一般選擇安裝國內(nèi)鏡像
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
檢查 cnpm 是否安裝成功
$ cnpm -v
3贴浙、全局安裝 gulp
$ cnpm install gulp -g
查檢 gulp 是否安裝成功
$ gulp -v
至止,gulp的安裝已經(jīng)完成署恍,接下來我們通過一個簡單的實驗來實現(xiàn) gulp 之 Hello World崎溃。
二、使用 gulp 構(gòu)建項目
1盯质、創(chuàng)建并進(jìn)入項目目錄
$ mkdir ch1
$ cd ch1
2袁串、使用 cnpm 初始化當(dāng)前項目
$ npm init
這時需要你輸入當(dāng)前項目的一些信息概而,如果你是編寫開源項目,請認(rèn)識填寫囱修,如果尚未確定或者只是測試學(xué)習(xí)用赎瑰,可以全部回車,跳過這個步驟破镰。
執(zhí)行完 init 命令后餐曼,當(dāng)前目錄會生成一個 package.json 文件,打開可以看到啤咽,剛剛錄入的信息全部都記錄在這個文件中晋辆,可以手動修改。
3宇整、本地安裝 gulp 插件
因為 gulp 的功能都是通過插件的形式來實現(xiàn)的,gulp 擁有自己的插件庫芋膘,針對不同的場景鳞青,已經(jīng)有大量的已實現(xiàn)插件,只需要通過本地安裝为朋,將該插件下載至本地臂拓,即可使用。
安裝過程非常簡單习寸,只需要通過一個命令
$ cnpm install <plug-name> --save-dev
以 gulp 為例胶惰,本地安裝 gulp 插件
$ cnpm install gulp --save-dev
注:
之前已經(jīng)全局安裝過 gulp 了,這里居然又需要本地再安裝一次霞溪,這里需要搞清楚其中的區(qū)別孵滞。全局安裝 gulp 是為了執(zhí)行 gulp 任務(wù), 而本地安裝 gulp 是安裝 gulp 插件坊饶,為了可以調(diào)用 gulp 插件的功能
三匿级、使用 gulp 編碼實現(xiàn)輸出 Hello World
1染厅、創(chuàng)建 gulpfile.js 文件
$ echo .> gulpfile.js
2、編輯 gulpfile.js
// 導(dǎo)入工具包
var gulp = require('gulp');
// 定義一個 gulp 任務(wù)孤页,任務(wù)名為 test
gulp.task('test', function() {
// 任務(wù)執(zhí)行內(nèi)容
console.log('Hello World!');
});
// 定義 gulp 默認(rèn)任務(wù)蕉堰,任務(wù)名必須為 default
// ['test']表示:本任務(wù)依賴 test 任務(wù)
gulp.task('default', ['test']);
3、運行 gulp
$ gulp
可以看到命令行會輸出"Hello World"
也可以直接運行其它任務(wù)皿渗,格式為
$ gulp <taskname>
如果 taskname 不存在,則會執(zhí)行默認(rèn)任務(wù) default挤土,上面的操作就是 taskname 不存在的情況仰美。
直接運行 test 任務(wù),輸出 Hello World
$ gulp test