gulp入门和使用

简述

gulp是前端开发中构建代码的工具，是自动化项目的利器。gulp能够对前端代码（html, css和js等）和资源（图像等）进行构建和优化，使用相应的工具可以完成各种各样的任务，实现构建、测试等复杂任务的自动化。理解和熟练使用gulp，可以大大提高前端开发的效率。

安装和简单使用

安装nodejs。gulp是基于nodejs的，因此要先安装nodejs。在命令行中输入

node -v

可验证node安装成功并查看版本号

>node -v
v4.4.3
>

安装npm。如果是在windows上，npm会随nodejs一起安装。在命令行中输入

npm -v

可查看版本验证安装成功。

>npm -v
2.15.1
>

安装gulp。需要运行gulp命令，应使用npm全局安装gulp。

>npm install gulp -g

当然也可以作为项目开发依赖：

>npm install gulp --save-dev

编辑package.json文件。node和npm项目必须的配置文件，可以在目录中新建一个package.json，也可以通过命令

npm init

进行配置。可参考node和npm说明。

编辑gulpfile.js。gulpfile.js是gulp项目的配置文件，项目中的任务都可以在gulpfile.js中定义。

gulp = require('gulp');
gulp.task('default', function() {
// define the default task
...
});

运行gulp。在命令行中输入

gulp

或者

gulp default

，即运行默认任务。如果定义了其他任务，可以输入

gulp taskname

执行任务。

深入理解

gulp是基于nodejs的任务运行器，借鉴了node简明语法，用户以非常简洁的语句就可以定义简单任务。对于复杂的任务，gulp的管道流方法也使得复杂任务变得有序而可控。gulp的流(nodejs)借鉴了unix的管道思想，上一级的输出是下一级的输入，操作上变得简单。借助管道流和相应插件，很容易就可以实现连续并入，异步工作流，数组工作流等复杂的任务模式。

gulp插件

gulp是一个基础，它给出了一系列的API使得用户方便的定义各种任务。而使得gulp强大的原因除了其简洁和高明以外，还有其丰富的插件为这个平台提供无数的功能。可以说，gulp只是用于定义任务，而真正处理任务细节的则是插件。coffee, javascript, less, html, css, img等文件的编译、合并、测试、压缩、格式化等操作，都可以在gulp平台下找到相应的插件，更复杂的，浏览器自动刷新、源代码自动部署等功能也有相应的插件。所有的插件都可以在gulp plugins中找到。