【前端日记-gulp系列-认识gulp】

一、gulp介绍及用法

1. 介绍

gulp是一个自动化构建工具，可以帮助开发者构建整个项目流程中的自动化部分，比如less、sass的编译，这样做可以节省开发者很多时间，集中精力做业务上等其他重要的事儿。

2. 基本用法

2.1 gulp可执行文件

一般命名为gulpfile.js，作为构建入口文件

2.2 安装

gulp官中API：点此链接
gulp以及gulp插件地址： 点此链接，可使用国内镜像cnpm
npm参数：-g表示全局安装，--save-dev(或-D)表示安装到devDependencies(只用于开发环境，不会发布到生产环境)，--save(或-S)表示安装到dependencies(会发布到生产环境)

npm install gulp -g 或 npm install gulp -D

2.3 使用

const gulp = require('gulp');

2.4 五个常用API

• gulp.src(globs[,opts])： 'globs'是一种匹配规则，可以匹配到指定路径的文件或目录，再输出stream，可以被pipe()到别的插件中。

常用示例：gulp.src('./**',{base: ''})，可以匹配到base指定路径并输出

• gulp.pipe(fn())：pipe会输出经过fn()处理的输入到pipe的stream。

常用示例：gulp.src('./*/.less').pipe(less())，会把匹配到的less文件编译为css文件，并输出stream

• gulp.dest(path[,opts])：会把gulp.src(globs)匹配到的文件经过中间一系列stream处理后生成文件到指定path。

常用示例：gulp.src('./*/.less').pipe(less()).pipe(gulp.dest('./dist'))

• gulp.task(name[,deps],callback)：自定义任务，name表示任务名，deps表示执行回调callback函数前先执行的任务。输入gulp命令默认执行'default'任务,callback可接受返回callback,stream, promise

常用示例：gulp.task('custom',['browersync'],function(){})

• gulp.watch(glob[,opts],tasks),gulp.watch(glob[,opts],callback) 两种形式：可以监控glob匹配到的文件或目录，根据变化作出相应事件(added, changed 或者 deleted)响应

常用示例：var watcher = gulp.watch('./*/.js', ['uglify','reload'])
watcher.on('change',callback)