标签：
最近写了一个静态页面，写完之后都会上传到静态服务器上。但是我遇到一个问题，就是每次修改文件后就要重新找一些代码压缩网站去压缩静态文件。有没有什么办法能够自动化的处理呢？答案当然是肯定的。
我们可以借用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 节点），下面就用我的工程举例：
1 { 2 "name": "xxx", 3 "version": "1.0.0", 4 "description": "", 5 "main": "Gruntfile.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "repository": { 10 "type": "git", 11 "url": "" 12 }, 13 "author": "", 14 "license": "ISC", 15 "dependencies": { 16 "grunt": "~0.4.5", 17 "grunt-contrib-uglify": "~0.6.0", 18 "grunt-contrib-cssmin": "~0.10.0" 19 }, 20 "devDependencies": { 21 "grunt": "^0.4.5", 22 "grunt-contrib-concat": "~0.5.0", 23 "grunt-contrib-copy": "~0.6.0", 24 "grunt-contrib-less": "~0.11.4", 25 "grunt-contrib-requirejs": "~0.4.4", 26 "grunt-contrib-watch": "~0.6.1", 27 "grunt-replace": "~0.8.0", 28 "underscore": "~1.7.0" 29 } 30 }
这样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 对于我的工程我是这样写的：
1 //var fs = require(‘fs‘); 2 //var _ = require(‘underscore‘); 3 4 module.exports = function(grunt){ 5 //var jsFinal = [], cssFinal = []; 6 7 //项目配置 8 grunt.initConfig({ 9 pkg: grunt.file.readJSON(‘package.json‘), 10 11 uglify: { 12 options: { 13 mangle: { 14 except: [‘requirejs‘, ‘require‘, ‘define‘, ‘module‘, ‘exports‘, ‘md5‘, ‘_‘, ‘jQuery‘] 15 } 16 }, 17 build:{ 18 files: { 19 ‘build/js/main.js‘: [‘js/index.js‘] 20 } 21 }, 22 combine: { 23 expand: true, 24 files: { 25 ‘build/js/lib.js‘: [‘js/zepto.min.js‘, ‘js/PxLoader.js‘, ‘js/PxLoaderImage.js‘, ‘idangerous.swiper.min.js‘] 26 } 27 } 28 }, 29 copy: { 30 main: { 31 files: [ 32 { expand: true, src: ‘*.html‘, dest: ‘build/‘ } 33 ] 34 }, 35 binary: { 36 files: [ 37 { expand: true, src: ‘images/**‘, dest: ‘build/‘} 38 ] 39 } 40 }, 41 concat: { 42 options: { 43 stripBanners: true 44 }, 45 combine: { 46 expand: true, 47 files: { 48 ‘build/css/base.css‘: [‘css/idangerous.swiper.css‘, ‘css/animate.css‘, ‘css/index.css‘], 49 ‘build/css/main.css‘: [‘css/index.css‘] 50 } 51 } 52 }, 53 // watch: { 54 // lessc: { 55 // files: [‘styles/*.less‘], 56 // tasks: [‘less‘], 57 // options: { 58 // spawn: false, 59 // }, 60 // }, 61 // } 62 cssmin: { 63 options: { 64 ‘compatibility‘: ‘ie8‘ 65 }, 66 combine: { 67 expand: true, 68 69 files: { 70 ‘build/css/base.min.css‘: [‘build/css/base.css‘], 71 ‘build/css/main.min.css‘: [‘build/css/main.css‘] 72 } 73 } 74 } 75 76 77 78 }); 79 80 81 // grunt 官方任务加载 82 grunt.loadNpmTasks(‘grunt-contrib-copy‘); 83 grunt.loadNpmTasks(‘grunt-contrib-uglify‘); 84 grunt.loadNpmTasks(‘grunt-contrib-concat‘); 85 grunt.loadNpmTasks(‘grunt-contrib-cssmin‘); 86 // grunt.loadNpmTasks(‘grunt-contrib-watch‘); 87 88 89 //自定义任务 90 grunt.registerTask(‘default‘, [‘concat‘, ‘cssmin‘, ‘copy‘, ‘uglify‘]); 91 92 }
当这两个文件都写完了，我们可以运行grunt命令来生成我们的目标文件，在这里我指定生成到build文件夹下。
第三步：提交
当我准备提交，输入 git status 时我发现git监控了一些我不想提交的文件，我们可以用 .gitignore 来让git忽略一些文件和文件夹，方法如下：
首先我们要创建.gitignore文件 但是在windows下我们不能直接创建一个没有文件名的文件。我们需要通过Linux命令来创建它：
vi .gitignore
然后 :wq 保存文件，之后用编辑器打开，输入想忽略的文件夹，对于我的工程，如下：
1 node_modules/ 2 build/
即，我不想上传grunt加载的包 和 生成文件。
总结：使用grunt管理工程还有很多高大上的技巧，这里我仅介绍一些简单的用法。
标签：
原文地址：http://www.cnblogs.com/webARM/p/4301880.html
