前端自动化工具Grunt自动化脚本，直接上例子。

项目根目录下建立三个文件

  1. package.json

    {
        "name": "grunt demo",
        "version": "0.1.0",
        "author": "sky",
        "devDependencies": {
            "matchdep": "~0.3.0",   //一次执行多次load任务
            "grunt": "~0.4.1",
            "grunt-contrib-clean":"*",
            "grunt-contrib-concat": "~0.3.0",
            "grunt-contrib-uglify": "~0.2.1",
            "grunt-contrib-jshint": "~0.10.0",
            "grunt-contrib-copy": "*",
            "grunt-contrib-watch": "~0.4.4",
            "grunt-contrib-htmlmin" : "*",
            "grunt-contrib-cssmin":"*",
            "grunt-contrib-imagemin":"*",
            "grunt-contrib-connect":"*"
        }
    }

  2. Gruntfile.js (注释代码看具体项目需要自行修改)

    /**
     * Created by sky on 2014/11/05
     * 自动化脚本
     */
    module.exports = function (grunt) {
        'use strict';

        //加载所有grunt任务
        require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

        //注册任务
        grunt.registerTask('build','全自动CSS、JS 压缩 生成文件到build文件夹',['clean','uglify:build', 'cssmin','imagemin','copy']);
        grunt.registerTask('server','本地创建服务器 及 文件监听',['connect','watch']);

        //参数配置
        var open = grunt.option('open') || false;

        //配置文件信息
        var cfg = grunt.file.readJSON('config.json'),
            serverConf = cfg.server[cfg.server.selected];   //本地web server信息

        var pkg = grunt.file.readJSON('package.json');

        //写入文件头的信息
        var banner = '/*\n' +
            ' * Copyright <%= grunt.template.today("yyyy") %>, <%= pkg.author %>\n' +
            ' *\n' +
            ' * Released on: <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT")  %>  '+ '<%= pkg.author %>' +'\n' +
            '*/\n';

        grunt.initConfig({
            pkg : pkg,
            //先清除上一次操作遗留的记录
            clean:{
                build:['./build/']
            },
            //JS代码校验
            // jshint : {
            //  //更多选项: http://www.jshint.com/docs/options/
            //  options : {
            //      eqeqeq : true,
            //      devel : true,
            //      asi : true, //忽略分号
            //      expr : true,  //支持赋值语句
            //      globals : {
            //          jQuery : true,
            //          console : true
            //      }
            //  },
            //  build : {
            //      files : {
            //          src : [ './js/*']
            //      }
            //  }
            // },
            //JS合并文件
            // concat: {
            //     options: {
            //         //文件内容的分隔符
            //         separator: '\n',
            //         stripBanners: true,
            //         banner: banner
            //     },
            //     build: {
            //         src: ['./js/*.js'],
            //         dest: './build/js/script.full.js'
            //     }
            // },
            //HTML压缩
          //   htmlmin : {
          //    //更多选项：https://github.com/gruntjs/grunt-contrib-htmlmin
          //    options : {
          //        removeComments : true,
          //        collapseWhitespace : true
          //    },
          //    minify : {
                //  expand : true,
                //  cwd : './html/',
                //  src : ['*.html'],
                //  dest : './build/html/',
                //  ext : '.html'
                // }
          //   },
            //JS压缩
            uglify : {
                //文件头部输出信息
                options: {
                    banner: banner,
                    report: "min"//输出压缩率，可选的值有 false(不输出信息)，gzip
                },
                //具体任务配置
                build:{
                    //用该方法表示只压缩js分别输出到对应文件夹,不合并js
                    expand : true,
                    cwd : './js/',
                    src : ['**/*.js'],
                    dest : './build/js/'

                    //用该方法表示先启动上面js合并再压缩
                    // src: ['<%= concat.build.dest %>'],
                    // dest: './build/js/script.js'
                }
            },
            //CSS压缩
            cssmin : {
                //文件头部输出信息
                options : {
                    banner : banner
                },
                minify : {
                    //用该方法会将所有css合并压缩成一个文件
                    // files : {
                    //  './build/css/style.css' : ['./css/*.css']
                    // }

                    //用该方法会压缩所有css并且保持每个css独立
                    expand : true,
                    cwd : './css/',
                    src : ['*.css'],
                    dest : './build/css/',
                    ext : '.css'
                }
            },
            //图片压缩
            imagemin : {
                build : {
                    files : [{
                        expand : true,          //启动下面选项
                        cwd : './css/images/',
                        src : ['**/*.{png,jpg,gif}'],
                        dest : './build/css/images/'
                    }]
                }
            },
            //将images文件夹copy到build目录下
            copy : {
                build : {
                    expand : true,
                    cwd : './images/',
                    src : '**',
                    dest : './build/images/',
                    filter : 'isFile'
                }
            },
            //本机运行一个web server
            connect: {
                server: {
                    options: {
                        port: serverConf.port,
                        hostname: serverConf.host,
                        base: serverConf.src,
                        open: open,
                        livereload:serverConf.livereload
                    }
                }
            },
            //监听文件变动
            //改动哪个文件类型 就执行哪个命令 减少多余命令的执行
            watch : {
                //更多选项： http://github.com/gruntjs/grunt-contrib-watch
                options : {
                    livereload : true
                },
                // html : {
                //  files : './html/*',
                //  tasks : ['htmlmin']
                // },
                //JS变动
                scripts : {
                    files : './js/*',
                    tasks : ['uglify:build']
                },
                //CSS变动
                css : {
                    files : './css/*',
                    tasks : ['cssmin']
                },
                //图片变动
                img : {
                    files : './css/images/*',
                    tasks : ['imagemin']
                },
                //内容图变动
                images : {
                    files : './images/*',
                    tasks : ['copy']
                }   
            }
            
        });
    }

  3. config.json (该文件看是否需要启动服务器来监听，若不需要不需配置)

    {
        "server":{
            "selected": "localhost",
            "localhost":{
                "host": "localhost",
                "port": "8081",
                "livereload": "35729",
                "src": "./"
            }
        }
    }

运行命令

npm install (加载安装相对应的包)

grunt build (执行grunt build全自动化命令，在项目根目录下生成build文件夹)

grunt server (启动服务器并且监听文件改动)