gulp使用初解

思維導(dǎo)圖


思維導(dǎo)圖

一妇智、簡(jiǎn)介

1. nodeJS

nodeJS的出現(xiàn)拙友,可以算是前端里程碑式的一個(gè)事件,它讓前端攻城獅們擺脫了瀏覽器的束縛背苦,踏上了一個(gè)更加寬廣的舞臺(tái)挨厚。前端的可能性堡僻,從此更加具有想象空間糠惫。

隨著一系列基于nodes的應(yīng)用/工具的出現(xiàn)疫剃,工作中與nodeJS打交道的機(jī)會(huì)越來越多。無論在node應(yīng)用的開發(fā)硼讽,還是使用中巢价,包管理都扮演著一個(gè)很重要的作用。NPM(node package manager)固阁,作為node的包管理工具壤躲,極大地便利了我們的開發(fā)工作,很有必要了解一下备燃。

2. NPM

NPM(node package manager)碉克,通常稱為node包管理器。顧名思義并齐,它的主要功能就是管理node包漏麦,包括:安裝、卸載况褪、更新撕贞、查看、搜索测垛、發(fā)布等捏膨。

NPM的背后,是基于couchdb的一個(gè)數(shù)據(jù)庫(kù)食侮,詳細(xì)記錄了每個(gè)包的信息号涯,包括作者、版本锯七、依賴链快、授權(quán)信息等。它的一個(gè)很重要的作用就是:將開發(fā)者從繁瑣的包管理工作(版本起胰、依賴等)中解放出來久又,更加專注于功能的開發(fā)。

3. gulp

gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器效五, 她能自動(dòng)化地完成 javascript/coffee/sass/less/html/image/css 等文件的的測(cè)試地消、檢查、合并畏妖、壓縮脉执、格式化、瀏覽器自動(dòng)刷新戒劫、部署文件生成半夷,并監(jiān)聽文件在改動(dòng)后重復(fù)指定的這些步驟婆廊。在實(shí)現(xiàn)上,她借鑒了Unix操作系統(tǒng)的管道(pipe)思想巫橄,前一級(jí)的輸出淘邻,直接變成后一級(jí)的輸入,使得在操作上非常簡(jiǎn)單湘换。通過本文宾舅,我們將學(xué)習(xí)如何使用Gulp來改變開發(fā)流程,從而使開發(fā)更加快速高效彩倚。

gulp 和 grunt 非常類似筹我,但相比于 grunt 的頻繁 IO 操作,gulp 的流操作帆离,能更快地更便捷地完成構(gòu)建工作蔬蕊。

二、安裝gulp

1. nodeJS(上官網(wǎng)直接安裝 nodeJS官網(wǎng)

2. gulp

1)全局安裝gulp

$ sudo npm install -g gulp

2)在項(xiàng)目文件夾下進(jìn)行npm初始化哥谷,生成package.json

$ npm init  
//初始化安裝過程中岸夯,會(huì)提示設(shè)置package文件的參數(shù),只要設(shè)置name就行了(不要叫g(shù)ulp)呼巷,不然開發(fā)依賴好像安裝會(huì)報(bào)錯(cuò)
//其他的如果沒有需要設(shè)定的囱修,一路回車就行了

3)開發(fā)依賴安裝

$ npm install gulp-name --save-dev
//安裝成功后會(huì)在package.json文件中看到安裝版本記錄

三、gulp使用

1. 新建gulpfile.js

2. 調(diào)用gulp

var gulp = require('gulp')
var name = require('gulp-name')  //插件調(diào)用

3. gulp使用方法

1)基本語法

  • 創(chuàng)建目標(biāo)
    gulp.task('',[],function(){})

    //例子1(默認(rèn)):
    gulp.task('default',function() {
      console.log('我是default')
    });
    //運(yùn)行結(jié)果:
    $ gulp  //終端運(yùn)行命令王悍,后面不跟東西破镰,默認(rèn)執(zhí)行default
    [21:54:33] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js
    [21:54:33] Starting 'default'...
    我是default
    [21:54:33] Finished 'default' after 120 μs
    
    //例子2(自定義)
    gulp.task('task1',function () {
      console.log('我是task1')
    })
    //運(yùn)行結(jié)果:
    $ gulp task1  //后面跟上自定義的任務(wù)名稱
    [21:58:00] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js
    [21:58:00] Starting 'task1'...
    我是task1
    [21:58:00] Finished 'task1' after 121 μs
    
    //例子3(復(fù)合)
    gulp.task('default',['task1'],function() {
      console.log('我是default')
    });
    //運(yùn)行結(jié)果:
    $ gulp  //先執(zhí)行自定義,后執(zhí)行默認(rèn)
    [22:01:33] Using gulpfile ~/Desktop/nodeJS/gulp/gulpfile.js
    [22:01:33] Starting 'task1'...
    我是task1
    [22:01:33] Finished 'task1' after 99 μs
    [22:01:33] Starting 'default'...
    我是default
    [22:01:33] Finished 'default' after 38 μs
    
  • 目標(biāo)文件(舉例看后面插件舉例)
    gulp.src('')

  • 目標(biāo)輸出(舉例看后面插件舉例)
    gulp.dest('')

  • 管道(上文的輸出是下文的輸入)(舉例看后面插件舉例)
    .pipe()

2)gulp插件使用(插件網(wǎng)站

  • 插件安裝
    $ npm install gulp-name1 gulp-name2 --save-dev

  • 插件調(diào)用
    var name = require('gulp-name')

  • 插件語法
    .pipe(name())

    //舉例
    gulp.task('min',function () {
      gulp.src('js/*.js')         //外部引用
      .pipe(concat('new.js'))     //合并多個(gè)js文件压储,并生成一個(gè)新的文件
      .pipe(jsmin())              //壓縮這個(gè)新生成的js文件
      .pipe(gulp.dest('newJS/'))  //將新生成的文件放入新的文件夾中
    })
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鲜漩,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子集惋,更是在濱河造成了極大的恐慌孕似,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件刮刑,死亡現(xiàn)場(chǎng)離奇詭異喉祭,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)雷绢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門泛烙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人翘紊,你說我怎么就攤上這事蔽氨。” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵鹉究,是天一觀的道長(zhǎng)宇立。 經(jīng)常有香客問我,道長(zhǎng)自赔,這世上最難降的妖魔是什么妈嘹? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮匿级,結(jié)果婚禮上蟋滴,老公的妹妹穿的比我還像新娘。我一直安慰自己痘绎,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布肖粮。 她就那樣靜靜地躺著孤页,像睡著了一般。 火紅的嫁衣襯著肌膚如雪涩馆。 梳的紋絲不亂的頭發(fā)上行施,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音魂那,去河邊找鬼蛾号。 笑死,一個(gè)胖子當(dāng)著我的面吹牛涯雅,可吹牛的內(nèi)容都是我干的鲜结。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼活逆,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼精刷!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蔗候,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤怒允,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后锈遥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體纫事,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年所灸,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了丽惶。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡庆寺,死狀恐怖蚊夫,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情懦尝,我是刑警寧澤知纷,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布壤圃,位于F島的核電站,受9級(jí)特大地震影響琅轧,放射性物質(zhì)發(fā)生泄漏伍绳。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一乍桂、第九天 我趴在偏房一處隱蔽的房頂上張望冲杀。 院中可真熱鬧,春花似錦睹酌、人聲如沸权谁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)旺芽。三九已至,卻和暖如春辐啄,著一層夾襖步出監(jiān)牢的瞬間采章,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工壶辜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留悯舟,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓砸民,卻偏偏與公主長(zhǎng)得像抵怎,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子阱洪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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

  • gulpjs是一個(gè)前端構(gòu)建工具便贵,與gruntjs相比,gulpjs無需寫一大堆繁雜的配置參數(shù)冗荸,API也非常簡(jiǎn)單承璃,學(xué)...
    依依玖玥閱讀 3,157評(píng)論 7 55
  • gulpjs是一個(gè)前端構(gòu)建工具,與gruntjs相比蚌本,gulpjs無需寫一大堆繁雜的配置參數(shù)盔粹,API也非常簡(jiǎn)單,學(xué)...
    井皮皮閱讀 1,306評(píng)論 0 10
  • gulpjs是一個(gè)前端構(gòu)建工具程癌,與gruntjs相比舷嗡,gulpjs無需寫一大堆繁雜的配置參數(shù),API也非常簡(jiǎn)單嵌莉,學(xué)...
    小裁縫sun閱讀 933評(píng)論 0 3
  • 1进萄、gulp的安裝 首先確保你已經(jīng)正確安裝了nodejs環(huán)境。然后以全局方式安裝gulp: npm install...
    F_imok閱讀 2,386評(píng)論 1 11
  • 在現(xiàn)在的前端開發(fā)中,前后端分離中鼠、模塊化開發(fā)可婶、版本控制、文件合并與壓縮援雇、mock數(shù)據(jù)等等一些原本后端的思想開始...
    Charlot閱讀 5,449評(píng)論 1 32