web 开发自动化grunt

现在web开发自动化已很流行，如何进行压缩文件，如何进行测试js是否正确，如何进行

检测html文件是否规范等等都可以通过web自动化技术进行实现，只要打一个命令即可。

本文主要是通过grunt进行实现。

grunt如何安装请参看Grunt中文网 "http://gruntjs.cn/"

如果要添加其他组件利用nodejs的npm包管理工具进行安装:"npm install grunt-contrib-quint --save-dev"

命令执行完后会自动在package.json中添加

在项目文件中要添加"package.json"和"Gruntfile.js"文件。

"package.json"：是项目信息。

"Gruntfile.js"：项目所加载的自动化处理组件。

 

"pageage.json"文件内容如下：

{
  "name": "gruntdemo",
  "version": "0.1.0",
  "description": "grungdemo",
  "author": "tom",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.5.0",
    "grunt-contrib-concat": "^0.4.0",
    "grunt-contrib-imagemin": "^0.7.1",
    "grunt-contrib-uglify": "^0.5.0"
  }
}

"Gruntfile.js"文件内容如下：

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        banner:'/*<%=pkg.author%>*/\n',
        clean:{
            src:['dist']
        },
        concat:{
            options:{
                banner:'<%=banner%>',
                stripBanners:true
            },
            dist:{
                src:['src/*.js'],
                dest:'dist/<%=pkg.name%>.js'
            }
        },
        uglify:{
           options:{
               banner:'<%=banner%>'
           },

          /* dist:{
               src:'<%=concat.dist.dest%>',
               dest:'dist/t<%=pkg.name%>.min.js'
           }*/

            /*dist:{
                files:{
                    'dist/t<%=pkg.name%>.min.js':['<%=concat.dist.dest%>']
                }
            }*/

            dist:{
                files:[
                    {
                        src:'<%=concat.dist.dest%>',
                        dest:'dist/t<%=pkg.name%>.min.js'
                    }
                ]
            }
        },
        imagemin: {
            /* 压缩图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3 //定义 PNG 图片优化水平
                },
                files: [
                    {
                        expand: true,
                        cwd: 'img/',
                        src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: 'img/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
                    }
                ]
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    //grunt.registerTask('img', ['imagemin']);
    grunt.registerTask('default',['clean','concat','uglify']);
};

　　现在通过grunt命令即可，实现js的压缩和图片的压缩。