前端自動化構建工具Grunt
一、了解Gurnt
Grunt 是一個基于任務的JavaScript工程命令行構建工具。Grunt和Grunt插件，是通過npm安裝并管理的，npm是Node.js的包管理器。
了解Grunt前，首先要準備兩件事：
1、了解npm（Node Package Manager）：npm是一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標準。
2、安裝node：進入nodejs官網（https://nodejs.org/），單擊INSTALL下載node安裝包，默認安裝。安裝完成后，進入對應目錄，會發現nodejs文件夾下面有npm,直接用npm安裝相環境既可。
二、安裝Grunt
參考Grunt官網http://www.gruntjs.net/安裝Grunt：npm install -g grunt-cli
注意，安裝grunt-cli并不等于安裝了Grunt！Grunt CLI的任務很簡單：調用與Gruntfile在同一目錄中 Grunt。這樣帶來的好處是，允許你在同一個系統上同時安裝多個版本的Grunt。
三、簡單實用Grunt
一個新的Grunt項目，必須在根目錄下要有兩個文件：package.json 和 Gruntfile.jspackage.json: 此文件被npm用于存儲項目的元數據，以便將此項目發布為npm模塊。你可以在此文件中列出項目依賴的grunt和Grunt插件，放置于devDependencies配置段內。
Gruntfile: 此文件被命名為 Gruntfile.js 或 Gruntfile.coffee，用來配置或定義任務（task）并加載Grunt插件的。
- npm init命令會創建一個基本的package.json文件。或者手動創建，如下：
</span>{ "name": "my-project-name", "description":"test grunt ...", "version": "0.1.0" }2. 安裝Grunt和Grunt插件（https://github.com/gruntjs）
向已經存在的package.json 文件中添加Grunt和grunt插件的最簡單方式是通過：
npm install <module> --save-dev。此命令不光安裝了<module>，還會自動將其添加到devDependencies 配置段中。 - grunt --help 命令將列出所有可用的任務
四、簡單項目流程示例
清空編譯工作區 -> copy源文件到編譯工作區 -> 合并文件 -> 壓縮文件 -> 加時間戳
clean -> copy -> concat -> min -> md5 - grunt-contrib-clean：Clear files and folders.
- grunt-contrib-copy：Copy files and folders.
- grunt-contrib-concat：Concatenate files.
- grunt-contrib-cssmin：Compress CSS files.
grunt-contrib-uglify：Minify files with UglifyJS.
grunt-contrib-htmlmin：Minify HTML. - grunt-filerev：Static asset revisioning through file content hash
第一步：創建package.json
</span>{ "name":"test_grunt", "description":"test grunt ...", "version":"0.0.1" }第二步：安裝對應插件（加上--save-dev，會在package.json中加上devDependencies依賴）
npm install grunt-contrib-clean --save-dev npm install grunt-contrib-copy --save-dev npm install grunt-contrib-concat --save-dev npm install grunt-contrib-cssmin --save-dev npm install grunt-contrib-uglify --save-dev
第三步：創建Gruntfile.js，添加要使用插件配置
'use strict'; module.exports = function(grunt) { // 構建的初始化配置 grunt.initConfig({
});//配置具體任務
// 載入要使用的插件
grunt.loadNpmTasks('grunt-contrib-clean');
// 注冊剛配置好的任務
grunt.registerTask('default', ['clean']);
}</pre>
五、地址
nodejs官網地址：https://nodejs.org/grunt中文官網地址：http://www.gruntjs.net/
grunt官網插件地址：https://github.com/gruntjs
六、源碼
// package.json
{
"name": "test_grunt",
"description": "test grunt ...",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-uglify": "^0.9.1"
}
}//Gruntfile.js'use strict';
module.exports = function(grunt) {
// 構建的初始化配置
grunt.initConfig({
/ 配置具體任務 /
pkg: grunt.file.readJSON('package.json'),
dirs: {
src: 'path',
dest: 'dest/<%= pkg.name %>/<%= pkg.version %>',
},
// clean任務（刪除dest/test_grunt/0.0.1 目錄下非min的文件）
clean: {
js: ["<%= dirs.dest %>/.js", "!<%= dirs.dest %>/.min.js"],
css: ["<%= dirs.dest %>/.css", "!<%= dirs.dest %>/.min.css"]
},
// copy任務（拷貝path目錄下的文件到dest目錄）
copy: {
main: {
files: [
// includes files within path
{expand: true, src: ['path/'], dest: '<%= dirs.dest %>/', filter: 'isFile'},
]
}
},
// concat任務（將dest目錄下的a.js和b.js合并為built.js）
concat: {
options: {
separator: '\n',
},
concatCSS: {
src: ['<%= dirs.dest %>/a.css', '<%= dirs.dest %>/path/b.css'],
dest: '<%= dirs.dest %>/built.css',
},
concatJS: {
src: ['<%= dirs.dest %>/a.js', '<%= dirs.dest %>/b.js'],
dest: '<%= dirs.dest %>/built.js',
}
},
// cssmin任務（壓縮css）
cssmin: {
target: {
files: [{
expand: true,
cwd: '<%= dirs.dest %>',
src: ['.css', '!.min.css'],
dest: '<%= dirs.dest %>',
ext: '.min.css'
}]
}
},
// uglify任務（壓縮js）
uglify: {
options: {
mangle: {
except: ['jQuery', 'Backbone']
}
},
my_target: {
files: {
'<%= dirs.dest %>/bulit.min.js': ['<%= dirs.dest %>/.js']
}
}
}
});
// 載入要使用的插件
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 注冊剛配置好的任務
grunt.registerTask('cls', ['clean']);
grunt.registerTask('cpy', ['copy']);
grunt.registerTask('con', ['concat']);
grunt.registerTask('cmpCSS', ['cssmin']);
grunt.registerTask('cmpJS', ['uglify']);
grunt.registerTask('default', ['copy','concat','cssmin','uglify','clean']);
}</pre>
PS：
- 自己配置的任務名稱，不能和插件名稱一樣，否則會造成無限循環</strong> </p>
2. 插件名稱，除最外層外，中間層名稱可自定義
來自：http://blog.csdn.net/ligang2585116/article/details/46428437
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！