爲何選擇Grunt?
壓縮、編譯、單元測試、代碼檢查等 我們需要自動化，不必重複勞動，減小工作量。爲何選擇Grunt呢？好像是沒有更好的選擇了。
準備工作
安裝node.js
Grunt基於Node.js，安裝之前要先安裝Node.js。
brew install node
|
更新npm
sudo npm install npm -g
|
安裝 grunt-cli
安裝 grunt-cli 並不等於安裝了 Grunt 任務運行器
Grunt CLI 的任務是運行 Gruntfile 指定的 Grunt 版本。 這樣就可以在一臺電腦上同時安裝多個版本的 Grunt。(沒有懂，俺直接實戰)
npm install -g grunt-cli
|
Grunt必備文件
創建文件必須創建文件夾，我建立了一個
test的文件夾，一個標準的grunt項目中必須有兩個文件。package.json：用於保存項目元數據。
Gruntfile.js : 用於配置或定義任務、加載 Grunt 插件。在test1文件夾中創建這兩個文件吧。那麼文件中寫什麼內容呢。我們首先來關注一下package.json寫什麼內容
{ "name": "test", "version": "1.0.0" } |
運行
在項目的根目錄下運行下面的命令
npm install
|
命令執行過程
npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
|
提示說沒有描述信息沒有README之類的
在根目錄添加一個 README.md 文件
添加內容
在 package.json 中添加下面內容之後
{ "name": "test", "version": "1.0.0", "description": "測試的例子", "repository": { "type": "git", "url": "https://github.com/JSLite/JSLite.git" } } |
於是乎萬事大吉了
安裝 Grunt 插件
在此項目中安裝 Grunt 插件
sudo npm install grunt --save-dev
|
package.json的文件內容發現多了 devDependencies 的信息
目錄多了一個 node_modules 的文件夾
{ "name": "test", "version": "1.0.0", "description": "測試的例子", "repository": { "type": "git", "url": "https://github.com/JSLite/JSLite.git" }, "devDependencies": { "grunt": "^0.4.5" } } |
運行 npm install <module> --save-dev，不僅會安裝指定的 模塊，還會自動添加到 devDependencies 區域中，且包括 版本範圍。
grunt-contrib-uglify
插件用途：壓縮js,css文件
插件名稱：grunt-contrib-uglify
安裝
sudo npm install grunt-contrib-uglify --save-dev
|
安裝成功之後 在package.json的文件內容中的 devDependencies 的信息又增加了
"devDependencies": { "grunt": "^0.4.5", "grunt-contrib-uglify": "^0.8.0" } |
使用方法
還記得我們上面說一個Grunt項目要兩個必須的文件一個
package.json和Gruntfile.js，注意大小寫，Linux區分大小寫的，創建Gruntfile.js並寫入如下內容
// 包裝函數 module.exports = function(grunt) { // 任務配置,所有插件的配置信息 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // uglify插件的配置信息 uglify: { options: { banner: '/*! This is uglify test - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */', beautify: true,//是否壓縮 mangle: false, //不混淆變量名 compress:true,//打開或關閉使用默認選項源壓縮。 preserveComments: 'all', //不刪除註釋 }, app_task: { files: { 'build/app.min.js': ['lib/index.js', 'lib/test.js'] } }, buildb:{//任務二：壓縮b.js，輸出壓縮信息 options: { report: "min"//輸出壓縮率，可選的值有 false(不輸出信息)，gzip }, files: { 'output/js/b.min.js': ['js/main/b.js'] } }, buildall: {//任務三：按原文件結構壓縮js文件夾內所有JS文件 files: [{ expand:true, cwd:'js',//js目錄下 src:'**/*.js',//所有js文件 dest: 'output/js'//輸出到此目錄下 }] }, release: {//任務四：合併壓縮a.js和b.js files: { 'output/js/index.min.js': ['js/a.js', 'js/main/b.js'] } } } }); // 告訴grunt我們將使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 告訴grunt當我們在終端中輸入grunt時需要做些什麼 grunt.registerTask('default', ['uglify']); }; |
分析
-
banner：在
build/app.min.js文件生成內容如日期什麼的 -
files：將
lib目錄中的js壓縮合並生成到build目錄中生成app.min.js
運行grunt
輸入命令下面命令，好了，我的沒有錯誤正常的。如果有錯誤，會有錯誤日誌，自己分析哦。
grunt
|
grunt-contrib-watch
插件用途：監控文件變化並自動運行grunt的watch插件
插件名稱：grunt-contrib-watch
安裝
sudo npm install grunt-contrib-watch --save-dev
|
使用
修改
Gruntfile.js
initConfig 中添加了
// watch插件的配置信息 watch: { another: { files: ['lib/*.js'], tasks: ['uglify'], options: { // Start another live reload server on port 1337 livereload: 1337 } } } |
增加了一行
grunt.loadNpmTasks('grunt-contrib-watch');
|
數組中添加了watch
grunt.registerTask('default', ['uglify','watch']);
|
添加了watch後，完整的 Gruntfile.js
// 包裝函數 module.exports = function(grunt) { // 任務配置,所有插件的配置信息 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // uglify插件的配置信息 uglify: { options: { banner: '/*! This is uglify test - ' + '<%= grunt.template.today("yyyy-mm-dd") %> */' }, app_task: { files: { 'build/app.min.js': ['lib/index.js', 'lib/test.js'] } } }, // watch插件的配置信息 watch: { another: { files: ['lib/*.js'], tasks: ['uglify'], options: { // Start another live reload server on port 1337 livereload: 1337 } } } }); // 告訴grunt我們將使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-watch'); // 告訴grunt當我們在終端中輸入grunt時需要做些什麼 grunt.registerTask('default', ['uglify','watch']); }; |
grunt-contrib-watch
安裝 stylus
sudo npm install grunt-contrib-watch --save-dev
|
修改 Gruntfile.js
initConfig 中添加了
stylus:{ build: { options: { linenos: false, compress: false, banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n' }, files: [{ 'css/historyDetail.css': 'styl/historyDetail.styl' }] } }, |
下面添加
grunt.loadNpmTasks('grunt-contrib-stylus');
|
paths 將自動使用@import來引入一些Stylus文件，比如一些Mixin集合，放在一個Stylus文件中進行維護，寫在paths中後，就可以在每個Stylus文件中調用它們。define 可以定義一些全局變量，然後在Stylus中使用，但我不喜歡使用這個配置，而是更喜歡把全局變量放在一個單獨的Stylus文件中，然後將這個文件加入paths的數組中。一句話，把所有不會直接產出CSS的Stylus代碼分成若干個Stylus文件，然後全部添加到paths中，這樣在所有Stylus文件中都可以隨時調用了，但要注意這些Stylus文件的調用關係和使用先後順序。
compress 及 linenos 是兩個Boolean值，用來控制是否壓縮處理後的CSS代碼以及是否在CSS代碼中保留註釋。
banner 是一個字符串，會被放置在CSS文件的最前面，一般我用來寫註釋，比如
banner: '\/** \n * <%= pkg.name %> - <%= pkg.description %>\n * version <%= pkg.version %> \n * author <%= pkg.author %> \n * date <%= grunt.template.today() %> \n**/\n'
|
firebug 將控制是否使用一個Firebug的Stylus插件FireStylus for Firebug，可以在Firefox中調試Stylus。
use 可以引入一些Stylus的其他grunt插件。
常用模塊設置
grunt-contrib-clean：刪除文件。npm>>grunt-contrib-compass：使用compass編譯sass文件。npm>>grunt-contrib-concat：合併文件。npm>>grunt-contrib-copy：複製文件。npm>>grunt-contrib-cssmin：壓縮以及合併CSS文件。npm>>grunt-contrib-imagemin：圖像壓縮模塊。npm>>grunt-contrib-jshint：檢查JavaScript語法。npm>>grunt-contrib-uglify：壓縮以及合併JavaScript文件。npm>>grunt-contrib-watch：監視文件變動，做出相應動作。npm>>grunt-contrib-stylus：stylus編寫styl輸出css npm>>