一篇文章，带你了解gulp

原理

gulp中使用的是node的stream（流），是以stream为媒介

先读取需要的stream，通过stream的pipe()方法导入到想要的地方，比如插件等，经过插件处理过的流可以继续导入到其他地方，包括写入到文件中

gulp有四个基本的API：gulp.task()，gulp.src()，gulp.dest()，gulp.watch()。见文章juejin.im/post/5b135b…

1. gulp.task()

定义任务名称
复制代码

2. gulp.src()

要对一个文件执行某个操作，要先把这个文件取到流中，这也就是gulp.src()做的事
复制代码

3. gulp.dest()

操作完成之后，就用gulp.dest()把文件写入输出的路径
复制代码

4. gulp.watch()

监视文件，并且可以在文件发生改动时候做一些事情。
复制代码

流程

先通过gulp.src()方法获取到我们想要处理的文件流，然后把文件流通过pipe方法导入到gulp的插件中，最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中

一、使用

gulpfile.js

匹配规则

*     // 0个或多个字符，可匹配a.js、a/，但是不能a/b.js 
**    //0个或多个目录、子目录，若末尾也可以匹配文件，可匹配a/b/c、a/b/c/d.js ?     // 匹配一个字符，不会匹配路径分隔符 
[...]  // 括号内任意一个字符，注意也是只匹配一个字符而已 
!(p1|p2|p3)   // 匹配任何与括号中给定的任一模式都不匹配的，传说中的“排除模式” ?(p1|p2|p3)   // 匹配括号中给定的任一模式0次或1次 
+(p1|p2|p3)   // 匹配括号中给定的任一模式至少1次 
*(p1|p2|p3)   // 匹配括号中给定的任一模式0次或多次 
@(p1|p2|p3)   // 匹配括号中给定的任一模式1次
复制代码

二、用法

1. 复制文件到指定文件夹

//复制文件到指定文件夹 
gulp.task('copy-index',function(){ 
return gulp.src('index.html') 
    .pipe(gulp.dest('dist')) 
    .pipe(connect.reload()); 
});

复制代码

2. 复制图片到指定文件夹

gulp.task('images',function(){ 
return gulp.src('images/*.jpg') 
//.pipe(imagemin()) //未成功 
.pipe(gulp.dest('dist/images')); 
/images/**/* images目录下的所有子目录和所有东西(包含东西最多) 
//images/*/* images目录下的东西和子目录下的东西 
//images/*.{png,jpg} images目录下的所有以png和jpg为后缀名的图片 
});

复制代码

3. 多个数据文件复制(后面的目录可以不存在，不存在的话会自动创建)，在前面加叹号是排除这个（类）文件

gulp.task('data',function(){ 
return gulp.src(['xml/*.xml','json/*.json','!json/secre-*.json'])
.pipe(gulp.dest('dist/data')); 
    
});
复制代码

4. 创建依赖任务

gulp.task('build',['copy-index','images','data'],function(){
    console.log('编译成功！');
});

复制代码

5. 创建监听任务

gulp.task('watch',function(){ //当文件发生变化时，自动执行相应的任务
    gulp.watch('index.html',['copy-index']);
    gulp.watch('images/**/*.{jpg,png}',['images']);
    gulp.watch(['xml/*.xml','json/*.json','!json/secre-*.json'],['data']); 
});
复制代码

6. 设置一个本地服务器

gulp.task('server',function(){ 
connect.server({ 
    root:'dist', //服务器的根目录 
    livereload: true //启用实时刷新的功能 }); 
});
复制代码

插件

• 自动加载

gulp-load-plugins var gulp = require('gulp');
//加载gulp-load-plugins插件，并马上运行它 
var plugins = require('gulp-load-plugins')(); 
// 这样如果需要使用gulp-rename插件，则plugins.rename 
注意插件需在 package.json 中写好并安装好
复制代码

• 重命名

gulp-rename
复制代码

• JS文件压缩

gulp-uglify
复制代码

• CSS文件压缩

gulp-minify-css
复制代码

• HTML文件压缩

gulp-minify-html
复制代码

• 图片压缩

gulp-imagemin
复制代码

• 文件合并

gulp-concat
复制代码

• 自动刷新

gulp-livereload
复制代码