grunt配置

package.json

{
    "name": "grunt",
    "version": "0.0.1",
    "author": {
        "conpany": "baidu.com",
        "name": "xudeming",
        "email": "xudeming@baidu.com/xudeming208@126.com",
        "url": "http://www.css119.com"
    },
    "description": "Grunt common config",
    "dependencies": {
        "grunt-css-combo": "~0.2.2"
      },
    "devDependencies": {
        "grunt": "~0.4.2",
        "jpegtran-bin": "0.2.0",
        "grunt-contrib-uglify": "~0.2.7",
        "grunt-contrib-cssmin": "~0.7.0",
        "grunt-contrib-imagemin": "~0.4.1",
        "grunt-contrib-concat": "~0.3.0"
    }
}

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            /* 压缩js大小 */
            options: {
                banner: '/** \n * <%= pkg.name %>.js \n * @company: baidu.com \n * @author: xudeming@baidu.com/xudeming208@126.com \n * blog: http://www.css119.com \n * @data: <%= grunt.template.today("yyyy-mm-dd") %>\n*/\n'
            },
            build: {
                //启用动态扩展
                expand: true,
		//js文件源的文件夹
                cwd: 'js/',
		//匹配规则
                src: '*.js',
		//导出js的路径地址
                dest: 'js/min/',
		// 导出的js名
                ext: '.min.js'
            }
        },
        cssmin: {
            /* 压缩css大小 */
            options: {
                banner: '/** \n * <%= pkg.name %>.js \n * @company: baidu.com \n * @author: xudeming@baidu.com/xudeming208@126.com \n * blog: http://www.css119.com \n * @data: <%= grunt.template.today("yyyy-mm-dd") %>\n*/\n'
            },
            build: {
                expand: true,
                cwd: 'css/',
                src: '*.css',
                dest: 'css/min/',
                ext: '.min.css'
            }
        },
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                files: [{
                    expand: true,
                    cwd: "images/",
                    src: ["*.{jpg,png,gif}"],
                    dest: "images/min/"
                }]
            }
        }
    });
    //grunt.loadNpmTasks('grunt-css-combo'); //css合并
    //grunt.loadNpmTasks('grunt-contrib-concat'); //文件合并
    grunt.loadNpmTasks('grunt-contrib-uglify'); //js压缩
    grunt.loadNpmTasks('grunt-contrib-cssmin'); //css压缩
    //grunt.loadNpmTasks('grunt-contrib-htmlmin'); //html压缩
    grunt.loadNpmTasks('grunt-contrib-imagemin'); //图像压缩
    // 注册任务
    grunt.registerTask('default', ['uglify', 'cssmin', 'imagemin']);
};

步骤:
第一:安装grunt
第二:创建Gruntfile.js和package.json
第三:在cmd命令中进入文件夹的目录,如:cd 百度\site\grunt
第四:输入npm install 回车 安装grunt中配置好的插件(package.json中配置)
第五:完成后输入 grunt 回车 运行grunt(按照Gruntfile.js中设置的运行)
第六:完成后会在各个文件夹中自动创建min文件夹,里面即是各文件自动压缩后的文件
grunt插件:
http://www.gruntjs.org/plugins.html

posted @ 2014-10-22 16:50  xudeming208  阅读(175)  评论(0)    收藏  举报