gulp入門(1)-安裝篇

原文來自: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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市壤圃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌墨叛,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異甥绿,居然都是意外死亡洗出,警方通過查閱死者的電腦和手機翩活,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進(jìn)店門承璃,熙熙樓的掌柜王于貴愁眉苦臉地迎上來堂竟,“玉大人席楚,你說我怎么就攤上這事垮斯。” “怎么了熊杨?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵川陆,是天一觀的道長鳞绕。 經(jīng)常有香客問我尸曼,道長们何,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任骡苞,我火速辦了婚禮垂蜗,結(jié)果婚禮上解幽,老公的妹妹穿的比我還像新娘。我一直安慰自己躲株,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布辖所。 她就那樣靜靜地躺著典挑,像睡著了一般琳水。 火紅的嫁衣襯著肌膚如雪肆糕。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天炫刷,我揣著相機與錄音绍申,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛极阅,可吹牛的內(nèi)容都是我干的胃碾。 我是一名探鬼主播,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼筋搏,長吁一口氣:“原來是場噩夢啊……” “哼仆百!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起奔脐,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤俄周,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后髓迎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峦朗,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年排龄,在試婚紗的時候發(fā)現(xiàn)自己被綠了波势。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡橄维,死狀恐怖尺铣,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情争舞,我是刑警寧澤凛忿,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站竞川,受9級特大地震影響侄非,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜流译,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望者疤。 院中可真熱鬧福澡,春花似錦、人聲如沸驹马。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽糯累。三九已至算利,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泳姐,已是汗流浹背效拭。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缎患。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓慕的,卻偏偏與公主長得像,于是被迫代替她去往敵國和親挤渔。 傳聞我的和親對象是個殘疾皇子肮街,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容

  • gulpjs是一個前端構(gòu)建工具,與gruntjs相比判导,gulpjs無需寫一大堆繁雜的配置參數(shù)嫉父,API也非常簡單,學(xué)...
    依依玖玥閱讀 3,152評論 7 55
  • gulpjs是一個前端構(gòu)建工具眼刃,與gruntjs相比绕辖,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡單鸟整,學(xué)...
    build1024閱讀 528評論 0 0
  • 1引镊、gulp的安裝 首先確保你已經(jīng)正確安裝了nodejs環(huán)境。然后以全局方式安裝gulp: npm install...
    F_imok閱讀 2,375評論 1 11
  • 前言 眾所周知目前比較火的工具就是gulp和webpack篮条,但webpack和gulp卻有所不同弟头,本人兩者的底層研...
    cduyzh閱讀 1,368評論 0 13
  • 生活是需要目標(biāo)的,尤其是小目標(biāo)涉茧。 這是我這幾天最深切的感受赴恨。 去年年底我堅定地報了計算機二級的考試,為...
    星座愛好者閱讀 332評論 0 1