构建工具gulp的使用

gulp的安装

1、 安装node.js
如果是新建项目，执行 npm init 创建package.json文件

2、全局安装gulp
$ npm install –global gulp

3、项目本地安装gulp
$ npm install –save-dev gulp
( –save 可以让gulp插件显示在 package.json中)

gulp的使用

1、新建 gulpfile.js 文件

在项目根目录下创建一个名为 gulpfile.js 的文件。

此时我们的目录结构是这样的：
├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json

2、API介绍

gulp有四个常用的API:

gulp.src()
gulp.task()
gulp.dest()
gulp.watch()

更多API可以参考 gulp API 文档

2.1 gulp.src()
gulp.src(globs[, options])
globs：参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组。
options：为可选参数。

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

2.3 gulp.dest()
用来写文件。
gulp.dest(path[, options])
path：为写入文件的路径
options：为一个可选的参数对象

2.4 gulp.watch()
用来监听文件变化。
gulp.watch(glob[, opts, cb])
glob：为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同。
opts：为一个可选的配置对象，通常不需要用到
tasks：为文件变化后要执行的任务，为一个数组

3、插件

插件的安装
$npm –save-dev install 插件名

更多插件可以参考官方文档

赏

谢谢你请我吃糖果

微信