用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