如何利用Grunt单独压缩各个JS和CSS文件,并生成对应的Source Map
现在的项目中需要将各个JS和CSS文件压缩成对应独立的min文件,并要求生成对于的Source Map。这么琐碎繁杂的事情当然得交给Grunt来做了。
花了2个小时上网搜索了下各种解决方案并研究了下,最终达到了我想要的效果。具体见代码:
1. package.json
{
"name": "xxx",
"version": "0.0.1",
"author": "xxx",
"devDependencies": {
"grunt": "~0.4.4",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-cssmin": "~0.10.0"
}
}
2. Gruntfile.js
module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容,形成json数据
pkg: grunt.file.readJSON('package.json'),
// 压缩所有js并生成source map
uglify: {
my_target: {
options: {
sourceMap: true
},
files: [
// 可以直接作用于文件夹下所有文件
{
expand: true,
cwd: 'app/js',
// 排除.min的文件
src: ['*.js', '!*.min.js'],
// 输出和输入在同一目录
dest: 'app/js',
ext: '.min.js'
},
// 也可以指明具体一一对应的文件
{
// core
'core/jsCompare.min.js': 'core/jsCompare.js',
'core/jsHelper.min.js': 'core/jsHelper.js',
'core/jsShare.min.js': 'core/jsShare.js',
// dijia
'app/dijia/dijia.min.js': 'app/dijia/dijia.js',
'app/dijia/location.min.js': 'app/dijia/location.js'
}
]
}
},
// 压缩所有css
cssmin: {
minify: {
expand: true,
cwd: 'resources/css/',
src: ['**/*.css', '**/!*.min.css'],
dest: 'resources/css/',
ext: '.min.css'
}
}
});
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin']);
};