gulp基础-安装、任务、文件处理

一、什么是gulp(读音:/ɡʌlp/ )

    |--官方解释:前端的自动化构建工具,增强你的工作流程。将开发流程中让人痛苦或耗时的任务自动化,从而
    减少你所浪费的时间,创造更大的价值。
        |--简单:代码优于配置、node 最佳实践、精简的 API 集,gulp 让工作前所未有的简单。
        |--高效:基于 node 强大的流能力,gulp 在构建过程中并不把文件立即写入磁盘,从而提高了构建速度。
        |--生态:遵循严格的准则,确保我们的插件结构简单、运行结果可控。

官网截图

    |--非官网理解:是基于nodejs的前端自动化构建工具,其作用是压缩文件、合并文件、格式化文件、
    监听文件变化、部署等。大多数项目中,前端技术栈用于构建打包工具一般是webpack/gulp。

二、如何安装gulp

    |--第一步:因为是基于nodejs的自动化构建工具,所以先检查是否安装node。
        |--1.打开powershell(win10)或cmd
        |--2.powershell:win10比cmd更强大,具体怎么强大自己去查。
        |--3.输入命令:node --version,我本机已经安装了nodejs,具体怎么安装nodejs就不说了。

node版本信息

    |--第二步:安装gulp命令行工具gulp-cli

安装gulp-cli

    |--第三步:创建项目gulp-project1

创建项目

    |--第四步:进入项目目录,输入命令npm init,自动生成package.json文件

生成package.json文件
生成后的文件目录及文件

    |--第五步:安装gulp,作为开发时的依赖项。

安装gulp并查看是否安装成功
package.json添加了gulp依赖

    |--第六步:创建gulpfile.js入口文件。

创建gulpfile.js

    |--第七步:测试,在项目根目录输入gulp。

输出结果

    |--上述任务中没有实际操作,只是一个输出。下面我们就可以在这个文件中,写入实际的任务,进行相关
    的操作了。

三、创建任务(Task)

    |--gulp task:每一个任务都是一个异步的javascript函数,函数可以接收一个callback作为参数,或是返回
    stream、promise、event emitter、child process、observable类型值的函数。
    |--任务分为两种:公开public和私有private
        |--公开的task:在gulpfile.js文件中被导出(export)的任务,可以通过gulp命令直接调用。
        |--私有的task:在内部使用,通常作为series()或parallel()组合的组成部分。
    |--案例:

私有和共有任务
查看任务结构

    |--组合任务
        |--串行任务(series):series()函数可放入任意多个任务,顺序执行。
        |--平行任务(parallel ):parallel()函数可放入任意多个任务,并行执行。
        |--注意:当使用 series() 组合多个任务(task)时,任何一个任务(task)的错误将导致整个任务组合
        结束,并且不会进一步执行其他任务。当使用 parallel() 组合多个任务(task)时,一个任务的错误将
        结束整个任务组合的结束,但是其他并行的任务(task)可能会执行完,也可能没有执行完。

串行和并行组合任务
tasks结构

        |--series和parallel可以嵌套使用:

嵌套使用
结构

    |--扩展:任务的返回类型
        |--任务是一个异步函数,node库有多种处理异步的功能,最常见的就是callback,上面案例中的,但是还有
        很多方式,例如下面的方式:
            |--streams:

返回流

            |--promises:

返回promise对象

            |--event emitters:

返回event emitter

            |--child process:

返回child process

            |--observables:

返回observable

            |--callback:如果任务不返回任何内容,那么必须使用callback来指示任务已经完成。如需通过callback
            把任务中的错误告知gulp,那么把Error添加到callback参数中。

使用callback

四、gulp之src()、dest() 和 stream的pipe()方法

    |--gulp Api提供了两个方法src()和dest(),用于处理计算机上存放的文件。
        |--src():接收glob参数,从文件系统中读取文件(Vinyl对象),然后生成一个Node 流(stream),他将
                      所有匹配到的文件读取到内存中,并通过流进行处理。
            |--返回值:是一个可以在管道的开始或中间使用的流,用于根据给定的globs添加文件。
            |--Vinyl对象:描述文件的元数据对象,Vinyl实例的主要属性是文件系统中文件核心的path和contents。
            |--src参数:src(globs,[options])
                |--globs:globs 是一串文字和/或通配符,如 *, **, 或 !,用于匹配文件路径。也可以是字符串数组。
                |--options:buffer、read、since、removeBOM、base、root .. ..可查看官网。
            |--.pipe():流(stream)提供了一个主要的API是.pipe(),用于连接转换流(Transform streams)或
                             可写流(Writable streams)。
        |--dest():接收一个输出目录作为参数,并且产一个用于将Vinyl对象写入到文件系统的Node流。通常
                        作为终止流(terminator stream),当他接受到通过管道传输的文件时,他会将文件内容及文件
                        属性写入到指定目录。
            |--返回值:该方法返回一个可以在管道中间或末尾使用的流,用于在文件系统上创建文件。
            |--dest参数:dest(directory,[options]);
                |--directory:将写入文件的输出目录的路径,如果使用一个函数,该函数将与每个 Vinyl 对象一起
                                    调用,并且必须返回一个字符串目录路径。(string/function)
                |--options:cwd、mode、dirMode、append... ...
        |--组合使用:大多数情况利用.pipe()方法将插件放置在src()和dest()之间,并转换流中的文件。
    |--示例:

将src里的js文件输出到output文件夹

五、glob是什么?

    |--定义:glob是由普通字符串和/或通配符组成的字符串,用于匹配文件路径,可以利用一个或多个glob在文件
    系统上定位文件。
    |--src第一个参数:src() 方法接受一个 glob 字符串或由多个 glob 字符串组成的数组作为参数,用于确定哪
    些文件需要被操作。glob 或 glob 数组必须至少匹配到一个匹配项,否则 src() 将报错。当使用 glob 数组
    时,将按照每个 glob 在数组中的位置依次执行匹配 - 这尤其对于取反(negative) glob 有用。
    |--匹配规则:
        |--分隔符和字符串片段
            |--分隔符:/
            |--字符串片段:/内容/,两个分隔符之间的所有字符组成的字符串。
            |--注意1:在glob中,\\字符被保留作为转义符使用。例如:‘hello_\\*_world’,星号不在是通配符,而是
                          普通字符。
            |--注意2:避免使用node的path模块创建glob,容易产生无效的glob。
        |--一个星号(*):在一个字符串片段中匹配任意数量的字符,包括零个匹配。对于匹配单级目录下的
                                      文件很有用。不能匹配多级。

单级所有js文件匹配

        |--两个星号(**):在多个字符串片段中匹配任意数量的字符,包括零个匹配。 对于匹配嵌套目录下的
                                       文件很有用。请确保适当地限制带有两个星号的 glob 的使用,以避免匹配大量不必
                                       要的目录。

匹配scr下所有js文件

            |--一个叹号(!):取反,由于 glob 匹配时是按照每个 glob 在数组中的位置依次进行匹配操作的,
                                        所以 glob 数组中的取反glob 必须跟在一个非取反的 glob 后面。第一个 glob 匹配到
                                        一组匹配项,然后后面的取反 glob 删除这些匹配项中的一部分。如果取反 glob 只是
                                        由普通字符组成的字符串,则执行效率是最高的。即:数组中第一项取出所有匹配项,
                                        第二项去掉不想要的项。

取反用法

            |--匹配重叠:两个或多个 glob 故意或无意匹配了相同的文件就被认为是匹配重叠了。如果在同
                                 一个 src() 中使用了会产生匹配重叠的 glob,gulp 将尽力去除重叠部分,但是在
                                 多个 src() 调用时产生的匹配重叠是不会被去重的。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,001评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,210评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,874评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,001评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,022评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,005评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,929评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,742评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,193评论 1 309
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,427评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,583评论 1 346
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,305评论 5 342
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,911评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,564评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,731评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,581评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,478评论 2 352

推荐阅读更多精彩内容

  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,295评论 0 10
  • 1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp: npm install...
    F_imok阅读 2,371评论 1 11
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 926评论 0 3
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    build1024阅读 528评论 0 0
  • Sass&Gulp 一、sass介绍 (一) SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计...
    锋享前端阅读 1,497评论 0 3