grunt
是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：
① 压缩文件
② 合并文件
③ 简单语法检查
”自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。”
Grunt 基于 Node.js ，用 JS 开发，这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件们，都作为一个 包 ，可以用 NPM 安装进行管理。所以 NPM 生成的 package.json 项目文件，里面可以记录当前项目中用到的 Grunt 插件，而 Grunt 会调用 Gruntfile.js 这个文件，解析里面的任务（task）并执行相应操作。
安装
有了nodeJs环境后（也就是得先安装nodejs），便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI
官方推荐在全局安装CLI（grunt的命令行接口），在命令行输入：
npm install -g grunt-cli
（这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库 然后应用我们项目中的GruntFile配置，并执行任务）
接下来：生成 package.json 文件
可以去网上找找（复制粘贴）这个 package.json 文件其实是 Node.js 来描述一个项目的文件，JSON 格式。生成这个文件超级简单，推荐用命令行交互式的生成一下：在项目文件下 npm init
也可以自己模仿写：
{ "name": "demo",
"file": "zepto",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" }, "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-uglify": "~0.2.1", "grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.5.0", "grunt-strip": "~0.2.1" },
"dependencies": { "express": "3.x" }
}
安装 Grunt 和所需要的插件
.合并文件：grunt-contrib-concat
在项目文件根目录上：
npm install grunt --save-dev
表示通过 npm 安装了 grunt 到当前项目，同时加上了 –save-dev 参数，表示会把刚安装的东西添加到 package.json 文件中。可打开 package.json 文件看下，是不是多了
"devDependencies": {
"grunt": "^0.4.5"
}
命令行输入以下安装插件npm install --save-dev grunt-contrib-concat grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-connect配置 Gruntfile.js 的语法
这个文件尤其关键，他一般干两件事情：
① 读取package信息
② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）
Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面
module.exports = function (grunt) {
//你的代码
}
接下来任务配置代码、插件加载代码、任务注册代码。
这三块代码，任务配置代码就是调用插件配置一下要执行的任务和实现的功能，插件加载代码就是把需要用到的插件加载进来，任务注册代码就是注册一个 task，里面包含刚在前面编写的任务配置代码。
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
build: {
src: ‘src/<%= pkg.name %>.js‘,
dest: ‘build/<%= pkg.name %>.min.js‘
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);（压缩）
grunt.loadNpmTasks(‘grunt-contrib-concat‘);（合并）
grunt.registerTask(‘default‘, [‘uglify‘，‘uglify‘]);
也就是最后配置结果代码为
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘),
uglify: {
options: {
banner: ‘/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
},
build: {
src: ‘src/<%=pkg.file %>.js‘,
dest: ‘dest/<%= pkg.file %>.min.js‘
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks(‘grunt-contrib-uglify‘);
// 默认任务
grunt.registerTask(‘default‘, [‘uglify‘]);
}
最后命令行输入
grunt
参考：http://www.cnblogs.com/yexiaochai/p/3603389.html
http://gruntjs.com/getting-started
还是初学，等以后再深入了解grunt吧
gulp
gulp是基于Nodejs的自动任务运行器，它能自动化的完成js/coffee/less/html/image/css等文件的测试，检查，合并，压缩，格式化，浏览器自动刷新，部署文件生成，并监听文件在改动后重复指定这些步骤。在实现上，它借鉴来了Unix操作系统的管道（pipe）思想，前一级输出，直接变成后一级的输入，使得在操作上非常简单。gulp和grunt非常类似，但相比于grunt的频繁IO操作，gulo的操作就更快写了
现在开始安装：
npm install -g gulp（首先确保已经正确安装nodejs环境，然后以全局的方式安装gulp）
基于自己建的项目文件下 npm install --save-dev gulp(全局安装完后，自己要用到gulp的每一个项目都要单独安装一次，也就是所谓的局部安装)
【全局安装gulp是为了执行gulp任务，项目也安装gulp是为了调用gulp插件功能】
自动生成package.json:npm init(基于项目文件根目录)
安装依赖：npm install gulp-uglify --save-dev(即便本地系统里面没有，则命令运行后便装到了自己项目的依赖里 package.json中)其他插件类比即可
在自己的项目文件中建立gulpfile.js
var gulp=require（‘gulp‘）;//引入gulp
var uglify=require(‘gulp-uglify‘);//
var concat=require(‘gulp-concat‘);
var paths={
script:[‘js/index.js‘,‘js/main/js‘]//(项目文件js中的两个文件)
}
gulp.task(‘default‘,function(){
gulp.src(paths)
.pipe(uglify())
.pipe(concat(‘all.min.js‘))
.pipe(gulp.dest(‘build‘));
});
最后：运行 gulp;
关于自动加载插件
npm install --save-dev gulp-load-plugins
流式开发的gulp 本人还有待学习
原文：http://www.cnblogs.com/xiaoai-tang/p/6498449.html