Grunt前端自動化項目建構流程

• Grunt介紹
  • 中文首頁 : http://www.gruntjs.net/
  • 是一套前端自動化建構工具，一個基于nodeJs的指令行工具
  • 它是一個任務運作器, 配合其豐富強大的插件
  • 常用功能:
    • 合并檔案(js/css)
    • 壓縮檔案(js/css)
    • 文法檢查(js)
    • less/sass預編譯處理
    • 其它…
• 安裝nodejs, 檢視版本

node -v
           

• 建立一個簡單的應用grunt_test

|- build----------建構生成的檔案所在的檔案夾
  |- src------------源碼檔案夾   
      |- js---------------js源檔案夾
      |- css--------------css源檔案夾
  |- index.html-----頁面檔案
  |- Gruntfile.js---grunt配置檔案(注意首字母大寫)
  |- package.json---項目包配置檔案
      {
        "name": "grunt_test",
        "version": "1.0.0"   
      }
           

• 全局安裝 grunt-cli

npm install -g grunt-cli 
           

• 安裝grunt

npm install grunt --save-dev
           

• 運作建構項目指令

grunt  //提示 Warning: Task "default" not found
           

• 配置檔案: Gruntfile.js
  • 此配置檔案本質就是一個node函數類型子產品
  • 配置編碼包含3步:
    1. 初始化插件配置
    2. 加載插件任務
    3. 注冊建構任務
  • 基本編碼:

module.exports = function(grunt){
      // 1. 初始化插件配置
      grunt.initConfig({
          //主要編碼處
      });
      // 2. 加載插件任務
      // grunt.loadNpmTasks('grunt-contrib-concat');
      // 3. 注冊建構任務
      grunt.registerTask('default', []);
    };
           

• 指令: grunt //提示成功, 但沒有任何效果(還沒有使用插件定義任務)
• Grunt插件介紹
  • grunt官網的插件清單頁面 http://www.gruntjs.net/plugins
  • 插件分類:
    • grunt團隊貢獻的插件 : 插件名大都以contrib-開頭
    • 第三方提供的插件 : 大都不以contrib-開頭
  • 常用的插件:
    • grunt-contrib-clean——清除檔案(打包處理生成的)
    • grunt-contrib-concat——合并多個檔案的代碼到一個檔案中
    • grunt-contrib-uglify——壓縮js檔案
    • grunt-contrib-jshint——javascript文法錯誤檢查；
    • grunt-contrib-cssmin——壓縮/合并css檔案
    • grunt-contrib-htmlmin——壓縮html檔案
    • grunt-contrib-imagemin——壓縮圖檔檔案(無損)
    • grunt-contrib-copy——複制檔案、檔案夾
    • grunt-contrib-watch——實時監控檔案變化、調用相應的任務重新執行
• 合并js: 使用concat插件
  • 指令:

npm install grunt-contrib-concat --save-dev
           

• 編碼:
  • src/js/test1.js

(function () {
        function add(num1, num2) {
          return num1 + num2;
        }
        console.log(add(10, 20));
      })();
           

* src/js/test2.js
           

(function () {
        var arr = [2,3,4].map(function (item, index) {
          return item+1;
        });
        console.log(arr);
      })();
           

• 配置: Gruntfile.js
  • 配置任務:

concat: {
        options: { //可選項配置
          separator: ';'   //使用;連接配接合并
        },
        build: { //此名稱任意
          src:  ["src/js/*.js"],  //合并哪些js檔案
          dest: "build/js/built.js" //輸出的js檔案
        }
      }
           

• 加載插件:

grunt.loadNpmTasks('grunt-contrib-concat');
           

• 注冊任務:

grunt.registerTask('default', ['concat']);
           

• 指令:

grunt   //會在build下生成一個built.js
           

• 壓縮js: 使用uglify插件
  • 下載下傳

npm install grunt-contrib-uglify --save-dev
           

• 配置: Gruntfile.js
  • 配置任務:

pkg : grunt.file.readJSON('package.json'),
      uglify : {
        options: {  //不是必須的
          banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
          '<%= grunt.template.today("yyyy-mm-dd") %> */'
        },
        build: {
          files: {
            'build/js/built-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
          }
        }
      }
           

• 加載任務:

grunt.loadNpmTasks('grunt-contrib-uglify');
           

• 注冊任務:

grunt.registerTask('default', ['concat', 'uglify']);
           

• 指令:

grunt   //會在build下生成一個壓縮的js檔案
           

• js文法檢查: 使用jshint插件
  • 指令:

npm install grunt-contrib-jshint --save-dev
           

• 編碼: .jshintrc

  {
    "curly": true,
    "eqeqeq": true,
    "eqnull": true,
    "expr" : true,
    "immed": true,
    "newcap": true,
    "noempty": true,
    "noarg": true,
    "regexp": true,
    "browser": true,
    "devel": true,
    "node": true,
    "boss": false,
    
    //不能使用未定義的變量
    "undef": true,
    //語句後面必須有分号
    "asi": false,
    //預定義不檢查的全局變量
    "predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]
  }
             

• 修改src/js/test1.js

(function () {
     function add(num1, num2) {
       num1 = num1 + num3
       return num1 + num2;
     }
     console.log(add(10, 20));
   })();
           

• 配置 : Gruntfile.js
  • 配置任務:

jshint : {
        options: {
          jshintrc : '.jshintrc' //指定配置檔案
        },
        build : ['Gruntfile.js', 'src/js/*.js'] //指定檢查的檔案
      }
           

• 加載任務:

grunt.loadNpmTasks('grunt-contrib-jshint');
           

• 注冊任務:

grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
           

• 指令:

grunt   //提示變量未定義和語句後未加分号 -->修改後重新編譯
           

• 使用cssmin插件
  • 安裝:

npm install grunt-contrib-cssmin --save-dev
           

• 編碼:
  • test1.css

#box1 {
        width: 100px;
        height: 100px;
        background: red;
      }
           

• test2.css

#box2 {
        width: 200px;
        height: 200px;
        background: blue;
      }
           

• index.html

<link rel="stylesheet" href="build/css/output.min.css" target="_blank" rel="external nofollow" >
      <div id="box1"></div>
      <div id="box2"></div>
           

• 配置 : Gruntfile.js
  • 配置任務:

cssmin:{
        options: {
          shorthandCompacting: false,
          roundingPrecision: -1
        },
        build: {
          files: {
              'build/css/output.min.css': ['src/css/*.css']
          }
        }
      }
           

• 加載任務:

grunt.loadNpmTasks('grunt-contrib-cssmin');
           

• 注冊任務:

grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
           

• 指令:

grunt    //在build/css/下生成output.min.css
           

• 使用watch插件（真正實作自動化）
  • 指令: npm install grunt-contrib-watch --save-dev
  • 配置 : Gruntfile.js
    • 配置任務:

watch : {
        scripts : {
          files : ['src/js/*.js', 'src/css/*.css'],
          tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
          options : {spawn : false}  
        }
      }
           

• 加載任務:

grunt.loadNpmTasks('grunt-contrib-watch');
           

• 注冊任務:

grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
改進：grunt.registerTask('myWatch', ['default','watch']);
           

• 指令:

grunt   //控制台提示watch已經開始監聽, 修改儲存後自動編譯處理