将你的静态工程用Grunt管理

　　最近写了一个静态页面，写完之后都会上传到静态服务器上。但是我遇到一个问题，就是每次修改文件后就要重新找一些代码压缩网站去压缩静态文件。有没有什么办法能够自动化的处理呢？答案当然是肯定的。

　　我们可以借用Grunt来帮助我们完成。只需要将现有的工程配置成grunt工程即可。那么我们一起来看看吧：

第一步：在本地安装grunt

　　grunt是基于Node.js所以要先安装node   http://nodejs.org/download/

　　安装 grunt   

npm install -g grunt-cli

    如果以上安装不成功过，还可以尝试使用国内的代理，

npm install -g cnpm --registry=http://r.cnpmjs.org

    安装cnpm国内镜像, 以后所有npm命令换成用cnpm执行即可

第二步：配置grunt工程

　　使用grunt主要涉及两个文件 package.json 和 Gruntfile.js ，如果熟悉node的同学应该知道package.json 是描述工程和配置依赖的文件。这里也是一样的，Gruntfile.js是grunt运行的脚本。

这两个文件都可以手动添加或从其他的工程中拷贝过来。我们也可以通过命令自动生成其中的package.json文件。

　　我们先在工程中创建一个空文件Gruntfile.js ，然后输入命令：npm init 根据提示配置工程。注意要指定  "main": "Gruntfile.js" 其他的可以一路回车使用默认值。文件生成好了，我们可以打开它加入依赖的配置（添加 devDependencies 节点），下面就用我的工程举例：

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-uglify": "~0.6.0",
    "grunt-contrib-cssmin": "~0.10.0"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-concat": "~0.5.0",
    "grunt-contrib-copy": "~0.6.0",
    "grunt-contrib-less": "~0.11.4",
    "grunt-contrib-requirejs": "~0.4.4",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-replace": "~0.8.0",
    "underscore": "~1.7.0"
  }
}

　　这样package.json文件就写好了，接下来我们要根据package.json的配置安装依赖，方法是git bash到工程目录下，输入 npm install 或 cnpm install 将把 package.json->devDependencies下注明的依赖包下载到 node_modules

　　我们安装好后就可以编写Gruntfile.js文件了。详细的规则可以参照官网中给出的范例 http://www.gruntjs.org/docs/sample-gruntfile.html  对于我的工程我是这样写的：

//var fs = require('fs');
//var _ = require('underscore');

module.exports = function(grunt){
    //var jsFinal = [], cssFinal = [];

    //项目配置
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        uglify: {
            options: {
                mangle: {
                    except: ['requirejs', 'require', 'define', 'module', 'exports', 'md5', '_', 'jQuery']
                }
            },
            build:{
                files: {
                    'build/js/main.js': ['js/index.js']
                }
            },
            combine: {
                expand: true,
                files: {
                    'build/js/lib.js': ['js/zepto.min.js', 'js/PxLoader.js', 'js/PxLoaderImage.js', 'idangerous.swiper.min.js']
                }
            }
        },
        copy: {
            main: {
                files: [
                    { expand: true, src: '*.html', dest: 'build/' }
                ]
            },
            binary: {
                files: [
                    { expand: true, src: 'images/**', dest: 'build/'}
                ]
            }
        },
        concat: {
            options: {
                stripBanners: true
            },
            combine: {
                expand: true,
                files: {
                    'build/css/base.css': ['css/idangerous.swiper.css', 'css/animate.css', 'css/index.css'],
                    'build/css/main.css': ['css/index.css']
                }
            }
        },
        // watch: {
        //     lessc: {
        //         files: ['styles/*.less'],
        //         tasks: ['less'],
        //         options: {
        //             spawn: false,
        //         },
        //     },
        // }
        cssmin: {
            options: {
                'compatibility': 'ie8'
            },
            combine: {
                expand: true,

                files: {
                    'build/css/base.min.css': ['build/css/base.css'],
                    'build/css/main.min.css': ['build/css/main.css']
                }
            }
        }



    });


    // grunt 官方任务加载
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    // grunt.loadNpmTasks('grunt-contrib-watch');


    //自定义任务
    grunt.registerTask('default', ['concat', 'cssmin', 'copy', 'uglify']);

}

　　当这两个文件都写完了，我们可以运行grunt命令来生成我们的目标文件，在这里我指定生成到build文件夹下。

第三步：提交

　　当我准备提交，输入 git status 时我发现git监控了一些我不想提交的文件，我们可以用 .gitignore 来让git忽略一些文件和文件夹，方法如下：

　　首先我们要创建.gitignore文件 但是在windows下我们不能直接创建一个没有文件名的文件。我们需要通过Linux命令来创建它：

vi .gitignore

　　然后 :wq 保存文件，之后用编辑器打开，输入想忽略的文件夹，对于我的工程，如下：

node_modules/
build/

　　即，我不想上传grunt加载的包 和 生成文件。

总结：使用grunt管理工程还有很多高大上的技巧，这里我仅介绍一些简单的用法。