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-requirejs——合併壓縮requirejs管理的全部js模塊文件

    • 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">
      <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已經開始監聽, 修改保存後自動編譯處理