如何使用Gulp？

時間  2019-11-30
標籤 如何 使用 gulp 欄目 JavaScript 简体版
原文   原文鏈接

Gulp 是一個自動化工具，前端開發者可使用它來處理常見任務：css

  • 搭建web服務器
  • 文件保存時自動重載瀏覽器
  • 使用預處理器如Sass、LESS
  • 優化資源，好比壓縮CSS、JavaScript、壓縮圖片

固然Gulp能作的遠不止這些。若是你夠瘋狂，你甚至可使用它搭建一個靜態頁面生成器。Gulp真的足夠強大，但你必須學會駕馭它。html

這是這篇文章的主要目的。幫助你瞭解Gulp的基礎用法，助你早日完成一統天下的大業。前端

在咱們深刻了解以前，咱們先來講說爲何是Gulp。node

爲何是Gulp?

相似Gulp的工具，咱們一般稱之爲構建工具。現在最流行的兩個構建工具是Gulp和Grunt。webpack

已經有很是多的文章論證它們以前的異同，你隨便搜一下就知道了。git

主要區別是你如何使用他們構建自動化工做流。與Grunt相比，Gulp更加簡潔，執行效率更高。github

讓咱們繼續學習Gulp並搭建一個簡單的工做流。web

咱們將要作的

這篇文章的最後，你會擁有簡單的一個工做流：正則表達式

  • 搭建本地web服務器
  • 編譯Sass
  • 每當保存更改，自動刷新瀏覽器
  • 優化&壓縮資源

除此以外，你還將學會使用簡單命令鏈式調用多個任務。npm

安裝Gulp

安裝Gulp以前你須要先安裝Node.js。
若是你還沒安裝Node，你能夠在 這裏 下載。

安裝完Node.js，使用Terminal(終端，win下是cmd)用下面命令安裝Gulp

1
 
$ sudo npm install gulp -g

只有mac用戶才須要sudo命令，而且不要把$符號也複製進去，這不是你的菜。

npm install是指定從Node Package Manager(npm 你怕毛)安裝的命令。
-g表示全局安裝，這樣你在電腦上任何位置都能只用gulp 命令。

Mac 用戶須要管理員權限才能全局安裝，因此須要sudo。

接下來使用Gulp建立項目。

建立Gulp項目

首先，咱們新建一個project文件夾，並在該目錄下執行npm init命令：

1
 
$ npm init

 

npm init命令會爲你建立一個package.json文件，這個文件保存着這個項目相關信息。好比你用到的各類依賴（這裏主要是插件）
（終端會自動出現下面內容，這裏先隨便填就行）

npm-init

npm-init

 

建立完以後，咱們執行下面的命令：

1
 
$ npm install gulp --save-dev

這一次，咱們局部安裝Gulp。使用–save-dev，將通知計算機在package.json中添加gulp依賴。
package-json

package-json

 

執行完以後，gulp將建立node_modules文件夾，裏面有個gulp文件夾。

node-modules

node-modules

 

在正式開始以前，咱們再來明確下項目的目錄結構。

目錄結構

Gulp很是之靈活，理解它的內部工做，你就能在項目中駕輕就熟。
這篇文章，咱們使用通用的webapp目錄結構：
structure

structure

 

在這個結構中，咱們使用app文件夾做爲開發目錄（全部的源文件都放在這下面），dist文件夾用來存放生產環境下的內容。

這些文件名，你想怎麼起都行，但請務必記住你的目錄結構。
如今咱們來建立gulpfile.js。

第一個Gulp任務

（你須要先在根目錄下建立一個gulpfile.js文件）。

1
 
var gulp = require('gulp');

 

這行命令告知Node去node_modules中查找gulp包，先局部查找，找不到就去全局環境中查找。
找到以後就會賦值給gulp變量，而後咱們就可使用它了。

簡單的任務以下所示：

1
2
3
 
gulp.task('task-name', function() {
 // Stuff here
});

 

task-name 是給你的任務起的名字，稍後在命令行中執行gulp task-name，將運行該任務。

寫個HelloWorld，是這樣的：

1
2
3
 
gulp.task('hello', function() {
 console.log('Hello World!');
});

 

命令行中執行：

1
 
$ gulp hello

 

那麼將會輸出Hello World!。 夠簡單吧？

Gulp任務一般都會比這難一丁點，就一丁點。
一般會包含兩個特定的Gulp方法和一些列Gulp插件。

大概這樣：

1
2
3
4
5
 
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執行預處理

咱們使用gulp-sass插件來編譯Sass。
安裝插件的步驟是這樣的：

  • 使用npm install 命令安裝

    1
    		 
    $ npm install gulp-sass --save-dev

  • 在gulpfile中引入插件，用變量保存

    1
    2
    3
    		 
    var gulp = require('gulp');
    // Requires the gulp-sass plugin
    var sass = require('gulp-sass');

  • 在任務中使用

    1
    2
    3
    4
    5
    		 
    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目錄下，能夠這樣寫：

1
2
3
4
5
 
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'))
});

測試一下：

1
2
3
4
 
// styles.scss
.testing {
 width: percentage(5/7);
}

使用Terminal執行gulp sass,你將看到app/css/styles.css文件下會有下面的代碼：

1
2
3
4
 
/* styles.css */
.testing {
 width: 71.42857%;
}

styles.css是gulp智動爲咱們生成的。
percentage 是Sass的方法。

使用Sass就這麼簡單。可是一般咱們不止有一個scss文件。這時候可使用Node通配符。

Node中的通配符

通配符是一種匹配模式，容許你匹配到多個文件。不止是Node，不少平臺都有，有點像正則表達式。

使用通配符，計算機檢查文件名和路徑進行匹配。

大部分時候，咱們只須要用到下面4種匹配模式：

  1. *.scss：*號匹配當前目錄任意文件，因此這裏*.scss匹配當前目錄下全部scss文件
  2. **/*.scss：匹配當前目錄及其子目錄下的全部scss文件。
  3. !not-me.scss：！號移除匹配的文件，這裏將移除not-me.scss
  4. *.+(scss|sass)：+號後面會跟着圓括號，裏面的元素用|分割，匹配多個選項。這裏將匹配scss和sass文件。

那麼仍是上面的栗子，改造一下：

1
2
3
4
5
 
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

second-stylesheet

 

如今咱們能處理多個文件了，可是不想每次都要執行命令，怎麼辦？
Gulp就是爲懶人而生的，咱們可使用watch命令，自動檢測並執行。

監聽Sass文件

Gulp提供watch方法給咱們，語法以下：

1
2
 
// Gulp watch syntax
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);

 

將上面的栗子再改下：

1
2
 
// Gulp watch syntax
gulp.watch('app/scss/**/*.scss', ['sass']);

一般咱們監聽的還不僅是一個文件，把它變成一個任務：

1
2
3
4
 
gulp.task('watch', function(){
 gulp.watch('app/scss/**/*.scss', ['sass']);
 // Other watchers
})

執行gulp watch命令。
watch-start

watch-start

 

有了監聽，每次修改文件，Gulp都將自動爲咱們執行任務。

watch-compile

watch-compile

 

還不夠，修改完直接幫我刷新瀏覽器行嗎，我不想每次都要手動按Command + R;

使用Browser Sync自動刷新

Browser Sync 幫助咱們搭建簡單的本地服務器並能實時刷新瀏覽器，它還能 同時刷新多個設備

新插件？記住！安裝，引入，使用。

1
 
$ npm install browser-sync --save-dev

這裏沒有gulp-前綴，由於browser-sync支持Gulp，因此沒有人專門去搞一個給Gulp用。

1
 
var browserSync = require('browser-sync');

咱們建立一個broswerSync任務，咱們須要告知它，根目錄在哪裏。

1
2
3
4
5
6
7
 
gulp.task('browserSync', function() {
 browserSync({
 server: {
 baseDir: 'app'
 },
 })
})

咱們稍微修改一下以前的代碼，讓每次css文件更改都刷新一下瀏覽器：

1
2
3
4
5
6
7
8
 
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任務執行了再說。
語法以下：

1
2
3
 
gulp.task('watch', ['array', 'of', 'tasks', 'to', 'complete','before', 'watch'], function (){
 // ...
})

 

應用下來是這樣：

1
2
3
4
 
gulp.task('watch', ['browserSync', 'sass'], function (){
 gulp.watch('app/scss/**/*.scss', ['sass']);
 // Other watchers
})

 

如今你執行gulp watch命令，在執行完browserSync和Sass，纔會開始監聽。
bs-watch

bs-watch

 

而且如今瀏覽器的顯示的頁面爲app/index.html。你修改了styles.scss以後，瀏覽器將自動屬性頁面。
bs-change-bg

bs-change-bg

 

不止是scss修改的時候須要刷新瀏覽器吧？再改改：

1
2
3
4
5
6
 
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);
});

 

到目前爲止，咱們作了下面三件事：

  • 可運轉的web開發服務
  • 使用Sass預處理器
  • 自動刷新瀏覽器

接下來講說優化方面的技巧

優化CSS和JavaScript文件

說到優化的時候，咱們須要想到：壓縮，拼接。也就是減小體積和HTTP次數。
開發者面臨的主要問題是很難按照正確的順序合併文件。

1
2
3
4
5
6
 
<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會將多個文件拼接成單一文件，並輸出到相應目錄。

1
2
3
 
<!-- build:<type> <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

 

能夠是js,css,或者remove。若是你設爲remove,Gulp將不會生成文件。

指定產出路徑。

咱們想最終產出main.min.js。能夠這樣寫：

1
2
3
4
5
 
<!--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。

1
 
$ npm install gulp-useref --save-dev

 

引用

1
 
var useref = require('gulp-useref');

 

使用起來很是簡單：

1
2
3
4
5
6
 
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插件。

安裝

1
 
$ npm install gulp-uglify --save-dev

 

使用

1
2
3
4
5
6
7
8
 
// 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

useref-html

 

王祖藍：完美~

gulp-useref一樣能夠用在css上。除了壓縮，須要區分，其它內容同js同樣。因此咱們使用gulp-if來作不一樣處理。
使用gulp-minify-css壓縮css。

1
 
$ npm install gulp-if gulp-minify-css --save-dev

 

應用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 

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插件。

1
 
$ npm install gulp-imagemin --save-dev

 

引入，使用

1
2
3
4
5
6
 
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 插件能夠減小重複壓縮。

1
 
$ npm install gulp-cache --save-dev

引入、使用

1
2
3
4
5
6
7
8
9
10
 
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

1
 
npm install del --save-dev

 

引入、使用

1
2
3
4
 
var del = require('del');
gulp.task('clean', function() {
 del('dist');
});

 

可是咱們又不想圖片被刪除（圖片改動的概率不大）,啓用新的任務。

1
2
3
 
gulp.task('clean:dist', function(callback){
 del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});

 

這個任務會刪除，除了images/文件夾，dist下的任意文件。
爲了知道clean:dist任務何時完成，咱們須要提供callback參數。

在某些時候咱們仍是須要清除圖片，因此clean任務咱們還須要保留。

1
2
3
4
 
gulp.task('clean', function(callback) {
 del('dist');
 return cache.clearAll(callback);
})

 

噢，我真的是廢話太多了。把咱們學到的組合到一塊吧！

組合Gulp任務

廢話了這麼多，咱們主要有兩條線路。

第一條是開發過程，咱們便以Sass，監聽文件，刷新瀏覽器。

第二條是優化，咱們優化CSS,JavaScript,壓縮圖片，並把資源從app移動到dist。

開發任務咱們上面的watch已經組裝好了。

1
2
3
 
gulp.task('watch', ['browserSync', 'sass'], function (){
 // ... watchers
})

 

咱們也作一個來執行第二條線路。

1
2
3
 
gulp.task('build', [`clean`, `sass`, `useref`, `images`, `fonts`], function (){
 console.log('Building files');
})

 

可是這樣Gulp會同時觸發[]的事件。咱們要讓clean在其餘任務以前完成。
這裏要用到 RunSequence 。

1
 
$ npm install run-sequence --save-dev

用法以下：

1
2
3
4
5
 
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也容許你同時執行多個任務。

1
2
3
 
gulp.task('task-name', function(callback) {
 runSequence('task-one', ['tasks','two','run','in','parallel'], 'task-three', callback);
});

 

改造咱們的代碼：

1
2
3
4
5
6
 
gulp.task('build', function (callback) {
 runSequence('clean:dist',
 ['sass', 'useref', 'images', 'fonts'],
 callback
 )
})

 

開發任務咱們也用runSequence:

1
2
3
4
5
 
gulp.task('default', function (callback) {
 runSequence(['sass','browserSync', 'watch'],
 callback
 )
})

default? 若是你的任務名字叫作default，那麼只須要輸入gulp命令便可執行。

這裏是咱們最終的 代碼倉庫。

總結

上面的的內容搭建了一個基本的Gulp工做流。還有更精彩的內容等着你去開發。這裏提供些插件：

開發過程：

優化：

除了開發和優化過程，你可使用gulp-jasmine寫JavaScript單元測試，甚至使用gulp-rync直接部署dist文件到生產環境。

譯者的話

花了點時間去學習Gulp，這篇文章是我找到比較全面的，很是適合新手入門。

Gulp其實很是簡單，多玩一下，你就能徹底掌握它了，有能力的話，能夠嘗試開發Gulp插件。

不過正如做者所說，Gulp的強大之處遠不止這些，因此他出了本電子書 automating your workflow ，能夠幫助你搭建屬於本身的工做流，剩下時間去喝咖啡，有興趣的能夠去看看。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程