Gulp:基于流的自动化构建工具

2021-11-29 13:50:59

前言

先说说为什么会使用gulp。

当你沉醉于撸代码之时，是否想过正规的前端代码需要走哪些流程，复杂的不说了，有几点想必你也思考过，比如：

1、代码的压缩合并、图片压缩怎么搞；

2、代码校验，是否规范；

3、Less是什么鬼？咋用呢？

作为一名新世纪富有朝气的九零后大军一员，虽为码农，心却蓬勃啊。对于新技术和新工具必然有着极大的兴趣，gulp在当下已不算太新鲜的技术，此次正逢机会，必然拿来练练手。

我们第四迭代构建工具用的是Grunt，这次第五迭代采用gulp，相对于前者，gulp属于晚辈，易于使用，配置简单，上手快，速度快。

1、什么是Gulp

Gulp.js是一种基于流，代码优于配置的新一代构建工具。官网给出的解释是：1、自动化； 2、平台移植性； 3、富生态系统；4、简单，详细的解释我们后面讲。

2、Gulp特性

· 易于使用

遵循代码优于配置策略，维护Gulp更像是写代码，Gulp可以让简单的任务简单，复杂的任务更可管理；

· 构建快速

优于Gulp基于Node.js，通过流式操作，减少频繁的IO操作，更快构建项目（Grunt便是频繁IO）；

· 插件高质

Gulp 有严格的插件指导策略，确保插件能简单高质的工作。并且你可以使用NPM享用超过2000个插件，甚至可以自己开发并发布；

· 易于学习

构建就像流管道一样，轻松加愉快。少量的API，使用起来so easy；

3、Gulp安装和使用

1、Gulp是基于Node.js的，所以先安装Node.js，这里不做赘述，通过英文官网下载或者中文网下载安装。

2、确保正确安装了Nodejs环境，然后用以下命令全局方式安装Gulp：

$ npm install gulp -g

3、如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上-save-dev：

$ npm install --save-dev gulp

4、在项目根目录创建gulpfile.js文件：

var gulp = require('gulp');

gulp.task('default', function() {

    console.log('hello world');

});

5、运行Gulp：

$ gulp

默认任务（名为'default'）将被执行，控制台输出 hello world。

如果需要运行指定任务，使用 gulp taskname命令。

4、Gulp API

使用gulp仅需知道4个API即可：gulp.task()，gulp.src()，gulp.dest()，gulp.watch()，所以很容易就能掌握，下面针对这四种做一个简单介绍：

gulp.src(globs[, options])

gulp.src() 方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息，本文暂不对文件流进行展开，你只需简单的理解可以用这个方法来读取你需要操作的文件就行了，globs 参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。 options 为可选参数。通常情况下我们不需要用到，暂不考虑。

gulp.dest(path[,options])

gulp.dest() 方法是用来写文件的，path 为写入文件的路径，options 为一个可选的参数对象，通常我们不需要用到，暂不考虑。

gulp.task(name[, deps], fn)

gulp.task 方法用来定义任务， name 为任务名， deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数， fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。

gulp.watch(glob[, opts], tasks)

gulp.watch() 用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。 glob 为要监视的文件匹配模式，规则和用法与 gulp.src() 方法中的glob相同。opts 为一个可选的配置对象，通常不需要用到，暂不考虑。 tasks 为文件变化后要执行的任务，为一个数组。

5、常用插件

编译Less (gulp-less)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

插件搜索：http://gulpjs.com/plugins/

插件安装（用less举例）：$ npm install gulp-less（安装更多只需拼接其后）

码农公寓

前言