Gulp 入門教學 - 壓縮 JavaScript 與 CSS

現在開發網頁大多會引用很多第三方的 JavaScript 跟 CSS 資源，當訪客瀏覽時就會啪啦啦的向主機發起下載這些資源的請求(Request)。其實瀏覽器跟主機同時間能處理的請求是有限制的，所以這樣的動作多少會影響到效能。

筆者現在要來教大家如何將這些 JavaScript 跟 CSS 資料分別合併同一支檔案，並且順便將檔案進行壓縮來節省檔案大小。

首先建立一個練習用的 gulp2 資料夾，在裡面的結構是像這樣

會用兩個 CSS 跟兩個 JS 檔案只是為了教當有多個檔案時要怎樣合併起來而已，如果懶的建立的話，可以直接下載練習包

接著我們就來安裝等等要用到的 Gulp 及相關套件，先執行安裝指令

1

npm install gulp gulp-concat gulp-uglify gulp-uglifycss

我們這次除了 Gulp 之外，還多裝了 3 個套件，它們的功用分別是：
gulp-concat: 合併檔案
gulp-uglify: 壓縮混淆 JavaScript 檔案
gulp-uglifycss: 壓縮 CSS 檔案

再來一樣是在 gulp2 資料夾中新增一個 gulpfile.js，然後用編輯器開啟。先把要用到的套件先引用進來：

1
2
3
4

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var uglifycss = require('gulp-uglifycss');

接著先建立一個合併及壓縮 JavaScript 的任務，所以繼續編輯 gulpfile.js：

1
2
3
4
5
6

gulp.task('uglify:js', function(){
	return gulp.src('src/js/*.js')
		.pipe(concat('app.min.js'))
		.pipe(uglify())
		.pipe(gulp.dest('dist/js'));
});

先來解釋一下這段語法做了什麼事：
筆者建立了一個叫做 gulify:js 的任務。然後先用 gulp.src('src/js/*.js') 來選取要加工處理的檔案，像筆者就把 src/js/ 中屬於 *.js 的選取起來，接著串 concat('app.min.js') 來把剛合併的內容寫入到指定的檔案中。再來就是使用 uglify() 將檔案內容進行壓縮混淆，最後就是檔案存檔到 dist/js 資料夾中啦。

好了好了，先來執行這 uglify:js 任務吧

1

gulp uglify:js

如果沒錯誤的話，就會看到多一個 dist 資料夾及我們的 app.min.js 了

各位可以開啟 app.min.js 來看看是不是真的是原本的 JavaScript 內容，且是不是真的有壓縮了！

接著讓我們繼續建立處理 CSS 的任務：

1
2
3
4
5
6

gulp.task('uglify:css', function(){
	return gulp.src('src/css/*.css')
		.pipe(concat('style.css'))
		.pipe(uglifycss())
		.pipe(gulp.dest('dist/css'));
});

這任務名稱是 uglify:css，主要動作是跟處理 JavaScript 的一樣，只是把 uglify() 改用 uglifycss() 而已。OK~一樣來執行看看

1

gulp uglify:css

執行完成後會在 dist 資料夾中又多出一個 css 資料夾及 style.css 檔案

各位一樣可以開啟 style.css 看看內容是否正確且壓縮過了！

雖然這兩個任務都能正確的執行，但要分別下指令就有點麻煩，所以我們來建立一個專門用來進行壓縮 JavaScritp 與 CSS 的任務，同時順便將 src/index.html 一併搬到 dist/index.html 吧：

1
2
3
4

gulp.task('uglify', ['uglify:js', 'uglify:css'], function(){
	return gulp.src('src/index.html')
		.pipe(gulp.dest('dist'));
});

使用 gulp.task() 時，第二個參數可以是一個陣列，這陣列裡面放的是指要執行這任務前要先執行哪些任務，當執行完後就接著執行第三個參數指派的動作(如果有給的話)。

快來執行看看

1

gulp uglify

是不是都有乖乖的執行呢~

如果是下載練習包的話，我事前已經在 index.html 中先寫好引用 app.min.js 跟 style.css 了，所以執行開啟瀏覽的話...