Gulp
文章平均质量分 65
大前小白
哪有什么天才!
坚持做自己喜欢做的事情,这本身就是一种天赋。
展开
-
Gulp API
本节我们来看一下 Gulp 中的 API 方法,如下所示:方法描述src()创建用于从文件系统读取 Vinyl 对象的流dest()创建一个用于将 Vinyl 对象写入到文件系统的流symlink()创建一个流(stream),用于连接 Vinyl 对象到文件系统lastRun()检索在当前运行进程中成功完成任务的最后一次时间series()将任务函数和/或组合操作组合成更大的操作,这些操作将按顺序依次执行parallel()将任务功能和/或组原创 2021-04-16 11:29:43 · 160 阅读 · 0 评论 -
Gulp 插件
前面我们讲到在学习压缩 JS、CSS、图片等文件时,需要用到一些相关的插件。Gulp 提供了一些有用的插件来处理 HTML 和 CSS,JavaScript,图形以及一些其他内容。下面我们来看一下 gulp 中的一些不同类型插件。HTML和CSS插件插件描述autoprefixer自动包含 CSS 属性的前缀gulp-browser-sync用于监视 CSS 目录中的所有 HTML 和 CSS 文件,并在文件更改时对所有浏览器中的页面执行实时重新加载gulp-user原创 2021-04-14 11:51:59 · 226 阅读 · 0 评论 -
Gulp 编译Less和Sass
在实际应用中,我们一般会使用 CSS 的预处理器来编写 CSS 代码,例如 Less 和 Sass 语言,通过将脚本解析成 CSS 的脚本语言,可以减少 CSS 的重复,也可以节省时间。本节我们来学习如何通过 gulp 将 Less 和 Sass 编译成 CSS 代码。将 Less 编译成 CSS 需要使用 gulp-less 插件,将 Sass 编译成 CSS 需要用到 gulp-ruby-sass 插件。将Less编译成CSS例如在项目根目录下的 less 文件夹中有一个 style.less 文原创 2021-04-12 10:39:08 · 183 阅读 · 0 评论 -
Gulp 使用gulp压缩图片
在实际项目中,除了 HTML、CSS、JS 等文件,还会用到大量的图片。压缩图片可降低图片文件大小,提高页面打开速度。如何压缩图片使用 gulp 来压缩图片可以使用下面两个插件:gulp-imagemin:压缩率不明显,可以处理多种图片格式,可以引入更多第三方优化插件。gulp-smushit:压缩率比较大,只能处理 JPG 和 PNG。例如我们所有的图片压缩到 dist 目录下的 image 文件夹中,下面我们使用 gulp-imagemin 插件来实现图片的压缩,在项目中,除了 PNG 和原创 2021-04-06 13:47:32 · 664 阅读 · 0 评论 -
Gulp 使用gulp压缩CSS
我们除了可以使用 gulp 压缩 JS 文件,还可以压缩 CSS,压缩 CSS 代码可以降低 CSS 文件的大小,提高网页的打开速度。压缩CSS文件使用 gulp 来压缩 CSS 文件的操作步骤和压缩 JS 文件差不多,前面我们学习了如何压缩 JS 文件,那么再学习压缩 CSS 文件就会觉得很简单啦。压缩 CSS 文件同样需要用到相应的插件,关于 gulp 的 CSS 压缩插件,一共有如下三个:gulp-cssnanogulp-minify-cssgulp-clean-css上面三个插件,原创 2021-03-30 13:20:01 · 337 阅读 · 0 评论 -
Gulp 使用gulp压缩JS
本节我们学习如何使用 gulp 压缩 JS,在实际项目中,如果 JS 文件太大,那么可能导致页面加载变慢。所以我们可以将这些 JS 文件进行压缩。我们除了可以选择使用各种工具手动来进行压缩,还可以通过 gulp 来实现 JS 文件的压缩。压缩JS文件使用 gulp 来压缩 JS 文件,需要用到一个 gulp-uglify 插件,下面我们一起来看一下,要如何压缩 JS 文件。例如我们要实现的工作是压缩 js 目录下的所有 .js 文件,将这些 JS 文件压缩到 dist 目录下的 js 文件夹中。安装原创 2021-03-26 11:43:38 · 1119 阅读 · 0 评论 -
Gulp globs匹配规则
本节我们来学习 Gulp 中的 globs 的匹配规则。glob 是由普通字符或通配字符组成的字符串,用于匹配文件路径。我们可以使用一个或多个 glob 匹配规则在文件系统中定位文件。gulp.src()方法src() 方法需要一个 glob 字符串或一个 glob 字符串组成的数组来作为参数,确定哪些文件需要被操作。gulp.src(globs[, options])globs:文件匹配模式,类似于正则表达式,用来匹配文件路径。options:可选参数,通常情况不需要用到。示例:gul原创 2021-03-24 10:18:38 · 182 阅读 · 0 评论 -
Gulp 处理文件
Gulp 暴露了 src() 和 dest() 方法,用于处理计算机上存放的文件。其中 src() 方法接受一个 glob 参数,从文件系统中读取文件,然后生成一个 Node 流。它将所有匹配的文件读取到内存中并通过流进行处理。由 src() 方法产生的流应当从任务中返回并发出异步完成的信号,就如 创建任务文档中所述。示例:const { src, dest } = require('gulp');exports.default = function() { return src('src/原创 2021-03-19 12:01:52 · 204 阅读 · 0 评论 -
Gulp 异步执行
Node 库有多种方式处理异步功能,最常见的模式是 error-first callbacks,除此之外,还有 streams、promise()、event emitters、child processes、observables。gulp 任务规范化了所有这些类型的异步功能。任务完成通知当从任务中返回 stream、promise、event emitter、child process 或 observable 时,成功或错误值将通知 gulp 是否继续执行或结束。如果任务出错,gulp 将立即结束原创 2021-03-16 11:25:47 · 133 阅读 · 0 评论 -
Gulp 导出任务
Gulp 中的任务可以是可以分为 public(公有)和 private (私有)类型。公有任务:从 gulpfile 中被导出的任务称为公有任务,可以通过 gulp 命令直接调用。私有任务:在内部使用,通常作为 series() 或 parallel() 组合的组成部分。一个私有类型的任务在外观和行为上和其他任务是一样的,但是不能够被用户直接调用。如果需要将一个任务注册为公有类型的,只需要从 gulpfile.js 文件中将任务通过 export 导出即可。如何导出任务我们可以在 gulpf原创 2021-03-12 11:00:02 · 192 阅读 · 0 评论 -
Gulp 第一个Gulp任务
本节我们开始学习如何创建 Gulp 任务。每一个 Gulp 任务都是一个异步的 JavaScript 函数,这个函数是一个可以接收回调函数 callback 作为参数的函数,或者是一个返回 stream、promise、event emitter、child process 或 observable 类型值的函数。gulp.task()方法gulp.task() 用于创建一个 gulp 任务,语法如下所示:gulp.task(name[, deps], fn)name: 表示任务的名称。dep原创 2021-03-09 10:22:24 · 141 阅读 · 0 评论 -
Gulp 介绍与安装
Gulp 介绍与安装Gulp 是前端开发过程中一种对代码进行构建的工具,是自动化项目的构建利器。它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成,使用 Gulp 不仅可以轻松的编写代码,而且还大大的提高了我们的工作效率。Gulp 是基于 Node.js 的自动化任务运行器,它能自动化地完成前端代码(例如 HTML、CSS、JavaScript、Less、Sass、image 等文件)的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复原创 2021-03-03 11:36:27 · 116 阅读 · 0 评论