Grunt JS – 前端壓縮 JavaScript 與 CSS 工具
Grunt
算是一個用來發佈前端程式的部屬工具。例如壓縮 JS、CSS。
事前準備
- 必須要先安裝好 Node.js 與 npm (安裝 Bower 步驟時應該會一起安裝了)
- 安裝 Bower 套件管理程式
透過 NPM 安裝 GruntJS
npm install -g grunt-cli
*若要移除的話是 npm uninstall -g grunt-cli
添加設定
參考官網。我們會需要一些相關的外掛，所以在你的專案資料夾內的根目錄，添加文件 package.json
{
"name": "my-web-project",
"version": "1.0.0",
"description": "GruntJS build task",
"private": true,
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.10.0",
"grunt-contrib-concat": "~0.5.1",
"grunt-contrib-watch": "~0.4.0",
"grunt-contrib-cssmin": "~0.14.0"
}
}
這邊有幾項套件可以依照需求添加，還有更多套件可參考官方的套件管理列表。上面的範例我挑著用喔！版本設定也可以指定 『*』
- grunt-contrib-uglify 壓縮 JS
- grunt-contrib-qunit 單元測試
- grunt-contrib-concat 合併檔案
- grunt-contrib-jshint JS的語法檢查
- grunt-contrib-watch 監控檔案異動
- grunt-contrib-cssmin 壓縮CSS
透過 npm 的指令，將 Grunt 的相依套件都一併的自動下載與安裝。
npm install
建立 Task Script 的設定檔
Grunt JS 會依照這個文件的規則做壓縮。所以我們要在這裡修改想要的設定。官方提供的範例在這裡。但因為我們有使用一些外掛套件，所以參考了網友要修改成以下的 Gruntfile.js。一樣放在根目錄。
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
// 引用 package.json 中的參數
pkg: grunt.file.readJSON('package.json'),
// 設定 JavaScript 壓縮 task
uglify: {
options: {
// 設定壓縮後檔頭要插入的註解
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
// 使用 SourceMap 並且將 JS Source 與 Map 檔案放在一起
sourceMap: true,
sourceMapIncludeSources: true
},
my_target: {
files: [{
// 啟用擴展
expand: true,
// 來源的路徑
cwd: 'plugin/JS',
// 將不是 .min.js 的檔案全部進行壓縮
src: ['**/*.js', '!*.min.js'],
// 輸出的路徑
dest: 'plugin/JS',
// 額外壓縮成 .min.js 而不會覆蓋
ext: '.min.js'
}]
}
},
// 設定 CSS 壓縮 task
cssmin: {
target: {
files: [{
// 啟用擴展
expand: true,
// 來源的路徑
cwd: 'css',
// 將不是 .min.js 的檔案全部進行壓縮
src: ['**/*.css', '!*.min.css'],
// 輸出的路徑
dest: 'css',
// 額外壓縮成 .min.js 而不會覆蓋
ext: '.min.css'
}]
}
},
// 設定合併檔案
concat: {
options: {
separator: ';',
},
dist: {
// 合併來源檔案，把 min.js 全部合成
src: ['plugin/JS/**/*.min.js'],
// 合併後的檔案位置
dest: 'dist/built.js',
},
},
// 設定監控異動
watch: {
//監控的檔案
files: ['**/*'],
// 監控發生異動，任務要指派給哪個外掛套件
tasks: ['concat', 'uglify', 'cssmin'],
options: {
// 間隔多久執行監控
interval: 100,
// 自動重整
livereload: true
}
},
});
// 讀取外掛
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// 註冊外掛名稱到 default
grunt.registerTask('default', ['uglify', 'concat', 'watch', 'cssmin']);
};
接著把上面的設定改為你的 JS 與 CSS 位置以後，再執行
grunt
就能進行壓縮、監控、合併檔案囉！