srcmini本文概述
作为Web开发人员, 有时我们会发现自己一次又一次地重复同样繁琐的任务。如果你考虑通过运行构建命令或在浏览器上刷新来浪费多少时间, 你将意识到可以节省很多时间。此外, 通过自动化流程, 你可以专注于手头的任务, 而不必暂时离开”区域”(你的生产率状态)。
在此JavaScript自动化教程中, 你将学习如何使用Gulp自动化设计和开发过程。如果你更注重设计, 我鼓励你克服任何恐惧并继续阅读。另一方面, 如果你是一名开发人员, 则一旦了解了其背后的逻辑, 便可以立即浏览。
Gulp是一个构建系统, 它使用Node.js的流来实现自动化的异步源-目标方法。一切都是用JavaScript编写的, 因此任何具有中级编码知识的人都可以轻松上手。 Gulp的构建过程由一组观察者和任务组成。此外, Gulp背后的社区在npm内维护着一个巨大的插件目录, 这有助于完成从连接JavaScript到从SVG创建图标字体的所有任务。
Gulp的替代品
有很多替代方案, 其中大多数是在过去几年中产生的-最值得注意的是Grunt。 Gulp和Grunt之间的比赛永远不会有明确的获胜者, 因为他们都有优点和缺点, 因此我将避免深入探讨这一点。简而言之, Grunt对配置的高度依赖使人们倾向于使用Gulp的JavaScript方法。同时, 诸如Koala之类的本地GUI实现已经取得了一些进展, 主要是因为那些拒绝进行编码的人。但是, 使用捆绑的应用程序无法达到Gulp提供的可定制性和可扩展性水平。
过程自动化基础
外挂程式
插件是gulp完成每个过程的手段。插件通过npm安装, 并使用” require”启动。
任务
对于Gulp, 任务始终具有源和目标。在它们之间是调用每个插件并将转换结果输出到下一个管道的管道。
球
球形是引用文件的通配符模式。球形或球形数组在任务源中用作输入。
观察者
监视程序监视源文件中的更改, 并在检测到更改时调用任务。
gulpfile.js
这是” gulp”命令指向的JavaScript文件。它包含从任务到观察者的所有内容, 或任务使用的其他代码。
直截了当的任务
首先, 你需要Node.js和具有管理员访问权限的命令行外壳。你可以从此处下载Node.js。安装后, 你可以运行以下命令以确保npm是最新的。
sudo npm install npm -g
-g标志指出安装将是全局的。
现在, 你准备安装Gulp并开始调用一些简单的任务。使用以下命令全局安装Gulp。
sudo npm install gulp -g
请注意, 你也可以使用相同的命令进行更新。
你可以从srcmini-gulp-tutorial / step1下载入门套件, 以帮助你完成第一个任务。它包括一个非常简单的任务, 它将SCSS文件编译为CSS。它使用的是使用libsass的gulp-sass插件。我之所以选择libsass, 是因为它比Ruby替代方法要快得多, 尽管它缺少某些功能。进入项目的根目录后, 你可以使用以下命令安装所需的所有插件。
npm install
此命令读取package.json文件并安装所需的所有依赖项。我们在这里使用” npm install”作为以下内容的简写：
npm install gulp --save-dev
npm install gulp-sass --save-dev
” –save-dev”标志将选定的插件添加到package.json devDependencies, 以便下次你要安装所有内容时, 可以使用方便的” npm install”。
此时, 你可以运行第一个任务。运行以下命令, 并观察/ scss文件夹中的所有SCSS文件是否已编译为相应目录中的CSS：
gulp scss
请注意, 在此示例中, 我们指定要运行的任务。如果我们省略任务名称, 则将运行一个名为” default”的名称。
代码演练
以上仅用7行JavaScript代码完成。当然, 一旦你掌握了简单性, 你就会感到宾至如归：
var gulp = require('gulp');
var scss = require('gulp-sass');
首先, 我们初始化将要使用的所有插件。 Gulp是我们唯一不能缺少的人：
gulp.task('scss', function() {
我们定义名为” scss”的任务：
return gulp.src('scss/*.scss')
设置任务的源文件。这些被定义为glob。在此示例中, 我们引用” scss /”文件夹中以” .scss”结尾的所有文件。
.pipe(scss())
此时, 我们调用先前定义的gulp-sass插件：
.pipe(gulp.dest('css'));
最后, 我们使用” gulp.dest”来定义文件的目标文件夹。如果文件是串联的, 则也可以是单个文件名。
为了进一步改善该流程自动化实施, 你可以尝试包括一些其他Gulp插件。例如, 你可能想使用gulp-minify-css缩小任务的最终产品, 并使用gulp-autoprefixer自动添加供应商前缀。
雇用观察员
我已经创建了一个Watcher入门套件, 你可以立即使用它。你可以从srcmini-gulp-tutorial / step2下载它。它包括以前创建的SCSS任务的增强版本, 以及监视源文件并调用该任务的监视程序。为了启动它, 请使用以下命令：
gulp
此命令启动”默认”任务, 该任务将启动观察程序。此时, 你可以编辑任何SCSS文件, 并观看CSS文件重新编译的过程。你将可以在命令行中查看Gulp的通知。
代码演练
我们仅用3行额外的代码就为我们的任务设置了一个观察者。就是说, 观察者入门套件与入门示例并没有太大区别。在本节中, 我们将介绍所有添加和更改。
return gulp.src(['scss/**/*.scss', '!scss/**/_*'])
在此示例中, Gulp源提供了一组glob。第一个包括子文件夹中所有以” .scss”结尾的文件, 第二个不包括以” _”开头的文件。这样, 我们可以使用SCSS的内置函数@import连接_page.scss文件。
gulp.task('default', ['scss'], function() {
在这里, 我们定义”默认”任务。 ” scss”任务在”默认”之前作为依赖项运行。
gulp.watch('scss/**/*.scss', ['scss']);
最后, 我们调用Gulp的watch函数来指向任何以” .scss”结尾的文件, 并在发生更改事件时运行” scss”任务。
现在, 你可以为其他自动化过程创建新的观察程序, 例如JavaScript串联, 代码提示, CoffeeScript编译或任何其他可能想到的过程。为了更深入地研究此JavaScript自动化实现, 我建议添加gulp-notify, 它将在任务运行时通知你。另外, 你可以创建一个单独的任务以最小化生成的CSS代码, 并使” scss”任务作为对此的依赖项运行。最后, 你可以使用gulp-rename将” .min”后缀添加到生成的文件中。
用于JavaScript自动化的高级Gulp插件
Gulp的插件库中有成千上万的插件, 其中有些远远超出了构建过程的简单JavaScript自动化。以下是一些出色的示例：
浏览器同步
进行更改后, BrowserSync会注入CSS, JavaScript并自动刷新浏览器。另外, 它还包含ghostMode功能, 可用于吓colleagues同事或大大加快浏览器测试的速度。
浏览器
Browserify分析应用程序中的” require”调用, 并将其转换为捆绑的JavaScript文件。另外, 还有可以转换为浏览器代码的npm软件包列表。
Webpack
与Browserify相似, Webpack旨在将具有依赖性的模块转换为静态文件。这给用户提供了更多关于如何设置模块依赖项的自由, 并且不旨在遵循Node.js的代码样式。
业力
Gulp-karma将臭名昭著的测试环境带到了Gulp。业力遵循Gulp也认可的最少配置方法。
总结
在这个过程自动化教程中, 我展示了使用Gulp作为构建工具的美丽和简单性。通过按照本教程中描述的步骤进行操作, 你现在可以在未来和旧项目中完全自动化你的软件开发过程。花一些时间为较早的项目建立构建系统肯定会为你节省宝贵的时间。
请继续关注即将推出的更高级的Gulp教程。
相关：对速度的需求：顶级JavaScript编码挑战赛回顾
评论前必须登录！
注册