就算萌新也能看得懂的gulp教程(1):①读②改③写

简介:

1、安装gulp

gulp官网

gulp的安装

核心点是gulp文件的文件名一定是:gulpfile.js

task就是一个任务(要做的一系列事)

运行通过gulp来执行默认的task或者通过gulp task名来执行指定的task(因为一个gulp文件里可能有多个互相独立的task

2、读取文件

gulp.src(files[, options])

效果:

读取文件,产生数据流。

files的写法(字符串或数组)(必填):

  1. js/app.js:指定确切的文件名;
  2. js/*.js:某个目录所有后缀名为js的文件;
  3. js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件;
  4. !js/app.js:除了js/app.js以外的所有文件。
  5. *.+(js css):匹配项目根目录下,所有后缀名为js或css的文件。

files的写法(对象)(选填):

官方文档

1、options.buffer

默认是true,以buffer的形式读取(即一次读取整个文件),而改为false的时候则为stream(流)的方式读取。

流模式适合读取大文件,但是一般的html、css、js之类的,可以用buffer读取(但推荐用流)。

假如你需要读取完整个文件,然后对整个文件正则匹配,那么只能用buffer的形式。

2、options.read

默认true,设为false则file.contents返回值为null(不会读取文件)

还有 options.base 以及 node-globglob-stream 所支持的参数,但是这里略过。

示例:

var gulp = require('gulp');
gulp.task('default', function () {
    gulp.src('a.js')
});

就是这么简单,读取了一个文件

3、拿来一个流,做点事,再把他返回

stream.pipe(fn)

简单来说,通过gulp.src(),我们已经读取了一个文件流,然而我们需要对这个文件流做点事,那么就是pipe的作用了。

1、获取文件流:pipe函数用于处理文件流(来源于上下文),即调用pipe方法的这个对象;

2、处理文件流:pipe接受一个参数,这个参数用于处理这个文件流;

3、返回文件流:这个处理文件流的参数,最后要返回处理后的这个流;

4、连写pipe:因为拿来和最后返回的是同一个东西,因此是可以连写的(就像jQuery选择器选择到DOM后的连写那样);

先给一个简单的示例吧:

var gulp = require('gulp');
var through = require('through2');
gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            console.log('第一次处理')
            this.push(file)
            cb()
        }))
        .pipe(through.obj(function (file, encode, cb) {
            console.log('第二次处理')
            this.push(file)
            cb()
        }))
});

// 输出
第一次处理
第二次处理

4、对这个文件流做点啥

上面只是简述了pipe干嘛用的,那么现在我们实际用文件流的形式做点什么。

through2模块,用于处理文件流

这个模块干嘛用的,有兴趣的可以看看npm里的through2这个模块,知乎的回答

用这个模块,基本套路很简单:

1、引入 through2 模块;

2、调用他的obj方法,并传一个函数作为参数(这个函数是我们的处理函数);.pipe(through.obj(callback))

3、写这个callback处理函数;

4、这个callback有三个参数,分别是:fileencode(文件编码,比如'utf8'),cb(继续执行,类似 express 里路由的 next);

5、我们先对 file 干点啥,然后通过 this.push(file)(这里的file是修改后file)才能继续下面的 pipe,最后执行 cb() 继续下一个 pipe

基本示例(不对file做点什么):

var gulp = require('gulp');
var through = require('through2');

gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            console.log(arguments)
            this.push(file)
            cb()
        }))
});

// 输出结果
{ '0': <File "a.js" <Buffer 61 62 63 64 65 66>>,
  '1': 'utf8',
  '2': [Function] }

再给一个在原文件内容后拼接了一个字符串的DEMO:

var gulp = require('gulp');
var through = require('through2');

gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            // 显示当前的文本内容
            console.log(file.contents.toString())
            // 文本内容转为字符串
            var result = file.contents.toString()
            // 添加了一点东西
            result += ' => I add some words here'
            // 再次转为Buffer对象,并赋值给文件内容
            file.contents = new Buffer(result)
            // 以下是例行公事
            this.push(file)
            cb()
        }))
        .pipe(through.obj(function (file, encode, cb) {
            // 显示当前的文本内容(这次显示的是修改后的)
            console.log(file.contents.toString())
            this.push(file)
            cb()
        }))
        // 把文件写到一个新的文件夹里(不影响原有的),目录是modified-files
        .pipe(gulp.dest('modified-files'));
});

// 输出
abcdef
abcdef => I add some words here
并且modified-files/a.js文件里的内容是修改后的内容

讲道理说,懂以上方法,已经可以解决很多问题了。

无非就是读取文件,转为字符串,改改改,变为Buffer对象赋值回去,写到一个新的文件夹里(原文件名不变)

目录
相关文章
|
6月前
|
缓存 前端开发 JavaScript
一看就懂的gulp操作指南:让前端工作变得更加轻松(一)
一看就懂的gulp操作指南:让前端工作变得更加轻松
|
6月前
|
前端开发 JavaScript UED
一看就懂的gulp操作指南:让前端工作变得更加轻松(二)
一看就懂的gulp操作指南:让前端工作变得更加轻松
|
6月前
|
JavaScript 前端开发 API
一看就懂的gulp操作指南:让前端工作变得更加轻松(三)
一看就懂的gulp操作指南:让前端工作变得更加轻松
|
4月前
|
存储 前端开发 Java
若依修改----数据字典,可以用于维护系统中常见的静态数据,为什么不写死,用字典维护?数据字典的好处是一个地方编写数据,在多个地方,复用他,静态选项这里填完,换其他,用户性别这里的男女,就转成而来字典
若依修改----数据字典,可以用于维护系统中常见的静态数据,为什么不写死,用字典维护?数据字典的好处是一个地方编写数据,在多个地方,复用他,静态选项这里填完,换其他,用户性别这里的男女,就转成而来字典
分页列表数据不出来,初始化页面数据不出来的原因,Create中传一个参数1,解决bug的方法,学习敲代码的时候仔细与原项目比对,从上比到下
分页列表数据不出来,初始化页面数据不出来的原因,Create中传一个参数1,解决bug的方法,学习敲代码的时候仔细与原项目比对,从上比到下
|
4月前
|
Java 数据库连接 应用服务中间件
表单数据返回不到,HTTP状态 404 - 未找未找到,解决方法,针对这个问题,写一篇文章,理一下思路,仔细与原项目比对,犯错的原因是Mapper层的select查询表单数据写错,注意打开的路径对不对
表单数据返回不到,HTTP状态 404 - 未找未找到,解决方法,针对这个问题,写一篇文章,理一下思路,仔细与原项目比对,犯错的原因是Mapper层的select查询表单数据写错,注意打开的路径对不对
|
设计模式 消息中间件 JavaScript
干掉 “重复代码”,这三种方式绝了!
干掉 “重复代码”,这三种方式绝了!
36962 2
干掉 “重复代码”,这三种方式绝了!
jira学习案例63-userState的懒初始化和保存函数状态3
jira学习案例63-userState的懒初始化和保存函数状态3
201 0
jira学习案例63-userState的懒初始化和保存函数状态3
jira学习案例61-userState的懒初始化和保存函数状态1
jira学习案例61-userState的懒初始化和保存函数状态1
80 0
jira学习案例61-userState的懒初始化和保存函数状态1
jira学习案例62-userState的懒初始化和保存函数状态2
jira学习案例62-userState的懒初始化和保存函数状态2
51 0
jira学习案例62-userState的懒初始化和保存函数状态2