用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