grunt（2）——常用插件

来源：互联网发布：局域网文件夹同步软件编辑：程序博客网时间：2024/04/30 00:53

本例配置了一个较为常用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任务：

0 0