Question

如何利用Grunt单独压缩各个JS和CSS文件，并生成对应的Source Map

Answer 1

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']);
};