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
- 全局安裝 gulp:
$ npm install --global gulp
- 作為項(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ù)衰抑。