嘴對嘴教你使用Gulp

摘要： 什麼是Gulp? Gulp 是一個前端自動化工具，開發者可以使用它來處理常見任務： 搭建web伺服器 檔案儲存時自動過載瀏覽器 使用前處理器如Sass、LESS 優化資源，比如壓縮CSS、JavaScript、壓縮圖片 安裝Gul...

什麼是Gulp?

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

• 搭建web伺服器
• 檔案儲存時自動過載瀏覽器
• 使用前處理器如Sass、LESS
• 優化資源，比如壓縮CSS、JavaScript、壓縮圖片

安裝Gulp

1. 安裝Gulp之前你需要先安裝Node.js

2. 安裝 gulp：

$ npm install gulp -g// 全域性安裝gulp
$ npm install gulp --save-dev// 作為專案的開發依賴（devDependencies）安裝
複製程式碼

建立Gulp專案

首先，在新建專案資料夾目錄下執行 npm init 命令：

<!-- 將建立一個package.json檔案，儲存著這個專案相關資訊和外掛依賴。 -->
$ npm init 
複製程式碼

補充專案相關資訊後，進行區域性安裝Gulp

<!-- 使用—save-dev，將在package.json中新增gulp依賴 -->
<!-- 執行完之後，gulp將建立含有gulp資料夾的node_modules資料夾-->
$ npm install gulp --save-dev
複製程式碼

在package.json自動生成如下的Json內容：

{
"name": "gulpdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "jw",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
}
}
複製程式碼

Gulp開發構建

建立通用的webapp目錄結構,並明確下專案的目錄結構。（此例目錄結構作為學習示範，非固定）

|-app/<!--app資料夾作為開發目錄（所有的原始檔都放在這下面）-->
|-css/
|-js/
|-scss/
|-images/
|-fonts/
|-index.html
|-dist/<!--dist資料夾用來存放生產環境下的內容 -->
|-gulpfile.js<!--配置gulp工具的搭建和使用 -->
|-node_modules/
|-package.json
複製程式碼

在專案的gulpfile.js檔案中：

var gulp = require('gulp');
複製程式碼

這行命令告知Node去node_modules中查詢gulp包，先區域性查詢，否則在全域性環境中查詢，並賦值使用gulp變數

牛刀小試：

gulp.task('hello', function() {
console.log('Hello World!');
});
複製程式碼

命令列中執行： $ gulp hello ，將會輸出Hello World.

使用sass預處理外掛

1. 安裝

$ npm install gulp-sass --save-dev
複製程式碼

2. 引入外掛

var gulp = require('gulp');
var sass = require('gulp-sass');
複製程式碼

3. 使用

// 將對styles.scss進行預處理後生成styles.css
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss') //來源
.pipe(sass())//執行sass()
.pipe(gulp.dest('app/css')) //生成
});
複製程式碼

補充：【常用的4種匹配模式】 *.scss ： * 號匹配當前目錄任意檔案，所以這裡 *.scss 匹配當前目錄下所有scss檔案 **/*.scss ：匹配當前目錄及其子目錄下的所有scss檔案。 !not-me.scss ：！號移除匹配的檔案，這裡將移除not-me.scss *.+(scss|sass) ：+號後面會跟著圓括號，裡面的元素用|分割，匹配多個選項。這裡將匹配scss和sass檔案。

使用Browser Sync外掛自動重新整理

1. 安裝

<!-- 這裡沒有gulp-字首，因為browser-sync支援Gulp -->
$ npm install browser-sync --save-dev
複製程式碼

2. 引入

var browserSync = require('browser-sync');
複製程式碼

3. 使用

gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: 'app'//需要告知它，根目錄在哪裡
},
})
})
複製程式碼

使用watch監聽方法

Gulp提供watch方法給我們，語法如下：

gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
複製程式碼

上例中的sass就可以改造成這樣：

gulp.watch('app/scss/**/*.scss', ['sass']);
複製程式碼

通常我們監聽的還不只是一個檔案，把它變成一個任務：

gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
複製程式碼

執行 gulp watch 命令監聽，每次修改檔案，Gulp都將自動為我們執行任務。 4. 綜合使用

我們稍微修改一下之前的sass設定，讓每次css檔案更改都重新整理一下瀏覽器：

gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss') 
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true//每次修改會自動重新整理瀏覽器
}))
});
複製程式碼

使用修改監聽。

gulp.task('watch', function (){
gulp.watch('app/scss/**/*.scss', ['sass']);
// 當HTML或JS檔案改變時，也重新載入瀏覽器
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
複製程式碼

到目前為止，我們做了下面三件事：

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

Gulp打包優化構建

將開發目錄資源移到打包生產目錄

<!-- 以字型資源舉例 -->
gulp.task('fonts', function() {
return gulp.src('app/fonts/**/*')
.pipe(gulp.dest('dist/fonts'))
})
複製程式碼

多檔案拼接成單一檔案並壓縮

1. 安裝

npm install gulp-useref --save-dev //檔案拼接外掛
npm install gulp-uglify --save-dev //js壓縮外掛
npm install gulp-minify-css --save-dev //css壓縮外掛
npm install gulp-if --save-dev //區分處理外掛
複製程式碼

2. 引用

var useref = require('gulp-useref')
var uglify = require('gulp-uglify')
var minifyCSS = require('gulp-minify-css')
var gulpIf = require('gulp-if')
複製程式碼

3. 使用

--index.html--

<!--build:css css/main.min.css -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/styles.1.css">
<!-- endbuild -->

<!--build:js js/main.min.js -->
<script src="js/lib/a-library.js"></script>
<script src="js/lib/b-library.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
複製程式碼

--gulpfile.js--

gulp.task('useref', function(){
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpIf('*.css', minifyCSS()))
.pipe(gulpIf('*.js', uglify()))
.pipe(gulp.dest('dist'))
});
複製程式碼

圖片優化（gulp-imagemin）

1. 安裝

$ npm install gulp-imagemin --save-dev
$ npm install gulp-cache --save-dev//減少重複壓縮
複製程式碼

2. 引入

var imagemin = require('gulp-imagemin')
var cache = require('gulp-cache')
複製程式碼

3. 使用

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
複製程式碼

2. 引入

var del = require('del')
複製程式碼

3. 使用

//情景1：全部清除
gulp.task('clean', function() {
del('dist');
});

//情景2：不清除圖片檔案
gulp.task('clean:dist', function(callback){
del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});
複製程式碼

Gulp組合

gulp.task('build', [`clean:dist`, `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('build', function (callback) {
runSequence('clean:dist',
['sass', 'useref', 'images', 'fonts'],
callback
)
})
複製程式碼

// 開發過程
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'watch'],
callback
)
})
複製程式碼