As web开发人员我们有时会发现自己一遍又一遍地重复同样乏味的任务. 如果您考虑运行构建命令或在浏览器上点击刷新所浪费的时间, 你会意识到你可以节省很多时间. 另外, 通过自动化您的流程, 你可以专注于手头的任务，而不是暂时离开“状态”(你的生产力状态)。.

在这个JavaScript自动化教程中，您将学习如何自动化您的 设计 以及使用狼吞虎咽地吃的开发过程. 如果你是 香港人，我鼓励你克服任何恐惧，继续往下读. 另一方面, 如果你是一名开发人员，那么一旦你理解了其背后的逻辑，你就能够轻松地解决这个问题.

狼吞虎咽地吃 是一个使用节点的构建系统.Js的流实现了一种异步的源-目标方法来实现自动化. 一切都是用JavaScript编写的, 因此，任何具有中级编码知识的人都可以轻松入门. 狼吞虎咽地吃构建过程由一组观察者和任务组成. 此外，狼吞虎咽地吃背后的社区维护了一个 庞大的插件目录 它可以帮助完成从连接JavaScript到从svg创建图标字体的任何任务.

狼吞虎咽地吃的替代品

还有很多其他选择, 其中大多数都是在过去几年里产生的——最引人注目的是 咕哝着说. 狼吞虎咽地吃和咕哝着说之间的竞争永远不会有明确的赢家, 因为他们都有各自的优点和缺点, 因此我将避免深入探讨这个问题. 简而言之, 咕哝着说对配置的严重依赖是人们转向狼吞虎咽地吃的JavaScript方法的原因. 同时，本机GUI实现，如 考拉 已经从那些不愿进入编程领域的人那里获得了一些进展. 然而, 捆绑的应用程序不可能达到狼吞虎咽地吃提供的可定制性和可扩展性的水平.

过程自动化基础

插件

插件是狼吞虎咽地吃完成每个过程的手段. 插件通过npm安装，并使用" require "启动。.

任务

对于狼吞虎咽地吃，任务总是有一个源和一个目标. 在它们之间是调用每个插件并将转换后的结果输出到下一个管道的管道.

着

着是引用文件的通配符模式. 着或着数组用作任务源中的输入.

观察人士

监视程序监视源文件的更改，并在检测到更改时调用任务.

狼吞虎咽地吃file.js

这就是“狼吞虎咽地吃”命令所指向的JavaScript文件. 它包含从任务到监视器或任务使用的其他代码片段的所有内容.

简单的任务

要开始，你需要 节点.js 以及具有管理员访问权限的命令行shell. 你可以 下载节点.js 从这里. 安装后，您可以运行以下命令来确保npm是最新的.

Sudo NPM install NPM -g

g标志表示安装将是全局的.

现在您已经准备好安装狼吞虎咽地吃并开始调用一些简单的任务. 使用以下命令全局安装狼吞虎咽地吃.

安装狼吞虎咽地吃 -g

注意，您也可以使用相同的命令进行更新.

你可以下载入门工具包，这将有助于你的第一个任务 toptal-狼吞虎咽地吃-tutorial / step1. 它包含一个非常简单的任务，将SCSS文件编译为CSS. 它使用的是狼吞虎咽地吃-sass插件 libsass. 我在这里选择libsass是因为它比Ruby快得多, 尽管它缺少一些功能. 在项目的根目录中, 您可以使用以下命令来安装所需的所有插件.

npm安装

这个命令读取包.Json文件并安装所需的所有依赖项. 我们在这里使用“npm安装”作为以下内容的简写:

NPM install 狼吞虎咽地吃——save-dev
安装狼吞虎咽地吃-sass——save-dev

" -save-dev "标志将选择的插件添加到包中.json devDependencies . json devDependencies . json devDependencies . json devDependencies . json, 你可以使用方便的" npm安装 ".

此时，您可以运行第一个任务. 执行如下命令，观察/ SCSS文件夹下的所有SCSS文件都被编译成对应目录下的CSS文件。

吞咽scss

注意，在本例中，我们指定要运行的任务. 如果省略任务名称，则将运行名为“default”的任务.

代码走查

以上只用7行JavaScript代码就完成了. 当然，一旦你掌握了它的简单性，你就会有宾至如归的感觉:

Var 狼吞虎咽地吃 = require('狼吞虎咽地吃');
Var SCSS = require('狼吞虎咽地吃-sass');

在开始时，我们初始化所有将要使用的插件. 狼吞虎咽地吃是我们唯一离不开的东西:

狼吞虎咽地吃.任务('scss'，函数(){

我们定义名为“scss”的任务:

返回吞咽.src(“scss / *.scss”)

为任务设置源文件. 它们被定义为globs. 在本例中，我们指的是“scss/”文件夹中以“”结尾的所有文件。.scss”.

.管(scss ())

此时，我们调用之前定义的狼吞虎咽地吃-sass插件:

.管(吞咽.桌子(css));

最后，我们用狼吞虎咽地吃.为我们的文件定义目标文件夹. 如果要连接的文件也可以是单个文件名.

进一步改进这个过程自动化实现, 你可以尝试包含一些其他的狼吞虎咽地吃插件. 例如，您可能希望使用最小化任务的最终产品 狼吞虎咽地吃-minify-css 并自动添加供应商前缀 狼吞虎咽地吃-autoprefixer.

雇用看守人

我已经创建了一个手表入门套件，你可以直接使用. 你可以从 toptal-狼吞虎咽地吃-tutorial /步骤2. 它包括先前创建的SCSS任务的增强版本, 还有一个监视源文件并调用任务的监视程序. 要启动它，使用以下命令:

狼吞虎咽地吃

该命令启动启动监视程序的“default”任务. 此时，您可以编辑任何SCSS文件，并观察CSS文件被重新编译的过程. 您将能够在命令行中看到狼吞虎咽地吃的通知.

代码走查

我们仅用3行额外的代码就为我们的任务设置了一个监视程序. 也就是说，watcher入门套件与介绍性示例没有太大区别. 在本节中，我们将详细介绍所有的添加和更改.

返回吞咽.src ([' scss / * * / *.scss”、“!scss / * * _ * '])

在这个例子中，狼吞虎咽地吃源代码提供了一个globs数组. 第一个包含所有以".Scss "也在子文件夹中，第二个不包括以" _ "开头的那些. 这样我们就可以使用SCSS的内置函数@import来连接_page.scss文件.

狼吞虎咽地吃.任务('default'， ['scss']，函数(){

这里我们定义了“默认”任务. “scss”任务在“default”之前作为依赖项运行。.

狼吞虎咽地吃.看(“scss / * * / *.scss”,[' scss ']);

最后，我们调用狼吞虎咽地吃的watch函数指向任何以“”结尾的文件.每当发生更改事件时，运行“Scss”任务.

现在可以为其他自动化过程(如JavaScript连接)创建新的监视程序了, 代码提示, CoffeeScript编译, 或者其他可能想到的东西. 为了更深入地研究这个JavaScript自动化实现，我建议添加 狼吞虎咽地吃-notify 哪个会在任务运行时通知您. 另外，您可以创建一个单独的任务来 最小化生成的CSS代码 并使“scss”任务作为该任务的依赖项运行. 最后，你可以使用 狼吞虎咽地吃-rename 添加“.结果文件的最小”后缀.

JavaScript自动化的高级狼吞虎咽地吃插件

在狼吞虎咽地吃的插件库中有成千上万的插件, 其中一些远远超出了构建过程的简单JavaScript自动化. 以下是一些杰出的例子:

BrowserSync

BrowserSync 它会注入CSS和JavaScript，并在发生更改时自动刷新浏览器. 另外, 它包含了一个ghostMode功能，可以用来吓唬你的同事或大大加快你的浏览器测试.

Browserify

Browserify 分析应用程序中的“require”调用，并将其转换为绑定的JavaScript文件. 此外，还有一个可以转换为浏览器代码的npm包列表.

Webpack

与Browserify类似， Webpack 旨在将具有依赖关系的模块转换为静态文件. 这给了用户更多的自由来设置模块依赖关系, 也不打算效仿节点.Js的代码风格.

业力

狼吞虎咽地吃-karma 为狼吞虎咽地吃带来了臭名昭著的测试环境. 业力遵循狼吞虎咽地吃也支持的最少配置方法.

结论

在这个过程自动化教程中，我展示了使用狼吞虎咽地吃作为构建工具的美丽和简单性. 通过遵循本教程中描述的步骤，您现在将准备好在将来和遗留项目中完全自动化您的软件开发过程. 花一些时间为你的老项目设置一个构建系统，在将来肯定会节省你宝贵的时间.

敬请关注即将推出的更高级的狼吞虎咽地吃教程.