grunt的學習和使用

時間  2019-11-21
標籤 grunt 學習 使用 欄目 Node.js 简体版
原文   原文鏈接

目前正在編寫公司的部分組件，可能一個組件會包含不少js和css，爲了項目上使用方便，應該壓縮成一個js庫，以供開發者使用，同時也能夠減小不少http請求，提升頁面訪問速度。基於此，學習了grunt自動化構建工具。學習文章：http://developer.51cto.com/art/201506/479127.htm。不過我根據本身的實際狀況，有些東西作了一些改動，同時記錄下來，後面也會用到。下面單刀直入，直接講怎麼用：css

一、安裝nodejs。安裝過程略。下載路徑:https://nodejs.org/en/  。檢查安裝是否成功：打開cmd，輸入node -v,若是出現如下界面，表示安裝成功。node

二、安裝grunt-cli。打開cmd、輸入npm install -g grunt-cli。出現如下信息，表示安裝成功。npm

三、打開項目目錄 ，在項目的根目錄下新建配置文件：Gruntfile.js和package.json兩個文件。其中package.json文件中先寫入如下內容：json

 

{
  "name": "vetech.select",
  "version": "1.0",
  "devDependencies": {
   }
}

四、安裝grunt：cmd切換到項目的根目錄下，並輸入：npm install grunt -save-dev。工程目錄下有如下目錄表示安裝成功。app

 五、配置Gruntfile.js文件：curl

 //包裝函數
 module.exports = function(grunt){
     //任務配置，全部插件的配置信息
     grunt.initConfig({
        //獲取package.json的信息
        pkg:grunt.file.readJSON("package.json")
     });
     //告訴grunt當咱們在終端輸入grunt時，須要作些什麼（有前後順序）
    grunt.registerTask("default",[]);
 };

六、cmd中執行grunt命令，看是否配置成功。函數

七、安裝插件：因爲在項目中，並非每一個js都是獨立的文件，有時候每一個js可能會存在依賴關係。因此在安裝插件的時候，先安裝合併插件、再安裝校驗插件、壓縮插件，最後安裝自動化構建插件。全部的插件安裝必需要切換到項目的根目錄下執行才行,另外，每次安裝一個插件最好是執行一下grunt命令，看是否安裝和配置成功。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合併之後都放在這裏，這樣作的好處有有兩個：一、在校驗和壓縮的時候，只須要校驗和壓縮這兩個文件便可；二、對於項目上對組件使用可能出問題，能夠直接用合併的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以知足當前項目須要。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程