Grunt 合并压缩映射文件

场景：项目没有用过require.js，也没使用其它的构建工具，就是直接在html里引入js文件，但随着项目变大，js文件越来越多，导致第一次加载页面时需要下载的js文件和css文件就有30几个，那就是说页面加载出来就需要发起30几个http请求，而文件的大小在几K到400k左右，一般情况下载需要的时间都差不多（这是我观察浏览器的network发现的，不知道有没有什么官方一点的或者准确一点的范围），所以我就想把文件合并一下，几个js文件合并成一个文件，压缩后大小在400K左右，这样就可以最大限度的利用一次http请求了，文件也不能太大，否则http请求会变慢，可能就得不偿失了。

本来我打算用webpack的，但是使用webpack的话，它的打包js文件的原理是从入口文件开始一层层的根据require找你用的js文件，而不是我们手动让他打包合并哪个就可以的，js文件也不是全局的，只有你在你需要使用的js文件开头的位置require那个js文件才行，相应的webpack才可以找到这个js文件，并把它合并进出口文件。这样的话我的项目的js文件就需要大量重构了，每个js文件要定义出口，使用到的地方再require相应的js文件等等事情。

综上，我还是用Grunt做这件事情吧。

下面是Grunt的使用方法：根据任务需求，需要用到的插件：
合并文件：grunt-contrib-concat
语法检查：grunt-contrib-jshint
Scss编译：grunt-contrib-sass
压缩文件：grunt-contrib-uglify
监听文件变动：grunt-contrib-watch
建立本地服务器：grunt-contrib-connect
压缩css文件：grunt-contrib-cssmin

第一步安装：

把下面这些复制进你的package.json文件的devDependencies字段里，然后运行npm install，npm就会自动安装下面声明的这些依赖了。
"grunt":"^0.4.5",
"grunt-contrib-concat":"^1.0.1",
"grunt-contrib-cssmin":"^2.2.1",
"grunt-contrib-jshint":"^1.1.0",
"grunt-contrib-uglify":"^3.0.1",
"grunt-contrib-watch":"~0.6.1"
你也可以自己根据需要一个个的安装，下面是相应的命令：
npm install grunt --save-dev
npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect grunt-contrib-cssmin

2、配置Gruntfile.js文件，grunt就会根据这个文件的配置来执行它的任务了

module.exports=function(grunt) {//module.exports,定义Gruntfile.js的出口
'use strict';
grunt.initConfig({//grunt要执行的任务，就在这里配置
//saiku: grunt.file.readJSON('FilesPath.json'),//FilesPath.json,是一个你自己编写文//件路径的json，方便下面使用，比如'<%= saiku.path.css %>'，就是在这个json文件//里的对象，saiku.path.css是一个css文件路径的数组
watch: {//这个是配置监听files中的文件是否变化的
reload: {
files: ['<%= saiku.path.css %>','<%= saiku.path.html %>','<%= saiku.path.js %>'],
options: {
livereload: {
port:35729
}
}
}
}
cssmin:{//配置合并并压缩的
compressjs: {
options: {//sourcemap的配置是为了映射源代码，方便调试
sourceMapRoot:'./grunt/',
sourceMap:'sourceMap.min.css.map',
sourceMapUrl:'sourceMap.min.css.map'
},
files: {
'./css/style.min.css':[//'./css/style.min.css'意思就是把数组里的这些css文件合并后压缩进./css/style.min.css这个文件输出
'css/src/index.css',
'css/plugin/jquery-ui.css'
],
'./css/test.min.css':[
'css/src/test1.css',
'css/src/test2.css'
]
}
}
},
uglify: {//配置js的合并压缩任务
compressjs: {
options: {//同上
sourceMapRoot:'./grunt/',
sourceMap:'sourceMap.min.js.map',
sourceMapUrl:'sourceMap.min.js.map'
},
files: {
'./grunt/min/common.min.js': ['<%= saiku.path.js.common %>'],
'./grunt/min/render.min.js': ['<%= saiku.path.js.render %>'],
'./grunt/min/echartMap1.min.js': ['<%= saiku.path.js.echartMap1 %>'],
'./grunt/min/echartMap2.min.js': ['<%= saiku.path.js.echartMap2 %>']
}
}
},
jshint: {//配置检查js文件是否有错的任务
target: {
src : ['js/target/target.js']
}
}
});
//下面这些都是用例加载插件代码的，上面的任务用到了什么插件，这里必须就要加载相应的插件
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
//这是注册任务的，比如compressjs，就是所这册一个叫compressjs的任务，这个任务依次执行上面配置的'cssmin'和'uglify'的任务。你只需要在命令行执行grunt compressjs，就可以执行这个叫compressjs的任务了。
grunt.registerTask('concatjs',['concat']);
grunt.registerTask('compressjs',['cssmin','uglify']);
grunt.registerTask('default',['cssmin']);//default的任务不用grunt default来运行，只需要grunt就可以运行了。
};