grunt專案構建工具

龍恩0707發表於2013-08-30
JS專案構建工具Grunt實踐

一：下面來介紹下如何用grunt合併，壓縮js檔案。
    大概步驟有如下：
     1. 新建資料夾相對應的專案 比如檔名叫：gruntJs
      2. 新建檔案package.json。
      3. 新建檔案Gruntfile.js。
      4. 命令列執行grunt任務。

   一： 新建檔名為：gruntJs 該根目錄下有src資料夾 裡面放了n個js檔案要構建的，還有個叫dest資料夾(名字都可以自取)，這個檔案是儲存編譯後的js檔案。

   二： 新建package.json。

       package.json放在根目錄下，它包含了該專案的一些元資訊，如專案名稱、描述、版本號，依賴包等。
       它應該和原始碼一樣被提交到svn或git。 現在的內容如下：
      {
        "name": "gruntJs",
        "version": "1.0.0",
        "devDependencies": {
          "grunt": "~0.4.0",
          "grunt-contrib-jshint": "~0.1.1",
          "grunt-contrib-uglify": "~0.1.2",
          "grunt-contrib-concat": "~0.1.1" 
        }
      }
       配置時候 版本一定要對應，否則打包會報錯。上面是正確的。
       grunt-contrib-jshint js語法檢查
       grunt-contrib-uglify 壓縮，採用UglifyJS
       grunt-contrib-concat 合併檔案
      此時： 開啟命令列工具進入到專案根目錄，如（gruntJs）敲如下命令: npm install 後 如果一切正常的話 那麼
      再檢視根目錄，發現多了個node_modules目錄，包含了5個子目錄 grunt-cmd-transport  grunt-contrib-clean
      grunt-contrib-jshint grunt-contrib-uglify grunt。

   
  三：新建檔案Gruntfile.js
    1。 wrapper函式，結構如下，這是Node.js的典型寫法，使用exports公開API
        module.exports = function(grunt) {
            // Do grunt-related things in here
        };
    2.  專案和任務配置。
    3.  載入grunt外掛和任務。
    4.  定製執行任務。

   該示例完成以下任務：   

　　合併src下的檔案（grunt.js/bb.js）為domop.js 壓縮domop.js為domop.min.js,這兩個檔案都放在dest目錄下  最終的Gruntfile.js如下:

   

module.exports = function(grunt) {
    // 配置
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        concat: {
              domop: {
                  src: ['src/grunt.js', 'src/bb.js'],
                  dest: 'dest/domop.js'
              }
          },
          uglify: {
              build: {
                  src : 'dest/domop.js',
                  dest : 'dest/domop-min.js'
              }
          }
      });

      // 載入concat和uglify外掛，分別對於合併和壓縮
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-contrib-uglify');

      // 註冊任務
      grunt.registerTask('default', ['concat','uglify']);
  };

   四、執行grunt任務。

    開啟命令列，進入到專案根目錄，敲 grunt  如果一切都成功的話 那麼 
    看出成功的合併和壓縮並生成了dest目錄及期望的檔案，這時的專案目錄下多了dest.

 

 

 

相關文章