学习如何使用Gulp

如果你关注前端开发的世界，你肯定知道有多少工具存在。Git, Stylus, Broccoli, Node, Angular等等。

在本教程中，我们将学习Gulp。所有流行语中最时髦的。

狼吞虎咽地吃是一个构建自动化工具。

Gulp是工作卡车，我们把工具带放在那里。它帮助我们以更有效的方式使用工具带中的所有工具。

而不是管理多个应用程序为我们的单个项目提供工具，Gulp可以为我们提供一个自动化的构建过程。

在我们开始之前…

Gulp有一个命令行界面。

如果你不习惯使用cli，请参阅我的教程从命令行接口开始在阅读Gulp教程之前。

熟悉命令行接口是理解和使用我们将在本教程中介绍的内容的必要条件。

另外，我建议下载我的示例源文件。这些示例源文件将使本教程中的代码更容易测试。

示例文件在GitHub上。

下载样例文件

如果您使用Git，您可以发出以下命令:

Git克隆https://github.com/drewminns/sixrevisions_gulpstarter.git

在计算机上安装Gulp

Gulp利用了JavaScript应用程序平台node . js这为我们提供了一个运行应用程序的环境。

Node最大的特性之一——除了是开发应用程序的强大工具——是它自带的包管理器。调用Node的默认包管理器npm．

为了使用npm和Gulp，你需要安装节点．

一旦你安装了Node，你可以在命令行中使用npm来安装Gulp，以及你需要的任何其他包。

在CLI中，执行以下命令:

安装gulp -g

如果遇到麻烦:使用超级用户权限

如果上面的命令不起作用，请在命令前面加上sudo．这个命令意味着超做．

这允许管理员(超级用户)访问文件系统。

当您在执行命令时遇到问题时，请添加sudo在命令的开头:

sudo安装gulp -g

在输入上面的命令时，您可能会被要求输入密码。原因是我们正在尝试在我们的系统上全局安装Gulp包。如果你开始输入密码，你不会看到任何字符被输入。

放心吧，角色就在那里，但出于安全考虑，他们没有显示出来，以防有人从你的肩膀上看着你。

命令的解释

在继续之前，让我们先分析一下该命令每个部分的含义。

• npm是在npm范围内工作的命令。
• 安装行动是否在范围内执行npm．
• 狼吞虎咽地吃是我们要安装的包的名称。
• - g命令选项/标志代表什么全球．使用这个命令选项，我们表示希望Gulp对整个系统可用。

切换到项目目录

如果一切都成功安装，没有错误，那么继续，并将工作目录更改为下载示例文件的目录。

cd/ /项目/目录中

这就是我们的项目目录对于本教程。

在项目中使用Gulp

一旦我们在系统上安装了Gulp，我们就可以开始自动化我们的项目了。

创建包。json文件

执行如下命令:

npm init

当您键入命令时，您将能够创建一个名为package.json。

尽可能地填写这些字段，最后您将发现一个新创建的字段package.json文件在您的项目目录。

什么是package.json?

的package.json文件包含有关项目的信息。当我们向项目中添加更多的包时，该文件还将作为这些包的列表，告诉我们的系统需要哪些文件。

如果我们要将项目移动到另一台计算机上，或者与另一个希望使用相同构建任务的开发人员一起工作，则package.json该文件将作为清单使用。

创建gulpfile

任何使用Gulp的项目的引擎都是gulpfile.js文件。

这个JavaScript文件通常被引用为gulpfile．术语“gulpfile.js”和“gulpfile”在本教程上下文中是同义词。

gulpfile允许我们在项目中创建任务并自动化它们。的内容gulpfile.js将因项目而异。

让我们为项目创建一个gulpfile。

触摸gulpfile.js

安装Gulp插件

尽管我们在系统上安装了Gulp，但我们还需要在项目目录中安装它。执行如下命令:

NPM安装gulp

注意:你可能得打字sudo如果您在执行命令时遇到问题，请再次在命令的开头为自己提供系统访问权限。

接下来，让我们安装一些Gulp插件，这些插件将允许我们将Sass文件编译成CSS，然后将它们合并到一个CSS文件中。

在命令行中输入以下内容:

NPM安装gulp-sass

node_modules目录

你会注意到anode_modules命令发布后，已在项目目录中创建了npm安装命令。此目录包含运行插件所需的所有文件。

当我们安装Gulp插件和Node包时，它们将被放置在node_modules．

设置Gulp任务

在gulpfile.js，我们现在可以设置一个Gulp任务。

打开gulpfile.js在你最喜欢的代码编辑器中，让我们开始编码。

指定项目的依赖项

节点的要求()函数允许我们指定运行Gulp任务所需的插件。

这些被称为依赖关系．我们依靠它们来完成Gulp任务。

这样我们就不会调用要求()函数，每次我们想引用一个插件时，我们把要求()函数返回JavaScript对象。

Var gulp = require('gulp')， sass = require('gulp-sass')， concat = require('gulp-concat');

那么现在，当我们使用sass ()函数，我们讨论的是gulp-sass插件。当我们使用concat ()，我们引用gulp-concat插件。

使用项目的依赖项

一旦我们告诉Gulp我们的依赖项是什么，我们就可以设置一个任务。

我们将创建一个名为风格．

gulp.task (“风格”， function(){返回gulp.src('styles/*.scss') .pipe(sass({'sourcemap=none': true}) .pipe(concat('style.css')) .pipe(gulp.dest('styles/'))});

哇。

什么?

在上面的代码块中，我们创建了一个名为风格．这是我们任务的参考。我们可以在其他Gulp任务中使用这个名称，或者从命令行调用它。

在任务包装器内部，我们编写了任务的脚本。

Gulp任务包装器的一般格式是:

gulp.task ('name-of-the-task', function() { // The guts go here });

的返回声明说风格Task在执行时将返回一个值。本例中的值是我们处理过的代码。

我们使用Gulp方法.src ()方法获取并指定要运行的输入文件风格任务，其中是.scss文件。通过在特定文件名的位置放置星号(*)，我们实际上是在说，在styles目录中找到扩展名为.scss的任何文件．

gulp.task (“风格”，function() {返回gulp.src(“/ * .scss风格”)})；

现在，Gulp的美丽部分。将我们想要执行的进程与Node的连接起来管()方法。

的管()方法允许我们将代码从一个进程传递到另一个进程。当一个插件处理完我们的.scss文件后，输出就会传递给下一个插件。

gulp.task (“风格”，function() { return gulp.src('styles/*.scss').pipe(sass({'sourcemap=none': true})) .pipe(concat('style.css')) .pipe(gulp.dest('styles/'))；})；

这就是我们的风格任务:

1. 获取并指定要处理的文件。为此，我们使用.src ()方法获取并指向风格目录中。
2. 将Sass文件编译为CSS。记住，我们实例化了sass ()函数，它引用gulp-sass插件。
3. 将所有CSS样式规则合并到一个样式表中。gulp-concat插件创建一个名为style.css包含我们所有的CSS。
4. 在styles目录中写入样式表。的style.css文件将被放置在风格目录中。这是用.dest ()方法。

运行任务

现在是揭晓真相的时刻。

运行任务。

要运行任务，首先要确保gulpfile所在的工作目录。否则，下面的命令将不起作用。

您可能还记得，我们的Gulp任务被命名为风格．运行风格任务，发出以下命令:

杯样式

我们的风格Task将运行，它应该将.scss文件编译成一个名为style.css它将被放置在风格目录中。

恭喜!

但是有一个小问题，每次更新代码时，在代码和命令行之间来回切换来编译Sass有点麻烦。

监视源文件的更改

Gulp有一个内置的方法叫做.watch ()，这允许我们告诉Gulp注意源文件的任何更改。这样，每当我们更新任何。scss文件时，我们的风格任务将自动执行并重新编译styles.css文件。

让我们创建另一个Gulp任务来监视源文件。我们将这个Gulp任务命名为看．

就像我们的风格任务，我们将创建看使用任务包装器执行任务。

gulp.task (“看”，函数(){//胆量在这里})；

这就是看任务如下:

1. 使用杯的.watch ()方法来监视对任何.scss文件的任何更改。
2. 每当Gulp检测到变化，我们的风格任务将被执行。

gulp.task (“看”，function() { gulp/ * .watch(“样式。scss’,‘风格’)；})；

现在，不要再跑了杯样式只要我们想编译我们的Sass，我们就可以运行杯看我们一起做项目的时候就一次。Gulp将监视我们的Sass文件的任何变化。当它看到我们更新了一个Sass文件时，它会自动运行我们的风格的任务。这将在保存.scss文件时发生。

创建新任务

Gulp有一个庞大的社区。

它现在有1400多个插件。我们可以用这些插件来改进我们的构建过程。

让我们创建另一个Gulp任务。这个新任务将分析我们的JavaScript文件以找到常见问题。

对于这个Gulp任务，我们将依靠JSHint．

JSHint是一个JavaScript代码质量分析工具。JSHint会仔细检查JavaScript文件，如果发现有问题，它会在命令行中打印问题。

要使用JSHint，我们可以安装并需要一个名为Gulp的插件gulp-jshint．

首先，让我们在项目中安装gulp-jshint插件。

NPM安装gulp-jshint

接下来，让我们修改gulpfile中的依赖关系语句:

Var gulp = require('gulp')， sass = require('gulp-sass')， concat = require('gulp-concat')，Jshint = require('gulp-jshint')；

现在我们有了sass ()，concat ()而且jshint ()此时此刻。

我们来设置一个任务jshint．这个Gulp任务将在。js文件上运行Gulp -jshintjs目录中。

gulp.task ('jshint', function() { return gulp.src (js / * . js).pipe (jshint ())});

我们的任务不需要输出任何文件。

相反，如果JSHint捕捉到任何错误，我们将通过命令行得到通知。

要运行任务，我们可以发出以下命令:

吞咽jshint

我们还可以加上jshint任务交给我们看task，这样我们就不必在对JavaScript文件进行更改时手动调用它。

gulp.task (“看”，function() { gulp.watch('styles/*.scss', ['styles']);gulp.watch (js / * . js, [' jshint '])；})；

向现有任务添加流程

我们可以很容易地为现有的任务添加更多的事情。我们现在就开始吧。

让我们安装一个补充插件，让我们的输出更具可读性。

运行以下命令安装JSHint-stylish图书馆到我们的项目。

NPM安装jsht -stylish——save-dev

然后我们可以修改jshint任务，以便它使用jshint-型态作为我们的报告器。

gulp.task ('jshint', function() { return gulp.src('js/*.js') .pipe(jshint()).pipe (jshint.reporter (jshint-stylish))})；

让我们运行jshint任务:

吞咽jshint

如果JSHint发现错误和代码质量问题，它将在命令行中输出。

$ gulp jshint[10:29:57]启动jshint…\ js \ main.js第2行col 7使用'==='与'0'进行比较。？1警告[10:29:57]在93毫秒后完成'jshint'

自动前缀CSS属性

为CSS属性添加供应商前缀是一项非常繁重的工作，并且知道该为什么添加前缀完全是一项自己的工作。

幸运的是，有一个包叫做Autoprefixer这将为我们做所有艰苦的工作。

安装gulp-autoprefixer使用以下命令将插件添加到项目中。

NPM安装gulp-autoprefixer

添加我们的依赖语句来要求gulp-autoprefixer插件。

Var gulp = require('gulp')， sass = require('gulp-sass')， concat = require('gulp-concat')， jshint = require('gulp-jshint')，Autoprefixer = require('gulp-autoprefixer')；

修改风格任务来管道gulp-autoprefixer插件进程。

gulp.task (“风格”，function() { return gulp.src('styles/*.scss') .pipe(sass({ 'sourcemap=none': true })) .pipe(concat('style.css')).pipe (autoprefixer ()).pipe (gulp.dest('风格/ '));})；

为了确保针对的是正确的浏览器，可以传入一个以逗号分隔的浏览器列表。

gulp.task (“风格”，function() { return gulp.src('styles/*.scss') .pipe(sass({ 'sourcemap=none': true })) .pipe(concat('style.css')) .pipe(autoprefixer('last 2 version'， 'safari 5'， 'ie 8'， 'ie 9'， 'opera 12.1') .pipe (gulp.dest('风格/ '));})；

以上将支持所有浏览器的最后两个版本，Safari 5, IE 8和9以及Opera 12.1。

可以在这里找到可以传入的值的完整列表Browserslist．

把它们放在一起

在这一点上，我们有三个Gulp任务，它们都服务于我们的构建过程:

• 风格-处理与我们的CSS相关的过程
• jshint-检查JavaScript文件
• 看-自动运行风格而且看每当Gulp检测到源文件的变化时，就会执行任务。

但是，我们可以创建一个主任务，一次性完成所有这些任务。

现在，我们可以跑杯看它会开始看任务，它将依次等待我们对文件进行更改。

然而，如果我们想要立即编译和检查文件，然后观察变化，所有这些都是通过简单的输入狼吞虎咽地吃．

在gulpfile.js，添加一个名为默认的，但第二个参数不是使用函数，而是使用数组。

gulp.task(“违约”,[]);

在该数组中，我们可以按照希望它们运行的顺序传递任务。

gulp.task(“违约”,['styles'， 'jshint'， 'watch']）;

现在当我们运行狼吞虎咽地吃在我们项目目录的命令行中，它将:

1. 编译我们的Sass到CSS
2. 将所有的CSS合并到一个名为styles.css的文件中
3. 向适当的CSS属性添加供应商前缀
4. 检查.js文件中的错误
5. 观察源文件的变化并自动重新运行任务

想象一下必须手动完成所有这些工作。

每一次更新源代码。如果没有任务运行器，这个构建过程不仅乏味，而且还容易出现人为错误。

以下是gulpfile的内容:

/ /附件Var gulp = require('gulp')， sass = require('gulp-sass')， concat = require('gulp-concat')， jshint = require('gulp-jshint')， autoprefixer = require('gulp-autoprefixer');//任务:样式gulp.task (“风格”，function() { return gulp.src('styles/*.scss') .pipe(sass({ 'sourcemap=none': true })) .pipe(concat('style.css')) .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1')) .pipe(gulp.dest('styles/')) });//任务:手表gulp.task (“看”，function() { gulp.watch('styles/*.scss', ['styles']); });//任务:jshintgulp.task ('jshint', function() { return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('jshint-stylish')); });//默认任务gulp.task(“违约”,['styles'， 'jshint'， 'watch']）;

前进

Gulp生态系统非常庞大，开发人员每天都在创建新的工具和插件。

要查看可供您使用的插件，请查看Gulp插件注册表．

相关内容

• 从命令行接口开始
• 如何安装Node.js
• 鲍尔初学者指南
• 用Grunt加快您的Web开发工作流

了明尼苏达州是一个设计师，开发人员和教育家。他是首席讲师和开发人员HackerYou．

在他的网站上了解更多关于德鲁的信息drewminns !和他保持联系推特，Dribbble而且GitHub．