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

发布者：前端集合 // 发布时间：2014-08-07 20:34:00 // 分类：技巧应用 // 访问: 10,770 次 // 热度:

现在的项目中需要将各个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']);
};

Tags: 前端, grunt, source map, grunt js压缩, grunt css压缩