前端开发入门：前端构建工具gulp入门教程

迈不过友情╰ 2022-08-19 02:17 400阅读 0赞

### 1、什么是Gulp ###

> [gulp.js][] 是一种基于流的，代码优于配置的新一代构建工具。
> 
> `Gulp` 和 `Grunt` 类似。但相比于 `Grunt` 的频繁的 `IO` 操作，`Gulp` 的流操作，能更快地完成构建。[  
> ][gulp.js]
> 
> [Gulp][gulp.js]是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的，因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript（或者CoffeeScript）里。前端开发工程师还可以用自己熟悉的语言来编写任务去lint JavaScript和CSS、解析模板以及在文件变动时编译LESS文件（当然这些只是一小部分例子）。
> 
> Gulp本身虽然不能完成很多任务，但它有大量插件可用，开发者可以访问[插件页面][Link 1]或者在npm搜索gulpplugin就能看到。例如，有些插件可以用来[执行JSHint][JSHint]、[编译CoffeeScript][CoffeeScript]，[执行Mocha测试][Mocha]，甚至[更新版本号][Link 2]。
> 
> 对比其他构建工具，比如[Grunt][]，以及最近流行的[Broccoli][]，我相信Gulp会更胜一筹（请看后面的”Why Gulp?”部分），同时我汇总了一个使用[Javascript编写的构建工具清单][Javascript]，可供大家参考。
> 
> Gulp是一个可以[在GitHub上][GitHub]找到的开源项目。
> 
>   
>

### 2、Gulp特性 ###

*  **使用方便**

通过代码优于配置的策略，`Gulp`可以让简单的任务简单，复杂的任务更可管理。

*  **构建快速**

通过流式操作，减少频繁的 `IO` 操作，更快地构建项目，IO操作就是磁盘的IO操作。

*  **插件高质**

`Gulp` 有严格的插件指导策略，确保插件能简单高质的工作。

*  **易于学习**

少量的API，掌握`Gulp`可以毫不费力。构建就像流管道一样，轻松加愉快。

### 3、Gulp安装 ###

`Gulp`是基于 `Node.js`的，故要首先安装 [Node.js][]

npm install -g gulp npm install —-save-dev gulp

### 4、Gulp使用 ###

`Gulp`的任务都是以[插件][Link 3]的形式存在，本次示例以 [gulp-jshint][] 为例，展示`Gulp`的常规用法。

**安装 gulp-jshint**

npm install gulp-jshint --save-dev

**创建 gulpfile.js**

[gulp项目][gulp]有一个 `Sample gulpfile`。直接一下就OK了。

var gulp = require('gulp'); var jshint = require('gulp-jshint'); var paths = { scripts: 'js/**/*.js', }; gulp.task('lint', function() { return gulp.src(paths.scripts) .pipe(jshint()) .pipe(jshint.reporter('default')); });

然后执行命令行

gulp lint

即可。

### 5、Gulp总结 ###

`Gulp` 相比于 `Grunt` 有很多优点，比较直观的：就是学习曲线比较平滑。比Grunt速度更快、配置更少。

`Gulp`还有很多高级的特性，详见[官方文档。][Link 4]

**Gulp插件列表**

> [http://gulpjs.com/][gulp.js]
> 
> 前面提到过，Gulp是[为数不多][Javascript]的使用JavaScript开发的构建工具之一，也有其他不是用JavaScript开发的构建工具，比如Rake，那么我们为什么要选择Gulp呢?
> 
> 目前最流行的两种使用JavaScript开发的构建工具是Grunt和Gulp。Grunt在[2013年非常流行][2013]，因为它彻底改变了许多人开发网站的方式，它有上千种插件可供用户使用，从linting、压缩、合并代码到使用Bower安装程序包,启动Express服务都能办到。这些和Gulp的很不一样，Gulp只有执行单个小任务来处理文件的插件，因为任务都是JavaScript（和Grunt使用的大型对象不同），根本不需要插件，你只需用传统方法启动一个Express服务就可以了。  
> 
> 
> Grunt任务拥有大量的配置，会引用大量你实际上并不需要的对象属性，但是Gulp里同样的任务也许只有几行。
> 
>   
> 
> 
> [  
> ][gulp.js]

[gulp.js]: http://gulpjs.com/
[Link 1]: http://gulpjs.com/plugins/
[JSHint]: https://www.npmjs.org/package/gulp-jshint/
[CoffeeScript]: https://www.npmjs.org/package/gulp-coffee/
[Mocha]: http://npmjs.org/package/gulp-mocha
[Link 2]: http://npmjs.org/package/gulp-bump
[Grunt]: http://gruntjs.com/
[Broccoli]: http://www.solitr.com/blog/2014/02/broccoli-first-release/
[Javascript]: https://gist.github.com/callumacrae/9231589
[GitHub]: https://github.com/gulpjs/gulp/
[Node.js]: http://nodejs.org/download/
[Link 3]: http://gratimax.github.io/search-gulp-plugins/
[gulp-jshint]: https://www.npmjs.org/package/gulp-jshint
[gulp]: https://github.com/gulpjs/gulp
[Link 4]: https://github.com/gulpjs/gulp/tree/master/docs
[2013]: http://www.smashingmagazine.com/2013/10/29/get-up-running-grunt/