gulp

用自动化构建工具增强你的工作流程！

易于使用，通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
构建快速，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
插件高质，Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习，通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

安装

1 2	npm install gulp -g //全局安装 npm install --save-dev gulp //作为项目开发依赖安装

gulpfile.js

var gulp = require('gulp');
gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

运行

1
2
3

gulp  //默认执行default任务
//手动指定一个 gulpfile 的路径，这在你有很多个 gulpfile 的时候很有用
gulp --gulpfile <gulpfile path>

Task 可以通过 gulp <task> <othertask> 方式来执行。如果只运行 gulp 命令，则会执行所注册的名为 default 的 task，如果没有这个 task，那么 gulp 会报错。

gulp与grunt区别

Grunt 主要是以文件为媒介来运行它的工作流的，比如在Grunt中执行完一项任务后，会把结果写入到一个临时文件中，然后可以在这个临时文件内容的基础上执行其它任务，执行完成后又把结果写入到临时文件中，然后又以这个为基础继续执行其它任务…就这样反复下去。

而在Gulp中，使用的是Nodejs中的stream(流)，首先获取到需要的stream，然后可以通过stream的 pipe() 方法把流导入到你想要的地方，比如Gulp的插件中，经过插件处理后的流又可以继续导入到其他插件中，当然也可以把流写入到文件中。所以Gulp是以stream为媒介的，它不需要频繁的生成临时文件，这也是Gulp的速度比Grunt快的一个原因。

API介绍

掌握四个API即可

gulp.task() //定义一个使用 Orchestrator 实现的任务（task）。
gulp.src() //输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。
gulp.dest() //能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。
gulp.watch() //监视文件，并且可以在文件发生改动时候做一些事情。它总会返回一个 EventEmitter 来发射（emit） change 事件。

grunt

Grunt是 JavaScript 世界的构建工具。

为什么要用`grunt`？

Grunt 生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用 Grunt 自动完成任何事，并且花费最少的代价，只要配置好 Gruntfile 文件, 就可以实现自动执行。

每次运行 grunt 时，他就利用 node 提供的 require() 系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt 。如果找到一份本地安装的 Grunt ，CLI 就将其加载，并传递Gruntfile 中的配置信息，然后执行你所指定的任务。

安装

1
2
3

npm install -g grunt-cli   //全局安装
//Grunt CLI的任务很简单：调用与Gruntfile在同一目录中的Grunt，
//这样带来的好处是，允许你在同一个系统上同时安装多个版本的 Grunt。

Gruntfile

Gruntfile主要有以下几个模块组成。

“wrapper” 函数
项目与任务配置
加载grunt插件和任务
自定义任务

wrapper函数

1
2
3

module.exports = function(grunt) {
  // Do grunt-related things in here
};

项目和任务配置

1 2	grunt.initConfig({ });

加载插件和任务

1 2	// 加载能够提供"uglify"任务的插件。 grunt.loadNpmTasks('grunt-contrib-uglify');

自定义任务

1 2	// Default task(s)，可添加执行多个任务 grunt.registerTask('default', ['uglify']);

Grunt配置

Grunt 的 task 配置都是在 Gruntfile 中的 grunt.initConfig 方法中指定的。

此配置主要是以任务名称命名的属性，也可以包含其他任意数据。一旦这些代表任意数据的属性与任务所需要的属性相冲突，就将被忽略。

Gulp && Grunt