7.Grunt 之 RequireJS

RequireJs 提供了一個打包工具 r.js，能夠將相關的模塊打包爲一個文件。相關說明：http://www.requirejs.org/docs/optimization.html

• 將相關的腳本模塊整合爲單個腳本文件，而後默認使用  UglifyJS 進行緊縮，或者在使用 java 的時候，使用  Closure Compiler 處理。
• 還能夠經過 @import 自動內聯相應的樣式，而且刪除註釋來優化 CSS

雖然能夠經過命令行來使用這個打包工具，可是在 Grunt 中也提供了相應的插件來自動完成這個任務。

1. 安裝

地址：https://github.com/gruntjs/grunt-contrib-requirejs 

 npm install grunt-contrib-requirejs --save-dev

 控制檯輸出

grunt-contrib-requirejs@0.4.4 node_modules\grunt-contrib-requirejs
└── requirejs@2.1.20

在 Gruntfile.js 文件中，使用 grunt.loadNpmTasks 來加載這個任務。

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

 

 2. 配置

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    
    copy: {
      dev: {
        files: [
        {expand: true, src: ['src/**/*.js'], dest: 'public/js', filter: 'isFile'}
        ]
      }
    },

    requirejs: {
      compile: {
        options: {
          name: "main",
          baseUrl: "src/js",
          mainConfigFile: "main.js",
          out: "public/js/main.js"
        }
      }
    }
    
  });

  // 加載包含 "copy" 任務的插件。
  grunt.loadNpmTasks('grunt-contrib-copy');

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

  // 默認被執行的任務列表。
  grunt.registerTask('default', ['uglify']);

};

 compile 是咱們爲任務所起名稱，options 中是相應的配置。

• baseUrl, 相似於 requirejs 中的 baseUrl 參數，用來定義腳本的參照地址。
• mainConfigFile: requirejs 的配置文件，工具經過它來獲取 requirejs 的配置信息。它的地址要相對於 baseUrl 地址。
• name, 入口模塊的地址，也就是咱們的入口模塊，這裏是模塊名稱，因此不須要 .js 的擴展名，地址也要相對於 baseUrl 地址。若是你使用了 almond 進行壓縮，almond 至關於入口模塊了，這裏就是 almond 的地址。也不須要 .js 擴展名。
• out, 輸出的結果，這個地址與 baseUrl 沒有關係，是相對於 Gruntfile.js 的地址
• include 須要包含的模塊名稱，若是使用了 almond，入口已經變成 almond 了，就必需要包含原始的入口模塊名稱。

2.1 直接使用 r.js

在使用這個緊縮任務的時候，默認是不包含 require.js 庫的，因此有兩種用法。

第一種用法，只緊縮咱們定義的模塊，這樣緊縮出來的結果中，會包含 require 過的第三方庫，好比 jquery, angularjs 等等，可是不會包含 requirejs 自己。因此，咱們須要在頁面中先引用 require.js 庫，而後引用咱們緊縮的結果。

requirejs: {
      compile: {
        options: {
          name: "main",
          baseUrl: "src/js",
          mainConfigFile: "main.js",
          out: "public/js/main.js"
        }
    }
}

 

第二種用法，直接將 require.js 也包含進來，這樣，只須要在頁面中引用緊縮的結果便可。

先經過 paths 給 require.js 起一個名稱，而後在 include 中包含這個模塊。

    //Set paths for modules. If relative paths, set relative to baseUrl above.
    //If a special value of "empty:" is used for the path value, then that
    //acts like mapping the path to an empty file. It allows the optimizer to
    //resolve the dependency to path, but then does not include it in the output.
    //Useful to map module names that are to resources on a CDN or other
    //http: URL when running in the browser and during an optimization that
    //file should be skipped because it has no dependencies.
    paths: {
        "requireLib": "lib/require"
    },

    include: ["requireLib"],

 

 

2.2 使用 almond 

在使用 almond 的時候，其實更加簡單了。

咱們將 name 設置爲 almond 的路徑，而後使用 include 將咱們實際的入口模塊包含進來就能夠了。

這裏須要注意一點，almond 是一個獨立的腳本庫，你須要本身將這個庫下載來下，直接使用 bower 就能夠。而後，設置 name 爲相對於 baseUrl 的 almond 庫路徑便可。

requirejs: {
  compile: {
    options: {
      baseUrl: "tmp",
      mainConfigFile: "tmp/main.js",
      include: "main",
      name: "../bower_components/almond/almond",
      out: "tmp/<%= pkg.name %>.js"
    }
  }
}

 

 

注意，上面的官方實例中沒有使用 include 包含實際的入口。結果就是不會執行的你的腳本。

關於 almond 的限制

• 將全部的模塊合併到單個文件，不會再有動態加載。
• 全部的模塊都擁有惟一的標識，以及經過 define() 來講明的模塊所依賴的模塊說明數組，requirejs 優化器經過它來檢查模塊關係。
• 只能使用一次 requirejs.config() 調用
• requirejs.config 須要包含在輸出中，這對於 map config 很重要
• 不支持 var require = {} 來傳遞配置參數
• 不支持  RequireJS multiversion support/contexts.
• 不要使用 require.toRul() 或者 require.nameToUrl()
• 不要使用 packages/packagePaths config. 

仍然支持的特性：

• 使用相對路徑的依賴
• define('id', {}) 定義
• define(), require() 和 requirejs() 調用
• 將插件合併到優化以後的文件中，在優化以後能夠同步訪問這些資源。