就算萌新也能看得懂的gulp教程(1):①读②改③写-阿里云开发者社区

开发者社区> 零零水> 正文

就算萌新也能看得懂的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对象赋值回去,写到一个新的文件夹里(原文件名不变)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8459 0
《UNIXLinux程序设计教程》一2.4 读和写流
本节书摘来自华章出版社《UNIXLinux程序设计教程》一 书中的第2章,第2.4节,作者:赵克佳 沈志宇,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
657 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10894 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10256 0
MyCat教程【读写分离】
本文我们来给大家介绍下通过MyCat来实现MySQL的读写分离操作
11 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12119 0
【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验十八:SDRAM模块① — 单字读写
实验十八:SDRAM模块① — 单字读写 笔者与SDRAM有段不短的孽缘,它作为冤魂日夜不断纠缠笔者。笔者尝试过许多方法将其退散,不过屡试屡败的笔者,最终心情像橘子一样橙。《整合篇》之际,笔者曾经大战几回儿,不过内容都是点到即止。
799 0
+关注
零零水
主攻JS
234
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载