用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