用grunt進行ES6轉換，再用uglify壓縮所有js實例

1.首先安裝node.js

去官網下載exe執行文件安裝即可，安裝完成后自帶有npm管理。

2.安裝grunt CLI

在項目根文件夾下執行如下代碼：

npm install -g grunt-cli

 3.安裝Grunt

npm install grunt --save-dev

 

4.配置Gruntfile.js

首先需要往項目里添加兩個文件：package.json和Gruntfile.js;

如果你從其它項目中拷貝了這2個文件，可以執行npm install直接安裝。

其中package.json文件的自動生成：

npm init

grunt.initConfig方法

用於模塊配置，它接受一個對象作為參數。該對象的成員與使用的同名模塊一一對應。

每個目標的具體設置，需要參考該模板的文檔。就cssmin來講，minify目標的參數具體含義如下：

• expand：如果設為true，就表示下面文件名的占位符（即*號）都要擴展成具體的文件名。
• cwd：需要處理的文件（input）所在的目錄。
• src：表示需要處理的文件。如果采用數組形式，數組的每一項就是一個文件名，可以使用通配符。
• dest：表示處理后的文件名或所在目錄。
• ext：表示處理后的文件后綴名。

grunt常用函數

grunt.initConfig：定義各種模塊的參數，每一個成員項對應一個同名模塊。
grunt.loadNpmTasks：加載完成任務所需的模塊。
grunt.registerTask：定義具體的任務。第一個參數為任務名，第二個參數是一個數組， 表示該任務需要依次使用的模塊。

grunt常用模塊

• grunt-contrib-clean：刪除文件。
• grunt-contrib-compass：使用compass編譯sass文件。
• grunt-contrib-concat：合並文件。
• grunt-contrib-copy：復制文件。
• grunt-contrib-cssmin：壓縮以及合並CSS文件。
• grunt-contrib-imagemin：圖像壓縮模塊。
• grunt-contrib-jshint：檢查JavaScript語法。
• grunt-contrib-uglify：壓縮以及合並JavaScript文件。
• grunt-contrib-watch：監視文件變動，做出相應動作。

常用模塊插件的安裝方式，進入插件地址搜索想用的插件名稱，然后進去查看使用方式，這兒不做介紹。

插件地址：http://gruntjs.com/plugins

5.配置實例

實例需求：需要先把ES6語法轉換成ES5，然后通過uglify壓縮所有的js。（所有文件在src目錄下，里面需要轉換的ES6的語法只在某個文件夾下指定文件t.js）。

思路如下：先拷貝所有的src里面的內容到dist文件夾下，在dist文件夾下進行語法轉換，再進行js壓縮，其中Gruntfile.js配置如下：

    module.exports = function(grunt) {  
      //配置參數  
    grunt.initConfig({  
        pkg: grunt.file.readJSON('package.json'),      
        watch: {
           js: {
            files:['src/**/*.js'],
            tasks:['default'],
            options: {livereload:false}
          },
          babel:{
              files:'src/**/*.js',
              tasks:['babel']
          }
        },
        jshint:{
            build:['src/**/*.js'],
            options:{
                jshintrc:'.jshintrc' //檢測JS代碼錯誤要根據此文件的設置規范進行檢測，可以自己修改規則
            }
        }, 
        copy: {
          main: {
            expand: true,
            cwd: 'src',
            src: '**',
            dest: 'dist/',
          },
        },
        
        babel: {
            options: {
                sourceMap: false,
                presets: ['babel-preset-es2015']
                
            },
            dist: {
                files: [{
                   expand:true,
                   cwd:'dist/', //js目錄下
                   src:['**/t.js'], //所有js文件
                   dest:'dist/'  //輸出到此目錄下
                 }] 
            }
        },
        uglify: {  
            options: {
             mangle: true, //混淆變量名
             comments: 'false' //false（刪除全部注釋），some（保留@preserve @license @cc_on等注釋）
            },  
            my_target: {
                 files: [{
                   expand:true,
                   cwd:'dist/', //js目錄下
                   src:['**/*.js'], //所有js文件
                   dest:'dist/'  //輸出到此目錄下
                 }] 
            } 
        }
    });  
      
      //載入uglify插件，壓縮js 
      grunt.loadNpmTasks('grunt-contrib-copy');
      grunt.loadNpmTasks('grunt-babel');
      //grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-contrib-uglify'); 
      grunt.loadNpmTasks('grunt-contrib-watch');
      //注冊任務  
      grunt.registerTask('default', ['copy','babel','uglify']);
      grunt.registerTask('watcher',['watch']);
    }  

當然還有一種思路如下：

首先把需要轉換的ES6的js通過src目錄下，轉換到一個中間目錄，如babel目錄下，然后壓縮操作執行兩部分，第一部分就是除原src路徑下的ES6的js，其它都壓縮到dist中，第二部分就是壓縮中間目錄label下的js，如下配置，只寫部分：

babel: {
        options: {
            sourceMap: false,
            presets: ['babel-preset-es2015']   
        },
        dist: {
            files: [{
               expand:true,
               cwd:'src/', //js目錄下
               src:['**/t.js'], //所有js文件
               dest:'babel/'  //輸出到此目錄下
             }] 
        }
    },
    uglify: {  
        options: {
         mangle: true, //混淆變量名
         comments: 'false' //false（刪除全部注釋），some（保留@preserve @license @cc_on等注釋）
        },  
        my_target: {
             files: [{
               expand:true,
               cwd:'babel', //js目錄下
               src:['**/*.js'], //所有js文件
               dest:'dist/'  //輸出到此目錄下
             }] 
        },
        allother:{
          files: [{
               expand:true,
               cwd:'src/', //js目錄下
               src:['**/*.js','!t.js'], //所有js文件
               dest:'dist/'  //輸出到此目錄下
             }] 
        }
    }

 如果需要詳細了解用grunt搭建web前端開發環境，地址：http://www.cnblogs.com/moqiutao/p/5316336.html