grunt（2）——常用插件

本例配置了一个较为常用grunt插件配置，以满足基本的前端开发需求：

基本的安装与配置可以参考：http://blog.csdn.net/xwlyun/article/details/42076125

package.json：

{
	"name":"demo",
	"version":"0.1.0",
	"author":"xwl",
	"private":true,
	"devDependencies":{
		"grunt":"~0.4.0",
		"grunt-contrib-cssmin":"*",
		"grunt-contrib-uglify":"*",
		"grunt-contrib-watch":"*"
	}
}

cssmin：css压缩与合并；

uglify：js压缩与合并；

watch：文件监控自动执行任务；

Gruntfile.js：

module.exports = function(grunt){

	// 加载所有模块grunt-*，需要npm intall matchdep
	//require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.initConfig({
        pkg:grunt.file.readJSON('package.json'),

        // js压缩
        uglify: {
            options: {
                // 添加banner
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            // 压缩一个js文件
            build: {
                files: {
                    'style/hello.min.js': ['style/hello.js']
                }
            },
            // 分别压缩所有js文件
            build_all: {
                expand: true,	// 启用下面的选项
                cwd: 'style/',	// 待压缩的文件路径
                src: ['*.js','!*.min.css','!jquery*.js'],	// 匹配所有.js文件，排除.min.js文件，排除juery*.js文件
                dest: 'style/',	// 生成的压缩文件存放路径
                ext: '.min.js'	// 生成的文件后缀名为.min.js
            },
            // 压缩并合并js文件
            release: {
                files: {
                    'style/<%= pkg.name %>.min.js': [
                        'style/*.js',
                        '!style/*.min.js',
                        '!style/jquery*.js'
                    ]
                }
            }
        },

        // css压缩
        cssmin: {
            options: {
                // 添加banner
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            release: {
                files: {
                    'style/<%= pkg.name %>.min.css': [
                        'style/*.css',
                        '!style/*.min.css'
                    ]
                }
            }
        },

        // 监控
        watch: {
            js: {
                files: [
                    'style/*.js',
                    '!style/*.min.js',
                    '!style/jquery*.js'
                ],
                tasks: ['uglify:release']
            },
            css: {
                files: [
                    'style/*.css',
                    '!style/*.min.css'
                ],
                tasks: ['cssmin:release']
            }
        }

    });

    grunt.registerTask('default',[]);

};

cmd到项目根目录，执行grunt watch，开始执行grunt任务：