Gulp - 前端構(gòu)建工作流實(shí)戰(zhàn)

gulp 是前端開(kāi)發(fā)過(guò)程中對(duì)代碼進(jìn)行構(gòu)建的工具,是自動(dòng)化項(xiàng)目的構(gòu)建利器。其不僅能對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,而且在開(kāi)發(fā)過(guò)程中很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成纯蛾;使用她,我們不僅可以很愉快的編寫(xiě)代碼祷蝌,而且大大提高我們的工作效率茅撞。

和其他同類(lèi)型構(gòu)建工具相比帆卓,gulp 的入門(mén)簡(jiǎn)單巨朦、效率更高,其 插件 的數(shù)量都不算多剑令,但每個(gè)插件都足夠精簡(jiǎn)和易用糊啡。

其更多特性和官方示例參考:http://www.gulpjs.com.cn/docs/recipes/

一、安裝 Gulp

  1. 全局安裝 gulp:
$ npm install --global gulp
  1. 作為項(xiàng)目的開(kāi)發(fā)依賴(devDependencies)安裝:
$ npm install --save-dev gulp

二吁津、快速上手

在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 gulpfile.js 的文件:

// 引入 gulp
var gulp = require('gulp');

// 自定義任務(wù)棚蓄,調(diào)用如:gulp test
gulp.task('test', function(){
  // 輸出一段內(nèi)容
  console.log('It works');
});

// 默認(rèn)任務(wù),調(diào)用如:gulp
gulp.task('default', ['test']);

在終端中運(yùn)行輸入 gulp 則可以執(zhí)行定義的 default 任務(wù)碍脏,如果希望執(zhí)行某個(gè)指定的任務(wù)(如:test 任務(wù))梭依,則可以輸入 gulp test

$ gulp

輸出:

$ gulp
[08:31:07] Using gulpfile ./gulpfile.js
[08:31:07] Starting 'test'...
It works
[08:31:07] Finished 'test' after 155 μs
[08:31:07] Starting 'default'...
[08:31:07] Finished 'default' after 104 μs
$ 

默認(rèn)的名為 default 的任務(wù)(task)將會(huì)被運(yùn)行典尾。gulp.task() 的第二個(gè)參數(shù)只能是數(shù)組(array)或函數(shù)(function)役拴,如:

// 直接使用函數(shù)
gulp.task('taskOne', function(){
  // 任務(wù)邏輯
});

// 一個(gè)或多個(gè)任務(wù)
gulp.task('test', ['taskOne']);
gulp.task('test', ['taskOne', 'taskTwo']);

gulp.task() 的第三個(gè)參數(shù)和第二個(gè)參數(shù)的用法一樣,只是意義不同钾埂,參考:http://www.gulpjs.com.cn/docs/recipes/running-tasks-in-series/

// gulp.task('任務(wù)名', ['子任務(wù)'], 子任務(wù)的回調(diào)函數(shù))

// 串行任務(wù) 任務(wù)依賴
gulp.task('one', function(cb) {
    // 任務(wù)邏輯
});

// 任務(wù)依賴河闰,必須先完成 參數(shù)二 的任務(wù)科平,才能執(zhí)行 參數(shù)三 的邏輯
gulp.task('two', ['one'], function() {
    // 現(xiàn)在任務(wù) 'one' 已經(jīng)完成了
});

gulp.task('default', ['two']);

三、任務(wù)的先后順序 - 串行任務(wù) 任務(wù)依賴

上面已經(jīng)提到了串行任務(wù)的用法姜性,gulp 可以通過(guò)返回一個(gè) promise 或者 stream 來(lái)讓串行任務(wù)變得更為清晰和易用(http://www.gulpjs.com.cn/docs/recipes/running-tasks-in-series/)瞪慧。其實(shí),我們也的確是這樣使用的部念。

四弃酌、實(shí)戰(zhàn)

在該實(shí)戰(zhàn)中,我們會(huì)使用到 less 編譯儡炼,樣式壓縮矢腻,瀏覽器實(shí)時(shí)刷新等常見(jiàn)的功能。

4.1 初始化項(xiàng)目

進(jìn)入終端射赛,并 cd 到對(duì)應(yīng)的工作目錄多柑,建立工程,并初始化工程楣责。

# 進(jìn)入工作目錄
$ cd sites

# 建立工程
$ mkdir myApp
$ cd myApp

# 初始化工程
$ npm init

4.2 添加 npm 依賴包

添加使用的 npm 包竣灌,大部分的包可以在 NPM官網(wǎng)NPM gulpfriendly 搜索到。當(dāng)前項(xiàng)目用到的如下:

# npm 安裝
$ npm install gulp gulp-changed gulp-cssnano gulp-less gulp-rename gulp-watch opn pump --save

# yarn 安裝
$ yarn add gulp gulp-connect gulp-cssnano gulp-less gulp-rename gulp-watch opn pump --save
  • gulp: 這個(gè)屬于基礎(chǔ)依賴秆麸,通常都是全局安裝的初嘹;
  • gulp-connect:它可以運(yùn)行一個(gè)支持實(shí)時(shí)重載(LiveReload)的網(wǎng)頁(yè)服務(wù)器;
  • gulp-cssnano:CSS 文件壓縮沮趣;
  • gulp-less:LESS 文件編譯為 CSS 文件屯烦;
  • gulp-rename:重命名文件;
  • gulp-watch:文件變動(dòng)監(jiān)測(cè)房铭;
  • opn:打開(kāi)指定的 URL驻龟、文件;
  • pump:讓你可以使用數(shù)組替換 pipe語(yǔ)法缸匪;

執(zhí)行安裝完成后翁狐,工程目錄下回生成一個(gè) node_modules 目錄。

4.3 編寫(xiě) gulpfile 文件

我們?cè)诟夸浶陆ㄒ粋€(gè) html 文件凌蔬,內(nèi)容可暫時(shí)留空露懒。然后在工程目錄新建一個(gè)名為 gulpfile 的 js 文件,按照下面的代碼設(shè)計(jì)一個(gè)或多個(gè)任務(wù)砂心。

var gulp = require('gulp');
var pump = require('pump');
var opn = require('opn');
var less = require('gulp-less');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var watch = require('gulp-watch');
var connect = require('gulp-connect');

// HTML 結(jié)構(gòu)變化時(shí)刷新瀏覽器
gulp.task('html', function () {
    return pump([
        gulp.src('*.html'),
        connect.reload()
    ]);
});

// 連接服務(wù)器
gulp.task('connect', function () {
    connect.server({
        name: 'myApp',
        port: 8080,
        livereload: true
    });
    opn('http://localhost:8080/');
});

// LESS 編譯
gulp.task('less', function () {
    return pump([
        gulp.src('src/less/main.less'),
        less(),
        gulp.dest('styles/'),
        cssnano(),
        rename({
            extname: '.min.css'
        }),
        gulp.dest('styles/')
    ]);
});

// 監(jiān)控文件更新
gulp.task('watch', function () {
    // 監(jiān)控首頁(yè)文件
    watch(['./index.html', 'styles/*.css'], ['html']);

    // LESS 編譯
    watch('src/less/main.less', ['less']);
});

gulp.task('default', ['watch', 'connect']);

4.4 運(yùn)行測(cè)試

在終端輸入 gulp 然后回車(chē)懈词,瀏覽器回自動(dòng)打開(kāi) http://localhost:8080/ ,如果你的 index.html 文件沒(méi)有內(nèi)容辩诞,瀏覽器可能會(huì)顯示為空白頁(yè)面坎弯。

編輯 index.html 的內(nèi)容,瀏覽器頁(yè)面也會(huì)跟著刷新。

更新 src/less/main.less 的內(nèi)容時(shí)荞怒,項(xiàng)目的 styles/ 目錄下還會(huì)出現(xiàn)兩個(gè) CSS 文件洒琢。

index.html 引入 CSS 文件,既可以實(shí)現(xiàn)實(shí)時(shí)編輯和預(yù)覽褐桌。

可以在終端輸入 control + C 來(lái)退出任務(wù)衰抑。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市荧嵌,隨后出現(xiàn)的幾起案子呛踊,更是在濱河造成了極大的恐慌,老刑警劉巖啦撮,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谭网,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡赃春,警方通過(guò)查閱死者的電腦和手機(jī)愉择,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)织中,“玉大人锥涕,你說(shuō)我怎么就攤上這事∠梁穑” “怎么了层坠?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)刁笙。 經(jīng)常有香客問(wèn)我破花,道長(zhǎng),這世上最難降的妖魔是什么疲吸? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任座每,我火速辦了婚禮,結(jié)果婚禮上磅氨,老公的妹妹穿的比我還像新娘尺栖。我一直安慰自己嫡纠,他們只是感情好烦租,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著除盏,像睡著了一般叉橱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上者蠕,一...
    開(kāi)封第一講書(shū)人閱讀 51,718評(píng)論 1 305
  • 那天窃祝,我揣著相機(jī)與錄音,去河邊找鬼踱侣。 笑死粪小,一個(gè)胖子當(dāng)著我的面吹牛大磺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播探膊,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼杠愧,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了逞壁?” 一聲冷哼從身側(cè)響起流济,我...
    開(kāi)封第一講書(shū)人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎腌闯,沒(méi)想到半個(gè)月后绳瘟,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡姿骏,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年糖声,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片分瘦。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡姨丈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出擅腰,到底是詐尸還是另有隱情蟋恬,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布趁冈,位于F島的核電站歼争,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏渗勘。R本人自食惡果不足惜沐绒,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望旺坠。 院中可真熱鬧乔遮,春花似錦、人聲如沸取刃。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)璧疗。三九已至坯辩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間崩侠,已是汗流浹背漆魔。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人改抡。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓矢炼,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親阿纤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子裸删,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

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

  • gulpjs是一個(gè)前端構(gòu)建工具,與gruntjs相比阵赠,gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù)涯塔,API也非常簡(jiǎn)單,學(xué)...
    依依玖玥閱讀 3,155評(píng)論 7 55
  • gulpjs是一個(gè)前端構(gòu)建工具清蚀,與gruntjs相比匕荸,gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù),API也非常簡(jiǎn)單枷邪,學(xué)...
    井皮皮閱讀 1,301評(píng)論 0 10
  • gulpjs是一個(gè)前端構(gòu)建工具榛搔,與gruntjs相比,gulpjs無(wú)需寫(xiě)一大堆繁雜的配置參數(shù)东揣,API也非常簡(jiǎn)單践惑,學(xué)...
    小裁縫sun閱讀 930評(píng)論 0 3
  • 1、gulp的安裝 首先確保你已經(jīng)正確安裝了nodejs環(huán)境嘶卧。然后以全局方式安裝gulp: npm install...
    F_imok閱讀 2,378評(píng)論 1 11
  • 在現(xiàn)在的前端開(kāi)發(fā)中尔觉,前后端分離、模塊化開(kāi)發(fā)芥吟、版本控制侦铜、文件合并與壓縮、mock數(shù)據(jù)等等一些原本后端的思想開(kāi)始...
    Charlot閱讀 5,443評(píng)論 1 32