Gulp 是一個自動化工具,前端開發者可使用它來處理常見任務:css
固然Gulp能作的遠不止這些。若是你夠瘋狂,你甚至可使用它搭建一個靜態頁面生成器。Gulp真的足夠強大,但你必須學會駕馭它。html
這是這篇文章的主要目的。幫助你瞭解Gulp的基礎用法,助你早日完成一統天下的大業。前端
在咱們深刻了解以前,咱們先來講說爲何是Gulp。node
相似Gulp的工具,咱們一般稱之爲構建工具。現在最流行的兩個構建工具是Gulp和Grunt。webpack
已經有很是多的文章論證它們以前的異同,你隨便搜一下就知道了。web
主要區別是你如何使用他們構建自動化工做流。與Grunt相比,Gulp更加簡潔,執行效率更高。正則表達式
讓咱們繼續學習Gulp並搭建一個簡單的工做流。npm
這篇文章的最後,你會擁有簡單的一個工做流:json
除此以外,你還將學會使用簡單命令鏈式調用多個任務。gulp
安裝Gulp以前你須要先安裝Node.js。
若是你還沒安裝Node,你能夠在 這裏 下載。
安裝完Node.js,使用Terminal(終端,win下是cmd)用下面命令安裝Gulp
$ sudo npm install gulp -g
只有mac用戶才須要sudo命令,而且不要把$符號也複製進去,這不是你的菜。
npm install是指定從Node Package Manager(npm 你怕毛)安裝的命令。
-g表示全局安裝,這樣你在電腦上任何位置都能只用gulp 命令。
Mac 用戶須要管理員權限才能全局安裝,因此須要sudo。
接下來使用Gulp建立項目。
首先,咱們新建一個project文件夾,並在該目錄下執行npm init命令:
$ npm init
npm init命令會爲你建立一個package.json文件,這個文件保存着這個項目相關信息。好比你用到的各類依賴(這裏主要是插件)
(終端會自動出現下面內容,這裏先隨便填就行)
npm-init
建立完以後,咱們執行下面的命令:
$ npm install gulp --save-dev
這一次,咱們局部安裝Gulp。使用—save-dev,將通知計算機在package.json中添加gulp依賴。
package-json
執行完以後,gulp將建立node_modules文件夾,裏面有個gulp文件夾。
node-modules
在正式開始以前,咱們再來明確下項目的目錄結構。
Gulp很是之靈活,理解它的內部工做,你就能在項目中駕輕就熟。
這篇文章,咱們使用通用的webapp目錄結構:
structure
在這個結構中,咱們使用app文件夾做爲開發目錄(全部的源文件都放在這下面),dist文件夾用來存放生產環境下的內容。
這些文件名,你想怎麼起都行,但請務必記住你的目錄結構。
如今咱們來建立gulpfile.js。
(你須要先在根目錄下建立一個gulpfile.js文件)。
var gulp = require(‘gulp‘);
這行命令告知Node去node_modules中查找gulp包,先局部查找,找不到就去全局環境中查找。
找到以後就會賦值給gulp變量,而後咱們就可使用它了。
簡單的任務以下所示:
gulp.task(‘task-name‘, function() {
// Stuff here
});
task-name 是給你的任務起的名字,稍後在命令行中執行gulp task-name,將運行該任務。
寫個HelloWorld,是這樣的:
gulp.task(‘hello‘, function() {
console.log(‘Hello World!‘);
});
命令行中執行:
$ gulp hello
那麼將會輸出Hello World!。 夠簡單吧?
Gulp任務一般都會比這難一丁點,就一丁點。
一般會包含兩個特定的Gulp方法和一些列Gulp插件。
大概這樣:
gulp.task(‘task-name‘, function () {
return gulp.src(‘source-files‘) // Get source files with gulp.src
.pipe(aGulpPlugin()) // Sends it through a gulp plugin
.pipe(gulp.dest(‘destination‘)) // Outputs the file in the destination folder
})
正如你所見,兩個Gulp方法,src,dest,一進一出[捂臉.jpg]。
下面用編譯Sass來舉栗子。
咱們使用gulp-sass插件來編譯Sass。
安裝插件的步驟是這樣的:
使用npm install 命令安裝
$ npm install gulp-sass --save-dev
在gulpfile中引入插件,用變量保存
var gulp = require(‘gulp‘);
// Requires the gulp-sass plugin
var sass = require(‘gulp-sass‘);
在任務中使用
gulp.task(‘sass‘, function(){
return gulp.src(‘source-files‘)
.pipe(sass()) // Using gulp-sass
.pipe(gulp.dest(‘destination‘))
});
咱們須要給sass任務提供源文件和輸出位置。因此咱們先在項目中建立app/scss文件夾,裏面有個styles.scss文件。
這個文件將在gulp.src中用到。
sass處理以後,咱們但願它生成css文件併產出到app/css目錄下,能夠這樣寫:
gulp.task(‘sass‘, function(){
return gulp.src(‘app/scss/styles.scss‘)
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest(‘app/css‘))
});
測試一下:
// styles.scss
.testing {
width: percentage(5/7);
}
使用Terminal執行gulp sass,你將看到app/css/styles.css文件下會有下面的代碼:
/* styles.css */
.testing {
width:71.42857%;
}
styles.css是gulp智動爲咱們生成的。
percentage 是Sass的方法。
使用Sass就這麼簡單。可是一般咱們不止有一個scss文件。這時候可使用Node通配符。
通配符是一種匹配模式,容許你匹配到多個文件。不止是Node,不少平臺都有,有點像正則表達式。
使用通配符,計算機檢查文件名和路徑進行匹配。
大部分時候,咱們只須要用到下面4種匹配模式:
那麼仍是上面的栗子,改造一下:
gulp.task(‘sass‘, function() {
return gulp.src(‘app/scss/**/*.scss‘) // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass())
.pipe(gulp.dest(‘app/css‘))
})
任何app下的scss文件,在執行命令以後將生成對應的css文件存放到相應路徑。(智動…)
second-stylesheet
如今咱們能處理多個文件了,可是不想每次都要執行命令,怎麼辦?
Gulp就是爲懶人而生的,咱們可使用watch命令,自動檢測並執行。
Gulp提供watch方法給咱們,語法以下:
// Gulp watch syntax
gulp.watch(‘files-to-watch‘, [‘tasks‘, ‘to‘, ‘run‘]);
將上面的栗子再改下:
// Gulp watch syntax
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
一般咱們監聽的還不僅是一個文件,把它變成一個任務:
gulp.task(‘watch‘, function(){
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
// Other watchers
})
執行gulp watch命令。
watch-start
有了監聽,每次修改文件,Gulp都將自動爲咱們執行任務。
watch-compile
還不夠,修改完直接幫我刷新瀏覽器行嗎,我不想每次都要手動按Command + R;
Browser Sync 幫助咱們搭建簡單的本地服務器並能實時刷新瀏覽器,它還能 同時刷新多個設備
新插件?記住!安裝,引入,使用。
$ npm install browser-sync --save-dev
這裏沒有gulp-前綴,由於browser-sync支持Gulp,因此沒有人專門去搞一個給Gulp用。
var browserSync = require(‘browser-sync‘);
咱們建立一個broswerSync任務,咱們須要告知它,根目錄在哪裏。
gulp.task(‘browserSync‘, function() {
browserSync({
server: {
baseDir: ‘app‘
},
})
})
咱們稍微修改一下以前的代碼,讓每次css文件更改都刷新一下瀏覽器:
gulp.task(‘sass‘, function() {
return gulp.src(‘app/scss/**/*.scss‘) // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest(‘app/css‘))
.pipe(browserSync.reload({
stream: true
}))
});
如今咱們配置好Broswer Sync了,咱們須要運行這兩個命令。
咱們能夠在watch任務以前告知Gulp,先把browserSync和Sass任務執行了再說。
語法以下:
gulp.task(‘watch‘, [‘array‘, ‘of‘, ‘tasks‘, ‘to‘, ‘complete‘,‘before‘, ‘watch‘], function (){
// ...
})
應用下來是這樣:
gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
// Other watchers
})
如今你執行gulp watch命令,在執行完browserSync和Sass,纔會開始監聽。
bs-watch
而且如今瀏覽器的顯示的頁面爲app/index.html。你修改了styles.scss以後,瀏覽器將自動屬性頁面。
bs-change-bg
不止是scss修改的時候須要刷新瀏覽器吧?再改改:
gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
gulp.watch(‘app/scss/**/*.scss‘, [‘sass‘]);
// Reloads the browser whenever HTML or JS files change
gulp.watch(‘app/*.html‘, browserSync.reload);
gulp.watch(‘app/js/**/*.js‘, browserSync.reload);
});
到目前爲止,咱們作了下面三件事:
接下來講說優化方面的技巧
說到優化的時候,咱們須要想到:壓縮,拼接。也就是減小體積和HTTP次數。
開發者面臨的主要問題是很難按照正確的順序合併文件。
<body>
<!-- other stuff -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
</body>
因爲文件路徑的的不一樣,使用 https://www.npmjs.com/package/gulp-concat 等插件很是困難。
慶幸的是,gulp-useref 解決了這個問題。
gulp-useref會將多個文件拼接成單一文件,並輸出到相應目錄。
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
能夠是js,css,或者remove。若是你設爲remove,Gulp將不會生成文件。
指定產出路徑。
咱們想最終產出main.min.js。能夠這樣寫:
<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/another-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
咱們來安裝gulp-useref。
$ npm install gulp-useref --save-dev
引用
var useref = require(‘gulp-useref‘);
使用起來很是簡單:
gulp.task(‘useref‘, function(){
return gulp.src(‘app/*.html‘)
.pipe(useref())
.pipe(gulp.dest(‘dist‘));
});
(新版的gulp-useref已經不須要寫多餘的useref.assets了)
執行useref命令,Gulp將合併三個script標籤成一個文件,並保存到dist/js/main.min.js。
合併完以後,咱們再來壓縮。使用gulp-uglify插件。
安裝
$ npm install gulp-uglify --save-dev
使用
// Other requires...
var uglify = require(‘gulp-uglify‘);
gulp.task(‘useref‘, function(){
return gulp.src(‘app/*.html‘)
.pipe(uglify()) // Uglifies Javascript files
.pipe(useref())
.pipe(gulp.dest(‘dist‘))
});
搞定!
注意:執行完useref後,html中的script路徑將只剩下main.min.js。
useref-html
王祖藍:完美~
gulp-useref一樣能夠用在css上。除了壓縮,須要區分,其它內容同js同樣。因此咱們使用gulp-if來作不一樣處理。
使用gulp-minify-css壓縮css。
$ npm install gulp-if gulp-minify-css --save-dev
應用
var gulpIf = require(‘gulp-if‘);
var minifyCSS = require(‘gulp-minify-css‘);
gulp.task(‘useref‘, function(){
return gulp.src(‘app/*.html‘)
// Minifies only if it‘s a CSS file
.pipe(gulpIf(‘*.css‘, minifyCSS()))
// Uglifies only if it‘s a Javascript file
.pipe(gulpIf(‘*.js‘, uglify()))
.pipe(useref())
.pipe(gulp.dest(‘dist‘))
});
搞定!
再說說如何壓縮圖片。一樣easy。
使用gulp-imagemin插件。
$ npm install gulp-imagemin --save-dev
引入,使用
var imagemin = require(‘gulp-imagemin‘);
gulp.task(‘images‘, function(){
return gulp.src(‘app/images/**/*.+(png|jpg|gif|svg)‘)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images‘))
});
(全部的gulp插件都是有相關參數能夠配置,若是須要,請自行查看。)
壓縮圖片可能會佔用較長時間,使用 gulp-cache 插件能夠減小重複壓縮。
$ npm install gulp-cache --save-dev
引入、使用
var cache = require(‘gulp-cache‘);
gulp.task(‘images‘, function(){
return gulp.src(‘app/images/**/*.+(png|jpg|jpeg|gif|svg)‘)
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest(‘dist/images‘))
});
接下來,咱們說說發佈流程。
因爲咱們是自動生成文件,咱們不想舊文件摻雜進來。
使用 del
npm install del --save-dev
引入、使用
var del = require(‘del‘);
gulp.task(‘clean‘, function() {
del(‘dist‘);
});
可是咱們又不想圖片被刪除(圖片改動的概率不大),啓用新的任務。
gulp.task(‘clean:dist‘, function(callback){
del([‘dist/**/*‘, ‘!dist/images‘, ‘!dist/images/**/*‘], callback)
});
這個任務會刪除,除了images/文件夾,dist下的任意文件。
爲了知道clean:dist任務何時完成,咱們須要提供callback參數。
在某些時候咱們仍是須要清除圖片,因此clean任務咱們還須要保留。
gulp.task(‘clean‘, function(callback) {
del(‘dist‘);
return cache.clearAll(callback);
})
噢,我真的是廢話太多了。把咱們學到的組合到一塊吧!
廢話了這麼多,咱們主要有兩條線路。
第一條是開發過程,咱們便以Sass,監聽文件,刷新瀏覽器。
第二條是優化,咱們優化CSS,JavaScript,壓縮圖片,並把資源從app移動到dist。
開發任務咱們上面的watch已經組裝好了。
gulp.task(‘watch‘, [‘browserSync‘, ‘sass‘], function (){
// ... watchers
})
咱們也作一個來執行第二條線路。
gulp.task(‘build‘, [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
console.log(‘Building files‘);
})
可是這樣Gulp會同時觸發[]的事件。咱們要讓clean在其餘任務以前完成。
這裏要用到 RunSequence 。
$ npm install run-sequence --save-dev
用法以下:
var runSequence = require(‘run-sequence‘);
gulp.task(‘task-name‘, function(callback) {
runSequence(‘task-one‘, ‘task-two‘, ‘task-three‘, callback);
});
執行task-name時,Gulp會按照順序執行task-one,task-two,task-thre。
RunSequence也容許你同時執行多個任務。
gulp.task(‘task-name‘, function(callback) {
runSequence(‘task-one‘, [‘tasks‘,‘two‘,‘run‘,‘in‘,‘parallel‘], ‘task-three‘, callback);
});
改造咱們的代碼:
gulp.task(‘build‘, function (callback) {
runSequence(‘clean:dist‘,
[‘sass‘, ‘useref‘, ‘images‘, ‘fonts‘],
callback
)
})
開發任務咱們也用runSequence:
gulp.task(‘default‘, function (callback) {
runSequence([‘sass‘,‘browserSync‘, ‘watch‘],
callback
)
})
default? 若是你的任務名字叫作default,那麼只須要輸入gulp命令便可執行。
這裏是咱們最終的 代碼倉庫。
上面的的內容搭建了一個基本的Gulp工做流。還有更精彩的內容等着你去開發。這裏提供些插件:
開發過程:
優化:
除了開發和優化過程,你可使用gulp-jasmine寫JavaScript單元測試,甚至使用gulp-rync直接部署dist文件到生產環境。
花了點時間去學習Gulp,這篇文章是我找到比較全面的,很是適合新手入門。
Gulp其實很是簡單,多玩一下,你就能徹底掌握它了,有能力的話,能夠嘗試開發Gulp插件。
我在 前端收藏夾 以及 使用gulp生成sprites圖片和樣式表 都有實踐過。不過正如做者 Zell Liew 所說,Gulp的強大之處遠不止這些,因此他出了本電子書 automating your workflow ,能夠幫助你搭建屬於本身的工做流,剩下時間去喝咖啡,有興趣的能夠去購買,支持做者。
本文根據@Zell Liew的文章所譯,整篇譯文帶有咱們本身的理解和意思,若是有譯得很差的地方或者不對之處,還請你們指點。英文出處:Gulp for Beginners
如需轉載,請註明出處: http://w3ctrain.com/2015/12/22/gulp-for-beginners/ ,歡迎加入前端Q羣( 467969149 )
from: http://www.w3ctrain.com/2015/12/22/gulp-for-beginners/
標籤:
原文地址:http://www.cnblogs.com/GarfieldEr007/p/5747308.html