grunt的学习和使用
生活随笔
收集整理的這篇文章主要介紹了
grunt的学习和使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目前正在編寫公司的部分組件，可能一個組件會包含很多js和css，為了項目上使用方便，應該壓縮成一個js庫，以供開發者使用，同時也可以減少很多http請求，提高頁面訪問速度。基于此，學習了grunt自動化構建工具。學習文章：http://developer.51cto.com/art/201506/479127.htm。不過我根據自己的實際情況，有些東西做了一些改動，同時記錄下來，后面也會用到。下面單刀直入，直接講怎么用：
1、安裝nodejs。安裝過程略。下載路徑:https://nodejs.org/en/? 。檢查安裝是否成功：打開cmd，輸入node -v,如果出現以下界面，表示安裝成功。
2、安裝grunt-cli。打開cmd、輸入npm install -g grunt-cli。出現以下信息，表示安裝成功。
3、打開項目目錄 ，在項目的根目錄下新建配置文件：Gruntfile.js和package.json兩個文件。其中package.json文件中先寫入以下內容：
?
{"name": "vetech.select","version": "1.0","devDependencies": {} }4、安裝grunt：cmd切換到項目的根目錄下，并輸入：npm install grunt -save-dev。工程目錄下有以下目錄表示安裝成功。
?5、配置Gruntfile.js文件：
//包裝函數module.exports = function(grunt){//任務配置，所有插件的配置信息 grunt.initConfig({//獲取package.json的信息pkg:grunt.file.readJSON("package.json")});//告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序）grunt.registerTask("default",[]);};6、cmd中執行grunt命令，看是否配置成功。
7、安裝插件：由于在項目中，并不是每個js都是獨立的文件，有時候每個js可能會存在依賴關系。所以在安裝插件的時候，先安裝合并插件、再安裝校驗插件、壓縮插件，最后安裝自動化構建插件。所有的插件安裝必須要切換到項目的根目錄下執行才行,另外，每次安裝一個插件最好是執行一下grunt命令，看是否安裝和配置成功。
- 合并插件：https://www.npmjs.com/package/grunt-contrib-concat
- 安裝命令：npm?install?grunt-contrib-concat?--save-dev
- Gruntfile.js配置： 1 //包裝函數 2 module.exports = function(grunt){ 3 //任務配置，所有插件的配置信息 4 grunt.initConfig({ 5 //獲取package.json的信息 6 pkg:grunt.file.readJSON("package.json"), 7 //合并插件： 8 concat:{ 9 js:{ 10 src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"], 11 dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js" 12 }, 13 css:{ 14 src:["css/style.css","css/radio.css"], 15 dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css" 16 } 17 } 18 19 }); 20 grunt.loadNpmTasks("grunt-contrib-concat"); 21 22 //告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序） 23 grunt.registerTask("default",["concat"]); 24 };
-
說明：?在配置dest路徑的時候，在build目錄下新建了一個debug文件夾，所有的js和css合并以后都放在這里，這樣做的好處有有兩個：1、在校驗和壓縮的時候，只需要校驗和壓縮這兩個文件即可；2、對于項目上對組件使用可能出問題，可以直接用合并的js作為調試文件來找出問題原因。
- js校驗插件：https://www.npmjs.com/package/grunt-contrib-jshint
- 安裝命令：npm?install?grunt-contrib-jshint?--save-dev
- Gruntfile.js配置： 1 //包裝函數 2 module.exports = function(grunt){ 3 //任務配置，所有插件的配置信息 4 grunt.initConfig({ 5 //獲取package.json的信息 6 pkg:grunt.file.readJSON("package.json"), 7 //合并插件： 8 concat:{ 9 js:{ 10 src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"], 11 dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js" 12 }, 13 css:{ 14 src:["css/style.css","css/radio.css"], 15 dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css" 16 } 17 }, 18 //js語法校驗插件 19 jshint:{ 20 build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"], 21 options:{ 22 jshintrc:".jshintrc" 23 } 24 } 25 }); 26 grunt.loadNpmTasks("grunt-contrib-concat"); 27 grunt.loadNpmTasks("grunt-contrib-jshint"); 28 //告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序） 29 grunt.registerTask("default",["concat","jshint"]); 30 };
???? 備注：在js校驗的時候，像JQuery、$、angular等等，校驗不會通過，此時需要預先定義，參考文章：http://stackoverflow.com/questions/20837139/jshint-r10-angular-is-not-defined。另外，在校驗的時候，還需要在Gruntfile.js文件的同級目錄下新建一個.jshintrc文件，文件中編寫要校驗的規則。格式如下，規則參考：http://my.oschina.net/wjj328938669/blog/637433?p=1
{"boss":false,"curly":false,"eqeqeq":false,"eqnull":true,"expr":true,"immed":true,"newcap":true,"noempty":true,"noarg":true,"undef":true,"regexp":true,"browser":true,"devel":true,"node":true,"predef": ["ActiveXObject"]} - css校驗插件：https://www.npmjs.com/package/grunt-contrib-csslint
- 安裝命令：npm?install?grunt-contrib-csslint?--save-dev
- Gruntfile.js配置： 1 //包裝函數 2 module.exports = function(grunt){ 3 //任務配置，所有插件的配置信息 4 grunt.initConfig({ 5 //獲取package.json的信息 6 pkg:grunt.file.readJSON("package.json"), 7 //合并插件： 8 concat:{ 9 js:{ 10 src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"], 11 dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js" 12 }, 13 css:{ 14 src:["css/style.css","css/radio.css"], 15 dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css" 16 } 17 }, 18 //js語法校驗插件 19 jshint:{ 20 build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"], 21 options:{ 22 jshintrc:".jshintrc" 23 } 24 }, 25 //css語法校驗 26 csslint:{ 27 build:["build/debug/<%=pkg.name%>.debug.css"], 28 options:{ 29 csslintrc:".csslintrc" 30 } 31 } 32 }); 33 grunt.loadNpmTasks("grunt-contrib-concat"); 34 grunt.loadNpmTasks("grunt-contrib-jshint"); 35 grunt.loadNpmTasks("grunt-contrib-csslint"); 36 37 //告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序） 38 grunt.registerTask("default",["concat","jshint","csslint"]); 39 };
-
- 備注： css校驗插件也需要一個.csslintrc文件，同樣是在Gruntfile.js的同級目錄下。格式如下，配置參考：https://atom.io/packages/csslint {"adjoining-classes":false,"box-sizing":false,"box-model":false,"compatible-vendor-prefixes":false,"floats":false,"font-sizes":false,"gradinents":false,"important":false,"known-properties":false,"outline-none":false,"qualified-headings":false,"regex-selectors":false,"shorthand":false,"text-indent":false,"unique-headings":false,"universal-selector":false,"unqualified-attributes":false}
?
- ?JS壓縮插件：https://www.npmjs.com/package/grunt-contrib-uglify
- 安裝命令：npm?install?grunt-contrib-uglify?--save-dev
- Gruntfile.js配置： 1 //包裝函數
2 module.exports = function(grunt){
3 //任務配置，所有插件的配置信息
4 grunt.initConfig({
5 //獲取package.json的信息
6 pkg:grunt.file.readJSON("package.json"),
7 //合并插件：
8 concat:{
9 js:{
10 src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
11 dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
12 },
13 css:{
14 src:["css/style.css","css/radio.css"],
15 dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
16 }
17 },
18 //js語法校驗插件
19 jshint:{
20 build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
21 options:{
22 jshintrc:".jshintrc"
23 }
24 },
25 //css語法校驗
26 csslint:{
27 build:["build/debug/<%=pkg.name%>.debug.css"],
28 options:{
29 csslintrc:".csslintrc"
30 }
31 },
32 //js壓縮
33 uglify:{
34 options:{
35 stripBanners:true,
36 banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
37 },
38 build:{
39 mangle:true, //變量名混淆
40 src:"build/debug/*.js",
41 dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.js"
42 }
43 }
44 });
45 grunt.loadNpmTasks("grunt-contrib-concat");
46 grunt.loadNpmTasks("grunt-contrib-jshint");
47 grunt.loadNpmTasks("grunt-contrib-csslint");
48 grunt.loadNpmTasks("grunt-contrib-uglify");
49
50 //告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序）
51 grunt.registerTask("default",["concat","jshint","csslint","uglify"]);
52 };
?
- css壓縮插件：https://www.npmjs.com/package/grunt-contrib-cssmin
- 安裝命令：npm?install?grunt-contrib-cssmin?--save-dev
- Gruntfile.js配置： 1 //包裝函數
2 module.exports = function(grunt){
3 //任務配置，所有插件的配置信息
4 grunt.initConfig({
5 //獲取package.json的信息
6 pkg:grunt.file.readJSON("package.json"),
7 //合并插件：
8 concat:{
9 js:{
10 src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
11 dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
12 },
13 css:{
14 src:["css/style.css","css/radio.css"],
15 dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
16 }
17 },
18 //js語法校驗插件
19 jshint:{
20 build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
21 options:{
22 jshintrc:".jshintrc"
23 }
24 },
25 //css語法校驗
26 csslint:{
27 build:["build/debug/<%=pkg.name%>.debug.css"],
28 options:{
29 csslintrc:".csslintrc"
30 }
31 },
32 //js壓縮
33 uglify:{
34 options:{
35 stripBanners:true,
36 banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
37 },
38 build:{
39 mangle:true, //變量名混淆
40 src:"build/debug/*.js",
41 dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.js"
42 }
43 },
44 //css壓縮
45 cssmin:{
46 options:{
47 stripBanners:true,
48 banner:'/*! <%=pkg.name%>-<%=pkg.version%>.css <%=grunt.template.today("yyyy-mm-dd")%> */\n'
49 },
50 build:{
51 src:"build/debug/*.css",
52 dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.css"
53 }
54 }
55
56 });
57 grunt.loadNpmTasks("grunt-contrib-concat");
58 grunt.loadNpmTasks("grunt-contrib-jshint");
59 grunt.loadNpmTasks("grunt-contrib-csslint");
60 grunt.loadNpmTasks("grunt-contrib-uglify");
61 grunt.loadNpmTasks("grunt-contrib-cssmin");
62
63 //告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序）
64 grunt.registerTask("default",["concat","jshint","csslint","uglify","cssmin"]);
65 };
?
- 自動化構建：https://www.npmjs.com/package/grunt-contrib-watch
- 安裝命令：npm?install?grunt-contrib-watch?--save-dev
- Gruntfile.js配置： 1 //包裝函數
2 module.exports = function(grunt){
3 //任務配置，所有插件的配置信息
4 grunt.initConfig({
5 //獲取package.json的信息
6 pkg:grunt.file.readJSON("package.json"),
7 //合并插件：
8 concat:{
9 js:{
10 src:["js/mxUtil.js","js/MultSelect.js","js/RadioSelect.js"],
11 dest:"build/debug/<%= pkg.name%>-<%=pkg.version%>.debug.js"
12 },
13 css:{
14 src:["css/style.css","css/radio.css"],
15 dest:"build/debug/<%=pkg.name%>-<%=pkg.version%>.debug.css"
16 }
17 },
18 //js語法校驗插件
19 jshint:{
20 build:["Gruntfile.js","build/debug/<%=pkg.name%>.debug.js"],
21 options:{
22 jshintrc:".jshintrc"
23 }
24 },
25 //css語法校驗
26 csslint:{
27 build:["build/debug/<%=pkg.name%>.debug.css"],
28 options:{
29 csslintrc:".csslintrc"
30 }
31 },
32 //js壓縮
33 uglify:{
34 options:{
35 stripBanners:true,
36 banner:'/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
37 },
38 build:{
39 mangle:true, //變量名混淆
40 src:"build/debug/*.js",
41 dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.js"
42 }
43 },
44 //css壓縮
45 cssmin:{
46 options:{
47 stripBanners:true,
48 banner:'/*! <%=pkg.name%>-<%=pkg.version%>.css <%=grunt.template.today("yyyy-mm-dd")%> */\n'
49 },
50 build:{
51 src:"build/debug/*.css",
52 dest:"build/app/<%=pkg.name%>-<%=pkg.version%>.min.css"
53 }
54 },
55 //自動化構建
56 watch:{
57 build:{
58 files:["Gruntfile.js","js/*.js","css/*.css"],
59 tasks:["concat","jshint","csslint","uglify","cssmin"],
60 options:{spawn:false}
61 }
62 }
63
64 });
65 grunt.loadNpmTasks("grunt-contrib-concat");
66 grunt.loadNpmTasks("grunt-contrib-jshint");
67 grunt.loadNpmTasks("grunt-contrib-csslint");
68 grunt.loadNpmTasks("grunt-contrib-uglify");
69 grunt.loadNpmTasks("grunt-contrib-cssmin");
70 grunt.loadNpmTasks("grunt-contrib-watch");
71
72 //告訴grunt當我們在終端輸入grunt時，需要做些什么（有先后順序）
73 grunt.registerTask("default",["concat","jshint","csslint","uglify","cssmin","watch"]);
74 };
?
執行完以上的所有操作，基本上可以滿足js和css的校驗、合并和壓縮。最后執行grunt，會發現根據Gruntfile.js配置的，生成相應的文件，前提是js和css不會存在錯誤。下圖是執行grunt以后生成的文件：
?
?最后，直接把app中的文件拷貝到項目中去使用即可。對于watch插件，指定監聽哪些文件，一旦文件發生變化，會重新構建。如果有新的項目需要自動化構建，那么只需要將Gruntfile.js、package.json、兩個以.開頭的配置文件拷貝過去，在根目錄下執行：npm install，一次性安裝好所有的插件。然后修改Gruntfile.js以滿足當前項目需要。
轉載于:https://www.cnblogs.com/tengri/p/5641212.html
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的grunt的学习和使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 算法系列：杂项
- 下一篇： Scala中的类和对象