TypeScript自動化工作流程（中）
自動化任務工具
自動化任務工具是用來自動化地執行開發過程中需要重複進行的任務。這些任務包括編譯TS檔案、壓縮JS檔案等等。目前較為流行的兩個JavaScript自動化工具分別是Grunt和Gulp。
Grunt的外掛數相對較多，在Grunt中，我們使用檔案作為任務的輸入和輸出。
Gulp中，我們使用的 流 的方式來構建系統。Gulp外掛更傾向於使用程式碼來描述任務，這使得Gulp的可讀性更高。
本人選擇Gulp作為自動化任務工具，是因為Gulp更加容易上手，配置起來更簡潔。
如果你想了解更多Grunt的內容，你可以訪問其官網：http://gruntjs.com/ ,或者去慕課網進行相關的課程學習：
Gulp
安裝
全域性安裝：
使用cnpm全域性安裝gulp：
cnpm install -g gulp區域性安裝
使用npm區域性安裝gulp：
npm install gulp --save-devgulp設計的時候就已經規定了，必須要全域性安裝，然後再在專案中在進行區域性安裝，否則會出現 本地找不到gulp 的錯誤提示。
安裝完成之後，會出現一個node_modules的資料夾，裡面包含了gulp的相關依賴。
建立Gulp專案
在專案的目錄下執行npm init 命令：
目錄結構
通用的webapp目錄結構：
在這個結構中，我們使用app資料夾作為開發目錄（所有的原始檔都放在這下面），dist資料夾用來存放生產環境下的內容。
建立Gulp任務
在根目錄下建立一個gulpfile.js檔案，開啟檔案，輸入下面這行程式碼：
var gulp = require('gulp');這行命令告知Node去node_modules中查詢gulp包，先區域性查詢，找不到就去全域性環境中查詢。找到之後就會賦值給gulp變數，然後我們就可以使用它了。
我們來建立一個簡單的任務：
gulp.task('task-name', function() {
// Stuff here task-name 是給你的任務起的名字，稍後在命令列中執行gulp task-name，將執行該任務。
來一個最經典的輸出——hello，world！
gulp.task('hello', function() {
console.log('Hello World!');
});執行任務
gulp hello
Gulp執行預處理
我們使用gulp-sass外掛來編譯sass。
- 安裝gulp-sass
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,執行sass，轉化成css
.pipe(gulp.dest('destination'))//輸出到目標資料夾中，如果目標資料夾不存在則建立一個新的資料夾
});我們需要給sass任務提供原始檔和輸出位置。所以我們先在專案中建立app/scss資料夾，裡面有個tank.scss檔案。
這個檔案將在gulp.src中用到。
sass處理之後，我們希望它生成css檔案併產出到app/css目錄下，可以這樣寫：
gulp.task('sass', function(){
return gulp.src('app/scss/tank.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('app/css'))
});
Node中的萬用字元
通常我們不止有一個scss檔案。這時候可以使用Node萬用字元。
使用萬用字元，計算機檢查檔名和路徑進行匹配。
大部分時候，我們只需要用到下面4種匹配模式：
*.scss：*號匹配當前目錄任意檔案，所以這裡*.scss匹配當前目錄下所有scss檔案**/*.scss：匹配當前目錄及其子目錄下的所有scss檔案。!not-me.scss：!號移除匹配的檔案，這裡將移除not-me.scss*.+(scss|sass)：+號後面會跟著圓括號，裡面的元素用|分割，匹配多個選項。這裡將匹配scss和sass檔案。
根據萬用字元，我們可以讓scss目錄下的所有scss轉變成css檔案：
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css'))
})gulp-tslint和gulp-typescript
為了檢查我們的TypeScript程式碼是否規範，我們可以安裝gulp-tslint。
gulp-typescript 外掛用於編譯TS程式碼。
gulp-tslint
- 安裝
cnpm install gulp-tslint --save-dev- 引用和使用
var tslint=require('gulp-tslint');
gulp.task('lint',function(){
gulp.src([
'./app/ts/**/*.ts'
])
.pipe(tslint())
.pipe(tslint.report('verbose'))
})如果你使用的是 visual studio code ，那麼你可以直接在擴充套件中安裝TSLint 外掛。
個人更傾向與這種方法，這樣你就不必為每個專案安裝這種外掛的依賴了。（安裝之後記得重新載入一下vscode）
gulp-typescript
- 安裝
cnpm install gulp-typescript --save-dev- 引用
var ts = require('gulp-typescript');- 新增任務
gulp.task('tsProject', function () {
return gulp.src('app/**/*.ts')
.pipe(ts({
noImplicitAny: true,
outFile: 'output.js'
}))
.pipe(gulp.dest('app/js'));
});我們可以新增一些引數，來控制TS檔案的編譯效果
| 引數 | 作用 |
|---|---|
| outFile (string) | 生成一個JavaScript和一個定義檔案。它僅僅在沒有模組系統（module system）時被啟用。 |
| outDir (string) | 將輸出移動到不同的（虛擬）目錄。請注意，您仍然需要gulp.dest將輸出寫入磁碟。 |
| noImplicitAny (boolean) | 預設為false。用隱含的“any”型別警告表示式和宣告。 |
| suppressImplicitAnyIndexErrors (boolean) | 預設為false。壓縮 --noImplicitAny 索引缺少索引簽名的物件的錯誤。 |
| noLib (boolean) | 預設為false。不包括預設的 lib（包含 - Array，Date等的定義） |
| lib (string[]) | 要包含在編譯中的庫檔案列表。 |
| target (string) | 指定ECMAScript目標版本：“ES3”（預設），“ES5”或“ES6”。 |
| module (string) | 指定模板程式碼生成：”commonjs”,’amd’,’umd’或’system’ |
| jsx (string) | 指定jsx程式碼生成：’react’或 ‘preserve’ (TS1.6+). |
| declaration (boolean) | 預設為false。生成相應的.d.ts 檔案。 |
| removeComments (boolean) | 預設為false。輸出檔案將不含註釋。 |
| allowJs | 預設為false。允許JavaScript檔案被編譯。 |
| rootDir | 指定輸入檔案的根目錄。只能用來控制outDir 輸出檔案的目錄結構 |
監聽檔案
我們可以手動更新scss檔案，也可以監聽它，然後讓他自動執行命令。
Gulp提供watch方法給我們，語法如下：
gulp.watch(glob [, opts], tasks) 或
gulp.watch(glob [, opts, cb])glob
型別： String or Array
一個 glob 字串，或者一個包含多個 glob 字串的陣列，用來指定具體監控哪些檔案的變動。
opts
型別： Object
傳給 gaze 的引數。
tasks
型別： Array
需要在檔案變動後執行的一個或者多個通過 gulp.task() 建立的 task 的名字，
cb(event)
型別： Function
每次變動需要執行的 callback。
現在新增一個監聽任務：
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
// Other watchers
})
Browser Sync自動重新整理
對於開發者來說，沒有最懶最有更懶。
Browser Sync 能讓瀏覽器實時、快速響應檔案的更改（html、js、css、sass、less等）並自動重新整理頁面。更重要的是 Browsersync可以同時在PC、平板、手機等裝置下進項除錯。
BrowserSync可以同時同步重新整理多個瀏覽器，更神奇的是你在一個瀏覽器中滾動頁面、點選按鈕、輸入框中輸入資訊等使用者行為也會同步到每個瀏覽器中。
安裝Browser Sync
npm install browser-sync --save-dev這裡沒有gulp-字首，因為browser-sync支援Gulp，所以沒有人專門去搞一個給Gulp用。
browserSync服務模式
browserSync有兩種服務模式，一種是伺服器模式，一種是代理模式。
伺服器模式
如果只希望在對某個css、html檔案進行修改後會同步到瀏覽器裡。那麼只需要執行命令列工具，進入到該專案（目錄）下，並執行相應的命令：
// --files 路徑是相對於執行該命令的專案（目錄）
browser-sync start --server --files "css/*.css"如果需要監聽多個型別的檔案，則需要用逗號隔開。
// --files 路徑是相對於執行該命令的專案（目錄）
browser-sync start --server --files "css/*.css, *.html"
// 如果你的檔案層級比較深，您可以考慮使用 **（表示任意目錄）匹配，任意目錄下任意.css 或 .html檔案。
browser-sync start --server --files "**/*.css, **/*.html"代理模式
如果我們已經有其他本地伺服器環境PHP或類似的，則需要使用代理模式。 BrowserSync會通過代理URL(localhost:3000)來檢視指定的網站。
// 主機名可以是ip或域名
browser-sync start --proxy "主機名" "css/*.css"Browsersync和Gulp
在 gulpfile.js 中引入browsersync。
我們不推薦這樣引用：
var browserSync = require('browser-sync')我們推薦這樣引用：
var browserSync = require('browser-sync').create();前者我們仍然可以用，但是我們更推薦呼叫.create()，因為這意味著你將獲得一個唯一的引用，同時還能允許你建立多個伺服器或者代理。
關於create 的更多操作資訊請點這裡API-create。
// 如果你是靜態伺服器
gulp.task('browser-sync', function() {
//啟動browsersnyc靜態伺服器
browserSync.init({
server: {
baseDir: "./"
}
});
});
// 如果你是代理伺服器
gulp.task('browser-sync', function() {
//啟動browsersnyc代理伺服器
browserSync.init({
proxy: "你的域名或IP"
});
});通過流的方式建立任務流程，我們可以在任務完成之後呼叫 reload （過載），這樣所有的瀏覽器都會被告知變化並實時更新。但是 Browersync 僅僅關心編譯完成的CSS，這就需要我們在gulp.dest 後面呼叫.steam() 。
根據上述內容，我們修改gulpfile.js之後的樣子：
var gulp=require('gulp');
var sass=require('gulp-sass');
var browserSync = require('browser-sync').create();
// 靜態伺服器 + 監聽 scss/html 檔案
gulp.task('serve',['sass'],function(){
browserSync.init({
server:"./app"
});
gulp.watch('app/scss/*.scss',['sass']);//監聽scss檔案，發生變動啟動任務sass
gulp.watch('app/*.html').on("change",browserSync.reload);//監聽html檔案，發生變動觸發過載
})
//編譯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('default', ['serve']);這樣當我們修改 tank.scss ，將會在瀏覽器中得到最直觀的展示。
儲存了三次，均及時檢測到，同時完成編譯、瀏覽器過載。
當然，我們還可以新增對js(ts)檔案的監聽：
gulp.task('tsproject',()=>{
return gulp.src('app/ts/*.ts')
.pipe(ts({
noImplicitAny: true,
outFile: 'test3.js'
}))
.pipe(gulp.dest('app/js'))
.pipe(browserSync.reload({
stream: true
}))
})
// 靜態伺服器 + 監聽 scss/html/js（ts） 檔案
gulp.task('serve',['sass'],function(){
browserSync.init({
server:"./app"
});
gulp.watch('app/scss/*.scss',['sass']);//監聽scss檔案，發生變動啟動任務sass
gulp.watch('app/ts/**/*.ts',['tsproject']);//監聽ts檔案，發生變動啟動任務tsproject
gulp.watch('app/*.html').on("change",browserSync.reload);//監聽html檔案，發生變動觸發過載
gulp.watch('app/js/*/*.js').on('change',browserSync.reload)//監聽js檔案，發生變化觸發過載
})目前我們已經通過gulp做到了：
- 預處理檔案（sass）
- 監聽檔案變化(html、scss/css、js）
- 自動重新整理瀏覽器（方便檢視修改效果）
開發的流程已經講完，接下來我們來看看如何通過gulp優化專案。
優化CSS和JavaScript檔案
目前優化分成兩步，第一步是合併檔案，第二步是壓縮檔案。
合併——gulp-useref
通過合併，能夠減少CSS和JavaScript的檔案數量，從而減少HTTP請求次數，達到優化的作用。
gulp-useref 能將HTML頁面中的js、css引用進行合併。即便是js檔案的路徑不同，它一樣可以進行合併。
安裝gulp-useref
cnpm install --save-dev gulp-useref現在我們要對index.html 中的引用檔案進行合併。
合併之前：
配置HTML檔案
在引用和新增任務之前我們需要配置一下HTML檔案。
配置的語法如下：
<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->| 引數 | 作用 |
|---|---|
| type | 合併檔案的型別，包括js、css或者remove。remove型別意味著gulp不會生成檔案。 |
| alternate search path | 預設情況下，輸入檔案的路徑是相對於處理的檔案的。當然我們也可以用搜索路徑來替代輸入檔案的路徑。 |
| path | 輸出目標，即優化之後的檔案輸出的位置 |
| parameters | 可以被新增的額外的標籤。如果型別是css，則預設情況下會新增rel='stylesheet'。我們可以在js型別的檔案中新增屬性async，這樣生成的js檔案會自帶非同步屬性。 |
按照上述語法進行配置：
<!-- build:css css/main.css -->
<link rel="stylesheet" type="text/css" href="css/tank.css">
<!-- endbuild --> <!-- build:js js/main.js -->
<script src='js/test1.js'></script>
<script src='js/test2.js'></script>
<script src='js/test3.js'></script>
<!-- endbuild -->引用和新增任務
var useref = require('gulp-useref');
gulp.task('useref',function(){
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
})dist目錄代表著生產目錄，所以我們通過 gulp.dest('dist') 將合併之後的檔案輸出到dist目錄中。
啟動任務
gulp useref合併之後
壓縮——gulp-uglify、gulp-clean-css
gulp-uglify 可以將js檔案進行壓縮，
gulp-clean-css 可以壓縮css檔案。
壓縮js檔案
- 安裝gulp-uglify
cnpm install --save-dev gulp-uglify- 引用 gulp-uglify
var uglify=require('gulp-uglify');- 新增任務
gulp.task('jsmin', function () {
gulp.src(['app/js/*.js'])
.pipe(uglify({
mangle: true,//型別：Boolean 預設：true 是否修改變數名
compress: true,//型別：Boolean 預設：true 是否完全壓縮
}))
.pipe(gulp.dest('dist/js'));
});uglify可以新增一些引數，以獲得不同的壓縮效果或提示。
| 引數 | 作用 |
|---|---|
| warings | 預設為false。設定為true 將返回result.warnings的壓縮警告。使用verbose 值可以獲得更多警告細節。 |
| parse | 預設為{}。選擇解析方式。如果希望指定其他parse options，請傳遞一個物件。 |
| compress | 預設為{}。選擇壓縮方式。如果輸入false，則跳過完全壓縮。更多細節操作，請訪問：compress options |
| mangle | 預設為true。是否壓縮變數名。如果輸入false，則跳過壓縮變數名。更多細節操作，請訪問：mangle options |
| output | 預設是為null。選擇輸出方式。預設設定為最佳壓縮。更多細節操作，請訪問：output options |
| toplevel | 預設為false。是否啟用頂級壓縮。如果你希望啟用最頂級的變數和函式名的壓縮，同時刪除未使用的變數和函式，請設定為true。 |
| nameCache | 預設為null。如果你希望通過minify() 的多個呼叫來快取壓縮的變數和函式，則傳遞一個空物件{}或以前使用的nameCache物件。注意：這是一個讀/寫屬性。minify()將讀取此物件的名稱快取狀態並在壓縮期間進行更新，以便它可以被重用或由使用者外部保留。 |
| ie8 | 預設為false。是否支援IE8。設定為true將支援IE8。 |
| keep_fnames | 預設為false。是否改變函式名。設定為true將會防止丟棄或改變函式名。該方法依賴Function.prototype.name |
如果你對壓縮沒有什麼具體要求，那麼使用預設模式即可。
gulp.task('jsmin', function () {
gulp.src(['dist/js/*.js'])
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});壓縮css
gulp-minify-css 用於壓縮css，但是gulp目前更推薦使用 gulp-clean-css 外掛來壓縮css。
- 安裝gulp-clean-css
cnpm install gulp-clean-css --save-dev- 引用gulp-clean-css
var cleancss=require('gulp-clean-css')- 新增任務
gulp.task('minify-css', () => {
return gulp.src('app/css/*.css')
.pipe(cleancss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
});我們可以在cleancss中加上不同的引數，以獲得不同的壓縮效果。
| 引數 | 作用 |
|---|---|
| compatibility | 控制使用相容模式。預設是ie10+，效果等同於compatibility: '*',相容Internet Explorer 10+模式。你還可以使用ie9、ie8、ie7這幾種模式。 |
| fetch | 控制處理遠端請求的功能。更多操作資訊，請訪問fetch option |
| format | 控制輸出的css格式。預設為false。預設情況下輸出CSS的格式不帶任何空格。更多操作細節，請訪問format |
| inline | 控制@import內聯規則; 預設為local;更多操作細節，請訪問inline |
| level | 控制優化等級。預設為1。該引數選項包括0、1、2三種。0 意味著不優化，1級優化選項通常是安全的，而2級優化對大多數使用者來說應該是安全的。更多細節操作，請訪問Optimization levels |
我們可以一個個啟動任務，也可以讓它識別不同檔案（css和js檔案）自動進行合併、壓縮。
- 安裝gulp-if
cnpm install gulp-if --save-dev- 引用gulp-if
var gulpif=require("gulp-if")- 使用語法：
gulpif(condition, stream [, elseStream, [, minimatchOptions]]);
//例如gulpif(condition, uglify(), beautify())- 之前的合併、壓縮任務
gulp.task('useref',function(){
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulp.dest('dist'))
})
gulp.task('jsmin', function () {
gulp.src(['dist/js/*.js'])
.pipe(uglify({
mangle: true,//型別：Boolean 預設：true 是否修改變數名
compress: true,//型別：Boolean 預設：true 是否完全壓縮
}))
.pipe(gulp.dest('dist/js'));
});
gulp.task('minify-css',()=>{
gulp.src(['dist/css/*.css'])
.pipe(cleancss({compatibility: 'ie8'}))
.pipe(gulp.dest('dist/css'));
})- 優化之後的合併、壓縮任務
gulp.task('minify',()=>{
return gulp.src('app/*.html')
.pipe(useref())
.pipe(gulpif("*.js",uglify({
mangle: true,
compress: true,
})))
.pipe(gulpif("*.css",cleancss({
compatibility: 'ie8'
})))
.pipe(gulp.dest('dist'));
})圖片優化
除了css、js的檔案合併、壓縮之外，自然還有圖片優化。
圖片優化使用gulp-imagemin
- 安裝 gulp-imagemin
cnpm install --save-dev gulp-imagemin- 引用gulp-imagemin
var imagemin=required('gulp-imagemin');- 新增任務
gulp.task('imagemin', () =>
gulp.src('app/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);我們可以新增一些引數，從而控制圖片壓縮效果。
引數包括圖片型別和引數。
- 圖片型別
| 引數 | 作用 |
|---|---|
| gifsicle | 控制 GIF 圖片的壓縮效果。 |
| jpegtran | 控制 JPEG 圖片的壓縮效果。 |
| optipng | 控制 PNG 圖片的壓縮效果。 |
| svgo | 控制 SVG 圖片的壓縮效果。 |
- 圖片型別的引數
| 圖片型別 | gifsicle | jpegtran | optipng | svgo |
|---|---|---|---|---|
| 引數 | ||||
| ① | interlaced： 預設為 false。是否採用漸進渲染。圖片渲染分成兩種，一種是線性渲染，另一種是交錯渲染（又稱漸進渲染）。 關於圖片渲染的異同，你可以在張鑫旭老師的文章中體驗一下。 |
progressive： 預設為 false。是否採用漸進渲染。 |
bitDepthReduction： 預設為 true。應用bit深度減少。 |
SVG Optimizer簡寫為SVGO，是一個基於node.js的外掛。它可以刪除SVG檔案中冗餘和無用的資訊，同時不影響SVG渲染效果。具體的引數型別，請訪問：svgo |
| ② | optimizationLevel： 預設為 1。選擇壓縮等級，共有三個等級，1到3。優化級別決定完成多少優化，更高的優化級別將會花費更多的時間，但卻能獲得更好的優化結果。 |
arithmetic： 預設為 false。是否採用算數編碼。 |
optimizationLevel： 預設為 3。選擇壓縮等級，共有八個等級，0到7。0級優化最少，影象的深度、顏色型別都不會發生改變，也不會對現有的IDAT資料流進行重新壓縮。從1級別開始對單個IDAT進行壓縮，級別越高，IDAT壓縮越多。 |
|
| ③ | color：Type：number。減少每個輸出的GIF圖片中的顏色數。顏色數必須在2到256之間。 |
colorTypeReduction： 預設為 true。應用顏色型別減少。 |
||
| ④ | paletteReduction： 預設為 true。減少調色盤資料塊。 |
根據圖片型別和引數，我們來修改壓縮效果
gulp.task('imagemin', () =>{
return gulp.src('app/images/*')
.pipe(imagemin([
imagemin.gifsicle({interlaced: true,optimizationLevel:3}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(gulp.dest('dist/images'))
});注：一般來說壓縮圖片都比較慢，所以為了防止重複壓縮圖片，我們可以使用 gulp-cached 外掛。
清除多餘檔案
在開發、壓縮檔案之後，是清理多餘檔案。
del 可以幫我們完成這項工作。
- 安裝del
cnpm install del --save-dev- 引用del
var del=require('del');假如我們想要刪除dist目錄下的檔案，那麼可以這樣新增任務
gulp.task('clean', function() {
del('dist');
});但是我們又不想圖片被刪除，我們可以新增新任務
gulp.task('clean:dist', function(){
return del(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});你可以根據自己實際情況來進行檔案的刪除。
總結
gulp自動化任務分成兩條路線
第一條是開發過程路線，預處理sass、ts檔案，監聽檔案，自動重新整理瀏覽器。
第二條是優化，優化css、壓縮js和圖片等等，同時刪除不必要的檔案。
如果我們想讓gulp.task一條條執行，我們需要可以使用 run-sequence 外掛。
正常情況下，如果我們這樣寫：
gulp.task('build', [`clean`, `sass`, `minify`,`imagemin`], function (){
console.log('Building files');
})Gulp會同時觸發[]的事件，這不是我們想要的結果。來試試run-sequence 的效果。
- 安裝run-sequence
cnpm 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-three。
如果你要同時執行多個任務，則可以這樣
gulp.task('task-name', function(callback) {
runSequence('task-one', ['task-two', 'task-three'], callback);
});Gulp就會先執行task-one，然後非同步執行task-two和task-three。
- 合併之後的程式碼（以第二條為例子）
gulp.task("optimize",()=>{
runSequence('clean:dist',['minify','imagemin'])
})注意：如果你沒有在gulp.task中正確使用return，那麼任務將會終止。
例如你在clean：dist中沒有使用return
gulp.task('clean:dist', function(callback){
del(['dist/**/*', '!dist/images', '!dist/images/**/*']);
});那麼 runSequence在執行完clean:dist任務之後將會終止，不會繼續執行接下來的任務。
其他開發外掛
- 使用
Autoprefixer，你不再需要寫CSS瀏覽器核心字首 - 增加
Sourcemaps，讓你更方便的除錯Sass,coffeescript - 使用
sprity建立精靈圖 gulp-changed只允許通過修改的檔案Babel或Traceur寫ES6Browserify,webpack,jspm模組化JavaScriptHandlebars,Swing模組化Htmlrequire-dir分割gulpfile成多個檔案gulp-moderinizr自動生成Modernizr指令碼unCSS移除多餘的CSSCSSO更深入地優化CSSCritical生成行內CSS