阅读 71

一篇文章,带你了解gulp

原理

gulp中使用的是node的stream(流),是以stream为媒介

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

gulp有四个基本的API:gulp.task(),gulp.src(),gulp.dest(),gulp.watch()。见文章juejin.cn/post/684490…

  1. gulp.task()
定义任务名称
复制代码
  1. gulp.src()
要对一个文件执行某个操作,要先把这个文件取到流中,这也就是gulp.src()做的事
复制代码
  1. gulp.dest()
操作完成之后,就用gulp.dest()把文件写入输出的路径
复制代码
  1. 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()); 
});

复制代码
  1. 复制图片到指定文件夹
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为后缀名的图片 
});

复制代码
  1. 多个数据文件复制(后面的目录可以不存在,不存在的话会自动创建),在前面加叹号是排除这个(类)文件
gulp.task('data',function(){ 
return gulp.src(['xml/*.xml','json/*.json','!json/secre-*.json'])
.pipe(gulp.dest('dist/data')); 
    
});
复制代码
  1. 创建依赖任务
gulp.task('build',['copy-index','images','data'],function(){
    console.log('编译成功!');
});

复制代码
  1. 创建监听任务
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']); 
});
复制代码
  1. 设置一个本地服务器
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
复制代码
文章分类
前端