JavaScript

Gulp.js简介

克雷格的盾牌
分享

开发人员花在编码上的时间非常少。即使我们忽略那些恼人的会议，大部分工作都是一些基本的、会消磨你一天工作时间的任务:

  • 从模板和内容文件生成HTML
  • 压缩新的和修改的图像
  • 将Sass编译为CSS代码
  • 删除控制台而且调试器脚本语句
  • 将ES6转换为跨浏览器兼容的ES5代码
  • 代码检测和验证
  • 连接和缩小CSS和JavaScript文件
  • 将文件部署到开发、登台和生产服务器

每次进行更改时都必须重复执行任务。一开始你的意图可能是好的，但最可靠的开发人员会忘记压缩一两个图像。随着时间的推移，前期制作任务变得越来越艰巨和耗时;您将害怕不可避免的内容和模板更改。这是一项枯燥、重复的工作。把时间花在更有利可图的工作上会更好吗?

如果是，你需要一个任务跑或构建过程．

听起来太复杂了!

创建构建过程需要时间。这比手动执行每个任务要复杂得多，但从长远来看，你将节省数小时的精力，减少人为错误，并节省你的理智。采取务实的方法:

  • 首先自动化最令人沮丧的任务。
  • 尽量不要让构建过程过于复杂;一两个小时就足够了。
  • 选择任务运行软件，并坚持使用一段时间。不要一时兴起就转向另一个选择。

有些工具和概念对你来说可能是新的，但是深呼吸，一次只专注于一件事。

任务运行器:选项

构建工具，例如GNU使已经有几十年了，但是特定于网络的任务运行器是最近才出现的现象。第一个达到临界质量的是咕哝着说-使用JSON配置文件配置的插件的Node.js任务运行器。《Grunt》获得了巨大的成功，但却遭遇了速度和复杂的定制问题。许多问题在后来的版本中得到了解决，但是狼吞虎咽地吃已经到达并提供了一些改进:

  1. 内置了文件监视等功能。
  2. Gulp插件(大部分)设计简单，只做一项工作。
  3. Gulp使用的JavaScript配置代码更简洁、更容易阅读、更容易修改，并且提供了更好的灵活性。
  4. Gulp更快，因为它使用了node . js流通过一系列管道插件传递数据。文件只在每个任务结束时写入。

从那以后，出现了几个相互竞争的选择:

然而，Gulp仍然提供了吸引的灵活性和效率三分之一的网页开发者．如果可以编写JavaScript, Gulp允许通用任务做任何事情。

Gulp需要Node.js。JavaScript知识是有益的，但来自所有web编程信仰的开发人员会发现它很有用。

吞咽版本

Gulp.js 3.9.1已经是默认版本很多年了，虽然有Gulp 4可用，但它必须显式地安装NPM安装gulp@next．这是必要的，因为尽管插件仍然兼容，但Gulp 4使用了新的配置语法。

2018年12月10日，Gulp.js 4.0被宣布为默认并发布到npm。任何人使用安装gulp在一个新的项目将收到版本4。这将贯穿本指南。

步骤1:安装Node.js

Node.js可以下载到Windows, macOS和Linuxnodejs.org/download/．从二进制文件、包管理器和docker镜像安装有多种选项;完整的说明是可用的。

注意:Node.js和Gulp在Windows上运行，但如果它们依赖于本机Linux二进制文件，一些插件可能无法正常工作。Windows 10用户的一个选择是Windows for Linux子系统；这可以解决问题，但可能会引入其他问题。

安装完成后，打开命令提示符并输入以下内容以显示版本号:

节点- v

你将要大量使用的npm-用于安装模块的Node.js包管理器。检查它的版本号:

npm- v

注意:Node.js模块可以全局安装，所以它们可以在整个系统中使用。但是，大多数用户将没有权限写入全局目录，除非npm命令的前缀是sudo．有很多修复NPM权限的选项还有工具，比如NVM可以帮助但是你也可以改变默认目录，例如在Ubuntu/ debian平台上:

cd～mkdir.node_modules_globalnpm配置集前缀＝$ HOME/ .node_modules_globalnpm安装npm- g

然后在末尾添加以下一行~ / . bashrc：

出口路径＝＂$ HOME/ .node_modules_global / bin:美元的路径＂

然后更新如下:

源~ / . bashrc

步骤2:全局安装Gulp

全局安装Gulp命令行界面狼吞虎咽地吃命令可以在任何项目文件夹中运行:

npm安装gulp-cli - g

验证Gulp已安装如下:

杯- v

步骤3:配置项目

注意:如果您已经有package.json配置文件。

让我们假设文件夹中有一个新的或已存在的项目project1．导航到这个文件夹，用npm初始化它:

cdproject1npm初始化

您将被问到一系列问题:输入值或点击返回接受默认值。一个package.json文件，该文件存储npm完成时将创建配置设置。

注意:Node.js将模块安装到node_modules文件夹中。你应该把这个加到你的.gitignore文件，以确保它们没有提交到存储库。将项目部署到另一个系统时，可以运行npm安装来恢复它们。

在本指南的其余部分，我们假设您的项目文件夹包含下面列出的子文件夹。

src文件夹:预处理的源文件

它包含了更多的子文件夹:

  • 超文本标记语言- HTML源文件和模板
  • 图片-原始的未压缩图像
  • js—多个预处理脚本文件
  • scss-多个预处理的Sass.scss文件

构建文件夹:已编译/已处理文件

Gulp会根据需要创建文件和子文件夹:

  • 超文本标记语言-编译静态HTML文件
  • 图片-压缩图像
  • js-一个连接和简化的JavaScript文件
  • css-一个编译和简化的CSS文件

您的项目几乎肯定会有所不同，但下面的示例使用了这种结构。

注意:如果你在一个基于unix的系统上，你只是想遵循这个指南，你可以用下面的命令重新创建源文件夹结构:

mkdir- p src /｛html、图像、js scss｝

步骤4:本地安装Gulp

你现在可以使用下面的命令在你的项目文件夹中安装Gulp:

npm安装杯——save-dev

这将把Gulp作为开发依赖项安装“devDependencies”的部分package.json相应更新。我们假定Gulp和所有插件都是本指南剩余部分的开发依赖项。

备选部署选项

控件时不安装开发依赖项NODE_ENV环境变量设置为生产在您的操作系统上。你通常会在你的活动服务器上用macOS/Linux命令来做这件事:

出口NODE_ENV＝生产

或者在Windows上:

集NODE_ENV＝生产

本指南假定您的资产将被编译到构建文件夹并提交到Git存储库或直接上传到服务器。但是，如果您想改变资产的创建方式，最好在活动服务器上构建资产——例如，在生产环境中缩小HTML、CSS和JavaScript文件，而不是在开发环境中。在这种情况下，删除——save-dev在安装Gulp和它的插件时使用。例如:

npm安装狼吞虎咽地吃

中将Gulp设置为应用程序依赖项“依赖”的部分package.json．它将在您进入时安装npm安装并且可以在项目部署的任何地方运行。您可以删除构建文件夹，因为文件可以在需要时在任何平台上创建。

步骤4:创建Gulp配置文件

创建一个新的gulpfile.js项目文件夹根目录下的配置文件。添加一些基本代码来开始:

// Gulp.js配置常量/ /模块狼吞虎咽地吃＝需要（“杯”），//开发模式?devBuild＝（过程．env．NODE_ENV= = !“生产”），/ /文件夹src＝“src /”，构建＝“构建/”；

它引用Gulp模块，设置一个devBuild变量来真正的在开发(或非生产模式)中运行时，并定义源和构建文件夹位置。

注:本指南中提供ES6代码。这将适用于Node.js 6.0及以上版本。

gulpfile.js现在还不做任何事情，因为您需要遵循下面描述的下一步。

步骤5:创建Gulp任务

就其本身而言，Gulp什么也不做。你必须:

  1. 安装Gulp插件，以及
  2. 编写利用这些插件来做一些有用的事情的任务

你可以自己编写插件，但由于有近3000个插件可用，所以你不太可能需要自己编写。你可以使用Gulp自己的目录进行搜索gulpjs.com/plugins/,在npmjs.com，或者利用谷歌的强大功能搜索“gulp”某物”。

大多数任务将使用:

  • gulp.src(文件夹)从源文件夹中的文件创建流
  • gulp.dest(文件夹)将流作为文件输出到目标生成文件夹

可以调用任意数量的插件方法.pipe(插件)之间的.src而且.dest．

形象的任务

最好通过一个示例来演示这一点，因此让我们创建一个基本任务来压缩图像并将它们复制到适当的位置构建文件夹中。由于这个过程可能需要时间，所以我们只压缩新文件和修改过的文件。两个插件可以帮助我们:gulp-newer而且gulp-imagemin．从命令行安装它们:

npm安装Gulp-newer gulp-imagemin—save-dev

现在，我们可以在的顶部引用两个模块gulpfile.js：

// Gulp.js配置常量/ /模块狼吞虎咽地吃＝需要（“杯”），更新的＝需要（“gulp-newer”），imagemin＝需要（“gulp-imagemin”），

我们现在可以在末尾定义一个图像处理函数gulpfile.js：

//图像处理函数图片（）｛常量出＝构建+“图像/”；返回狼吞虎咽地吃．src（src+“图像/ * * / *”）．管（更新的（出））．管（imagemin（｛optimizationLevel：5｝））．管（狼吞虎咽地吃．桌子（出））；｝）；出口．图片＝图片；

所有任务在语法上都是相似的。这段代码执行以下操作:

  1. 它创建了一个名为图片．
  2. 它定义了出构建文件所在的文件夹。
  3. 对象中读取文件流src /图像/源文件夹。的* * / *确保子文件夹中的图像也被处理。
  4. 它将所有文件传输到gulp-newer模块。比相应的目标文件更新的源文件将被传递。其他的都被删除了。
  5. 它通过管道传输剩余的新/更改文件gulp-imagemin，设置一个可选参数optimizationLevel论点。
  6. 它将压缩图像输出到Gulp桌子/图像/文件夹中。
  7. 它输出一个公共图片任务，该任务调用图片函数。

保存gulpfile.js在你的项目中放置一些图片src /图像/文件夹，然后从命令行运行任务:

杯图片

所有图像都被相应地压缩，你会看到如下输出:

使用文件gulpfile.js运行“imagemin”．．．完成了“imagemin”在5.71gulp-imagemin女士:image1.png（保存48.7kB）gulp-imagemin: image2.jpg（保存36.2kB）gulp-imagemin: image3.svg（保存12.8kB）

尝试运行杯图片再一次;没有文件被处理，因为没有图像文件被更改。

HTML的任务

现在，我们可以创建一个类似的任务，从源HTML文件夹复制文件。方法可以安全地缩小HTML代码以删除不必要的空白和属性gulp-htmlclean插件。

的gulp-noop插件也将被安装。它不执行任何操作，这对于简单的开发/生产处理决策非常有用:

npm安装Gulp-htmlclean gulp-noop——save-dev

这些模块是在顶部加载的gulpfile.js：

常量/ /模块狼吞虎咽地吃＝需要（“杯”），无操作＝需要（“gulp-noop”），更新的＝需要（“gulp-newer”），imagemin＝需要（“gulp-imagemin”），htmlclean＝需要（“gulp-htmlclean”），

我们现在可以导出an超文本标记语言函数的末尾gulpfile.js：

// HTML处理函数超文本标记语言（）｛常量出＝构建+“html /”；返回狼吞虎咽地吃．src（src+“html / * * / *”）．管（更新的（出））；．管（devBuild?无操作（）：htmlclean（））．管（狼吞虎咽地吃．桌子（出））；｝出口．超文本标记语言＝狼吞虎咽地吃．系列（图片，超文本标记语言）；

这种重用gulp-newer并介绍了几个概念:

  1. 我们只通过管道传递HTMLgulp-htmlclean如果NODE_ENV设置为生产．因此，HTML在开发过程中保持未压缩状态，这可能对调试有用。
  2. 导出的超文本标记语言任务使用gulp.series ()将一个接一个执行的任务组合在一起。在这种情况下，图像()函数在之前运行html ()，确保HTML文件可以引用图像。

保存gulpfile.js和运行吞咽html从命令行。这两个超文本标记语言而且图片任务将运行。

JavaScript的任务

对你来说太容易了?让我们通过构建一个基本的模块绑定器来处理JavaScript文件。它将:

  1. 方法确保首先加载依赖项gulp-deporder插件。这将分析每个脚本顶部的注释，以确保正确的顺序-例如//需要:defaults.js lib.js .js．
  2. 将所有脚本文件连接成一个main.js文件使用gulp-concat．
  3. 删除所有控制台而且调试语句与gulp-strip-debug在生产模式下运行时。
  4. 最小化兼容es6的代码gulp-terser．
  5. 在开发模式下运行时附加源映射gulp-sourcemaps．

安装插件模块:

npm安装Gulp-deporder gulp-concat gulp-strip-debug gulp-terser gulp-sourcemaps—save-dev

然后把它们装在顶部gulpfile.js：

常量.．.concat＝需要（“gulp-concat”），deporder＝需要（“gulp-deporder”），要简洁＝需要（“gulp-terser”），stripdebug＝devBuild?零：需要（“gulp-strip-debug”），sourcemaps＝devBuild?需要（“gulp-sourcemaps”）：零，

注意:gulp-strip-debug而且gulp-sourcemaps为了提高效率，只在开发模式下加载模块。

接下来，导出一个newjs任务功能:

// JavaScript处理函数js（）｛返回狼吞虎咽地吃．src（src+“js / * * / *”）．管（sourcemaps?sourcemaps．初始化（）：无操作（））．管（deporder（））．管（concat（“main.js”））．管（stripdebug?stripdebug（）：无操作（））．管（要简洁（））．管（sourcemaps?sourcemaps．写（）：无操作（））．管（狼吞虎咽地吃．桌子（构建+“js /”））；｝出口．js＝js；

该功能与其他任务大致相同，但是sourcemap.init ()函数在代码转换之前调用sourcemaps.write ()在它们完成后调用。

保存，添加一些JavaScript文件到src / js /文件夹，然后运行吞咽js看奇迹发生!

CSS的任务

最后，让我们创建一个编译Sass的CSS任务.scss文件到单个. css文件使用gulp-sass．这是一个Gulp插件node-sass，它与超快结合LibSass Sass引擎的C/ c++端口．我们假设你是萨斯的主要档案scss / main.scss负责装载所有的部分。

我们的任务也将利用神话PostCSS通过gulp-postcss插件。PostCSS需要它自己的一组插件，我们将安装这些:

  • postcss-assets管理资产。这允许我们使用属性，如背景:解决(“image.png”);解析文件路径或背景:内联(“image.png”);到内联数据编码图像。
  • autoprefixer自动将供应商前缀添加到CSS属性。
  • css-mqpacker将对同一CSS媒体查询的多个引用打包到单个规则中。
  • cssnano以减少在生产模式下运行时的CSS代码。

这些插件大多数接受参数;更多信息请参考他们的文档。

最后，当在开发模式下使用时，源映射将附加到CSS文件中gulp-sourcemaps再一次。

安装所有模块:

npm安装Gulp-sass gulp-postcss postcss-assets autoprefixer css-mqpacker cssnano——save-dev

把它们装在顶部gulpfile.js：

常量.．.萨斯＝需要（“gulp-sass”），postcss＝需要（“gulp-postcss”），资产＝需要（“postcss-assets”），autoprefixer＝需要（“autoprefixer”），mqpacker＝需要（“css-mqpacker”），cssnano＝需要（“cssnano”），

我们现在可以导出一个新的css任务结束gulpfile.js．注意图片任务被设置为依赖项，因为postcss-assets插件可以在构建过程中引用图像:

// CSS处理函数css（）｛返回狼吞虎咽地吃．src（src+“scss / main.scss”）．管（sourcemaps?sourcemaps．初始化（）：无操作（））．管（萨斯（｛outputStyle：“嵌套”，imagePath：“/图片/”，精度：3.，errLogToConsole：真正的｝）．在（“错误”，萨斯．logError））．管（postcss（［资产（｛loadPaths：［“图像/”］｝），autoprefixer（｛浏览器：［“最后两个版本”，“> 2%”］｝），mqpacker，cssnano］））．管（sourcemaps?sourcemaps．写（）：无操作（））．管（狼吞虎咽地吃．桌子（构建+“css /”））；｝出口．css＝狼吞虎咽地吃．系列（图片，css）；

请注意,内(“错误”,sass.logError)确保Sass输出语法错误到控制台而不停止Gulp任务。

保存文件，添加适当的Sass.scss文件，并从命令行运行任务:

吞咽css

步骤6:自动化任务

我们一直在一次执行一个任务。我们可以通过导出a在一个命令中运行它们构建任务gulpfile.js：

//运行所有任务出口．构建＝狼吞虎咽地吃．平行（出口．超文本标记语言，出口．css，出口．js）；

的gulp.parallel ()方法同时运行任务。它可以与gulp.series ()创建复杂的依赖关系链。在这个例子中，exports.html，exports.css,exports.js并行运行，但是每一个都可能有依赖序列-包括图片的任务。

保存并进入吞咽构建在命令行执行所有任务。

这是不是太辛苦了?Gulp提供了一个.watch ()方法，该方法可以监视源文件，并在文件更改时运行适当的任务。它传递了一组要监视的文件/文件夹、任何选项(此处未使用)和要运行的任务函数(可选在其中)gulp.series ()和/或gulp.parallel ()方法)。

让我们导出一个新的看任务结束gulpfile.js：

//查看文件更改函数看（完成）｛//图像更改狼吞虎咽地吃．看（src+“图像/ * * / *”，图片）；// HTML更改狼吞虎咽地吃．看（src+“html / * * / *”，超文本标记语言）；// CSS更改狼吞虎咽地吃．看（src+“scss / * * / *”，css）；// js更改狼吞虎咽地吃．看（src+“js / * * / *”，js）；完成（）；｝出口．看＝看；

Gulp需要知道任务函数何时完成．这通常是通过返回一个Gulp流来处理的，但也可以是JavaScript Promise、事件发射器、可观察对象、子进程或回调。这里，我们使用一个名为(完成)表示所有看()已完成任务配置。

而不是跑杯看让我们立即添加一个可以通过运行来执行的默认任务狼吞虎咽地吃没有进一步的争论:

//默认任务出口．默认的＝狼吞虎咽地吃．系列（出口．构建，出口．看）；

保存gulpfile.js并输入狼吞虎咽地吃在命令行。您的图像、HTML、CSS和JavaScript将被处理，然后Gulp将保持活跃，观察更新并在必要时重新运行任务。打击Ctrl/Cmd + C终止监视并返回命令行。

第七步:盈利!

其他你可能会发现有用的插件:

Gulp任务可以运行任何JavaScript代码或Node.js模块。它们不一定是插件——例如:

  • browser-sync:当发生更改时自动重新加载资产或刷新浏览器
  • ▽:删除文件和文件夹(也许清理你的构建文件夹在每次运行的开始)

只要投入一点时间，Gulp就可以节省很多开发时间。的优点:

  • 插件很多
  • 使用管道的配置易于阅读和遵循
  • gulpfile.js是否可以在其他项目中进行调整和重用
  • 可以减少总页面重量以提高性能
  • 您可以简化部署
  • 编码gulpfile.js很有趣(嗯，比其他任务运行器使用的JSON配置更有趣)

有用的链接:

将上述过程应用于一个简单的网站，总重量减少了50%以上。您可以使用页面权重分析工具．

Gulp仍然是自动化任务运行的一个很好的选择，可以彻底改变您的工作流程。我希望本指南对您有用，并将Gulp应用于您的生产过程。

使用Babel和Gulp编译ES6模块到AMD和CommonJS＂></a> <div class= 使用Babel和Gulp编译ES6模块到AMD和CommonJS 拉维
如何实现工作流自动化＂></a> <div class= 如何实现工作流自动化 艾蒂安Margraff
一个简单的Sass Gulp 'y工作流＂></a> <div class= 一个简单的Sass Gulp 'y工作流 基蒂Giraudel
使用Gulp.js改进Ember.js工作流＂></a> <div class= 使用Gulp.js改进Ember.js工作流 Lamin Sanneh
Baidu