Using Grunt to Concatenate and Minify JS
使用Grunt來自動合併縮小Javascript
這篇是如何用Grunt來合併縮小多個Javascript，至於範例在我的Github上需要的Plugins
1. grunt-contrib-concat (用來合併檔案用)
2. grunt-contrib-uglify (用來壓縮你的js的內容，內容並且會醜化讓你認不得是你寫的 XD)
3. grunt-contrib-htmlmin (用來壓縮html的檔案)
4. grunt-usemin (用來整合concat跟uglify plugin)
測試環境
我這次測試的目的是將在index.html中的多個js檔案做合併跟縮小，然後將會自動改成main.js以下是我的測試架構
├── dist (最後要合併縮小js的輸出目的地，這個目錄底下的檔案都是grunt產生的)
│ ├── index.html
│ └── js
│ └── main.js
├── Gruntfile.js (自動化執行的js file)
├── index.html (阿 這個應該不用講了)
├── js (所有js file的目錄 XD 一眼就看得出來了吧)
│ ├── jquery.js
│ └── modernizr.js
├── package.json
└── README.md
index.html 在index.html你會看到我用了
<!-- build:js js/main.js --><!-- endbuild --> 來將jquery跟modernizr來包住並且指定他最後會被合併跟縮小成main.js
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- build:js js/main.js -->
<script src="js/jquery.js"> </script>
<script src="js/modernizr.js"> </script>
<!-- endbuild -->
</head>
<body>
</body>
</html>
Gruntfile.js 我的grunt中只有建立build這個task，以下的檔案不要直接複製來用，請直接到我的Github下載
module.exports = function(grunt) {
var appConfig = {
dist: 'dist',
app: '.'
};
grunt.initConfig({
app: appConfig,
pkg: grunt.file.readJSON('package.json'),
htmlmin: {
dist: {
files: [{
expand: true,
cwd: '<%= app.app %>', (切換到你要的目錄下，我這邊設定還是原來的目錄)
src: ['*.html'], (來源的檔案跟cwd有關）
dest: '<%= app.dist %>' (處理完的檔案要放的地方)
}]
}
},
useminPrepare: { (從index.html中的<build:js>的標籤找出要處理的js檔案，並且設定好參數)
html: 'index.html',
options: {
dest: '<%= app.dist %>'
}
},
usemin: {
html: ['dist/{,*/}*.html'], (要處理的html檔案位置)
options: {
assetsDirs: ['<%= app.dist %>'],
debugInfo: true (秀出更多訊息)
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('build', [ (grunt的task build)
'useminPrepare',
'concat',
'uglify',
'htmlmin',
'usemin'
]);
};
最後你設定完之後只要下grunt build這個command就可以看到dist/index.html跟dist/js/main.js了 以下是
dist/index.html的內容
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/main.js"></script>
</head>
<body>
</body>
</html>
留言