Gulp：自动化构建工具

Posted 2020-08-26 海恋天

一.介绍：

　　gulp是一个基于流的构建工具，可以自动执行指定的任务，简洁且高效

二.优点：

1. 开发环境下，想要能够按模块组织代码，监听实时变化
2. css/js预编译，postcss等方案，浏览器前缀自动补全等
3. 条件输出不同的网页，比如app页面和mobile页面
4. 线上环境下，我想要合并、压缩 html/css/javascritp/图片，减少网络请求，同时降低网络负担

三.安装：

　　1.全局安装：cnpm install -g gulp

　　2.本地安装：cnpm install --save-dev gulp

四.使用：

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

　　　　var gulp = require(‘gulp‘);

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

　　　　　　//将你的默认的任务代码放在这里

　　　　});

　　2.运行gulp:

　　　　在文件目录命令行中输入：gulp 。

　　　　默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

　　　　想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。　　

五.核心API介绍：

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

　　　　task()方法用于定义任务，传入名字、依赖任务数组、函数即可，gulp会先执行任务数组，结束后调用定义的函数，可以通过此手段控制任务的执行顺利。

　　　　例子：要定义一个任务build来执行css、js、imgs这三个任务，我们可以通过指定一个任务数组而不是函数来完成。

　　　　　　gulp.task(‘build‘,[‘css‘,‘js‘,‘imgs‘]);

　　2.gulp.src(globs[,options]):

　　　　src()方法输入一个glob或者glob数组，然后返回一个可以传递给插件的数据流

　　　　Gulp使用node-glob来从你指定的glob里面获得文件：

　　　　例如：　

　　　　　　（1）.app.js 精确匹配

　　　　　　（2）.*.js 能匹配js后缀的文件

　　　　　　（3）.**/*.js 能匹配多级目录下的js 文件（包括当前目录下）

　　　　　　（4）.!js/app.js 精确排除

　　　　例子：js目录下包含了压缩和未压缩的js文件，我们想要压缩还没有被压缩的文件

　　　　　　gulp.src([‘js/**/*.js‘,‘!js/**/*.min.js‘]);

　　3.gulp.dest(path[,options])

　　　　dest()方法用来写文件，第一个参数表示最终输出的目录名。注意，它无法允许我们指明最终输出的文件名，只能指定输出文件夹名，而且在文件夹不存在的情况下会自动创建。

　　　　例子：把开发目录src下的js文件输出到部署目录dist下

　　　　　　gulp.src(‘src/**/*.js‘)

　　　　　　　　.pipe(gulp.dest(‘dist‘));

　　4.gulp.watch(globs[,opts],cb) 或者 gulp.watch(glob[,opts],tasks)

　　　　watch() 方法可以监听文件，它接收一个glob或者glob数组以及一个任务数组来执行回调

　　　　// 当templates目录下的模板文件发生变化，自动执行编译任务

　　　　　　gulp.task(‘watch‘,function (event){

　　　　　　　　gulp.watch(‘templates/*.tmpl.html‘,[‘artTemplate‘]);

　　　　　　　　console.log(‘Event type: ‘ + event.type); // added ,changed, or deleted

　　　　　　　　console.log(‘Event path: ‘ + event.path); // The path of the modified file

　　　　　　　});

　　　　Gulp.watch()的另一个非常好的特性是返回watcher对象

　　　　(1).watcher对象可以监听很多事件:

　　　　　　　change 文件变化时触发

　　　　　　　end 在watcher结束时触发

　　　　　　　error 在出现error时触发

　　　　　　　ready 在文件被找到并正被监听时触发

　　　　　　　nomatch 在glob没有匹配到任何文件时触发

　　　　(2).Watcher对象也包含了一些可以调用的方法：

　　　　　　　　watcher.end() 停止watcher

　　　　　　　　watcher.files() 返回watcher监听的文件列表

　　　　　　　　watcher.add(glob) 将与指定glob相匹配的文件添加到watcher（也接受可选的回调当第二个参数）

　　　　　　　　watcher.remove(filepath) 从watcher中移除个别文件

六.配置gulpfile.js:

　　任务会让所有的文件匹配js/*.js，并且执行JSHint，然后打印输出结果，取消文件缩进，最后把他们合并起来，保存为build/app.js，整个过程如下图所示：

　　Read files -> JSHint -> Minify -> Concat -> Write files:

　　代码：

　　　　var gulp = require(‘gulp‘),

　　　　　　jshint = require(‘gulp-jshint‘),

　　　　　　uglify = require(‘gulp-uglify‘),

　　　　　　concat = require(‘gulp-concat‘);

　　　　gulp.task(‘js‘,function(){

　　　　　　return gulp.src(‘js/*.js‘)

　　　　　　　　　　　　.pipe(jshint())

　　　　　　　　　　　　.pipe(jshint.reporter(‘default‘))

　　　　　　　　　　　　.pipe(uglify())

　　　　　　　　　　　　.pipe(concat(‘app.js‘))

　　　　　　　　　　　　.pipe(gulp.dest(‘build‘));

　　　　});