Gulp是一种工具，可让您自动化工作流程的各个部分，从字面上节省您一天的时间。无论您是不时创建HTML线框的开发人员还是设计师，我都建议您深入研究。
在本文中，我们将介绍使用Gulp的基础知识-从安装到基本语法，以及几个示例。到本文结尾，您应该能够找到，安装和使用其他人为Gulp创建的软件包，以编译CSS预处理器，优化图像，创建精灵，连接文件等等！
安装Gulp
我们将在OSX和Linux中使用Terminal来安装Gulp。对于Windows，建议使用Cygwin，Cmder或WSL（Linux的Windows子系统）。我将它们简称为Terminal。
首先，我们将确保已在Compter中安装Node.js和NPM。打开终端并输入npm -v，然后按Enter。如果您看到显示的版本号，则说明您已经安装了它们。
如果收到“找不到命令”（或类似错误），请直接转到Node.js下载页面，然后为您的系统选择适当的软件包。安装后，该npm命令将在终端中可用。
现在，我们可以在终端中键入以下命令来安装Gulp CLI。
|
1个
|
npm install --global gulp-cli |
这将使我们能够运行gulp命令来执行Gulp任务。
将Gulp软件包添加到项目
这个Gulp包将处理并定义要在我们的项目中运行的Gulp任务。要安装，我们可以输入以下命令：
|
1个
|
npm install --save-dev gulp |
这会将Gulp软件包安装到node_modules我们项目文件夹中的文件夹中，并将Gulp注册为项目“开发”依赖项。基本上可以说Gulp是我们仅在开发环境中使用的工具。
Gulp文件
Gulpfile是神奇的地方。在这里，您可以定义所需的自动化以及何时需要自动化。通过创建一个名为的文件并将gulpfile.js以下代码粘贴到其中，来创建一个空的默认任务。
|
1个
2
3
4
5
|
const gulp = require('gulp');gulp.task('default', function() { // This does nothing for now, we'll add functionality in a moment...}); |
保存该文件后，您可以返回到终端并单独运行gulp命令。Gulp会检测到它所在的项目并运行默认任务-我们刚刚创建的任务。您应该会看到以下内容：
由于任务为空，因此这里实际上什么也没发生，但是工作正常。让我们来看一些正确的例子！
复制文件
我会承认这一点很无聊，但是它将帮助您轻松地了解正在发生的事情。
在项目文件夹中，创建一个名为的文件to_copy.txt和一个名为的文件夹dev。让我们进入Gulpfile并创建一个名为的新任务copy。
|
1个
2
3
4
5
|
const gulp = require('gulp'); gulp.task('default', function () { return gulp.src('file.txt') .pipe( gulp.dest('dist') );}); |
第一行定义了一个名为copy的任务。在其中，我们使用gulp.src来指定此任务针对的文件-在这种情况下，它是一个名为的文件to_copy.txt。
然后，我们将这些文件通过管道传递到gulp.dest函数，该函数指定了我们要将这些文件放置到的位置—我使用了dev目录。
返回您的终端并键入gulp copy以运行此任务，它应将指定的文件复制到指定的目录，如下所示：
管道命令是Gulp的核心。这是在命令之间移动数据的有效方法。src命令指定通过管道传输到dest命令的文件。在更复杂的情况下，我们将在指定目标位置之前将文件通过管道传递给其他命令。
您还应该注意，源可以作为单个文件或多个文件给出。如果我们有一个名为的文件夹src，并且想要将所有文件从该dist文件夹移入该文件夹，则可以使用以下命令：
|
1个
2
3
4
5
|
const gulp = require('gulp'); gulp.task('default', function () { return gulp.src('src/*') .pipe( gulp.dest('dist') );}); |
星号将匹配目录中的任何内容。您还可以匹配所有子目录中的所有文件，并进行其他各种形式的匹配。查看node-glob文档以获取更多信息。
编译Sass
在开发网站时，将Sass之类的CSS预处理器编译为CSS是常见的任务。使用Gulp，使用几个模块（即node-sass和gulp-sass）可以很容易地做到这一点。您可以在终端中键入以下命令来安装这些模块：
npm install node-sass gulp-sass --save-dev
完成后，您可以使用程序包指示的语法来编译代码。为此，请创建一个名为styles.scss的文件，其内容如下：
|
1个
2
3
4
|
$primary: #ff9900;body { background: $primary;} |
现在，在Gulpfile中创建以下Gulp任务。
|
1个
2
3
4
5
6
7
8
|
const sass = require('gulp-sass');sass.compiler = require('node-sass'); gulp.task('sass', function () { return gulp.src('*.scss') .pipe( sass() ) .pipe( gulp.dest('css') );}); |
运行时gulp sass，所有带有scss扩展名的文件都将通过管道传递给sass函数，函数会将其转换为css。然后将它们通过管道传递到目标函数，该函数会将其放置在css文件夹中。
观看文件和文件夹
到目前为止，这一切都非常方便，但是每次运行任务时我们仍然需要键入命令，这效率不是很高，尤其是在样式表更改时。Gulp允许您监视文件的更改并自动运行命令。
在Gulpfile中，创建一个名为的命令，该命令automate将使用watch命令监视一组文件的更改，并在文件更改时运行特定的命令。
|
1个
2
3
4
5
6
7
8
9
10
11
12
|
const sass = require('gulp-sass');sass.compiler = require('node-sass');gulp.task('sass', function () { return gulp.src('*.scss') .pipe( sass() ) .pipe( gulp.dest('css') );});gulp.task('automate', function() { return gulp.watch('*.scss', gulp.parallel('sass'));}); |
如果键入gulp automate，它将开始和完成任务，但由于它正在监视更改，因此不会返回到提示。我们已经指定我们要监视根目录中的所有scss文件，如果它们发生更改，我们想运行我们先前设置的sass命令。
如果我们更改style.scss文件，它将自动编译为css目录中的css文件。
运行多个任务
在许多情况下，您可能需要运行多个任务。观看javascript文件夹时，您可能需要编译连接两个文件，然后将其最小化。有两种方法可以完成此操作。
如果任务相关，我喜欢将它们链接起来。一个很好的例子是javascript文件的串联和缩小。我们首先将文件传递给concat操作，然后将它们传递给gulp-uglify，然后使用destination函数输出它们。
如果任务无关，则可以调用多个任务。一个示例是一个任务，我们要连接和缩小脚本，还要编译Sass。这是他完整的Gulpfile外观。
|
1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18岁
19
20
21
22
23
24
25
26
|
const gulp = require('gulp');const uglify = require('gulp-uglify');const concat = require('gulp-concat');const sass = require('gulp-sass');sass.compiler = require('node-sass');gulp.task('scripts', function() { return gulp.src('js/**/*.js') .pipe(concat('scripts.js')) .pipe(gulp.dest('js')) .pipe(uglify()) .pipe(gulp.dest('js'))});gulp.task('sass', function () { return gulp.src('*.scss') .pipe( sass() ) .pipe( gulp.dest('css') );});gulp.task('automate', function() { gulp.watch(['*.scss', 'js/**/*.js'], gulp.parallel('sass', 'scripts'));});gulp.task('default', ['scripts', 'styles']); |
如果键入gulp scripts终端，则将js目录中的所有javascript文件连接起来，输出到主目录，然后将其拼写并保存到主目录。
如果键入gulp sass，则将编译所有scss文件并将其保存到css目录。
如果键入gulp（默认任务），scripts则将运行任务，然后运行styles任务。
该gulp automate任务监视多个文件夹中我们的scss和js文件中的更改，并且如果检测到更改，则将执行我们定义的两个任务。
总览
使用Gulp并不困难，实际上，许多人比Grunt更喜欢它，因为它的语法更简单。记住创建新自动化时要采取的步骤：
- 搜索插件
- 安装插件
- 在Gulpfile中需要插件
- 使用文档中的语法
Gulp中可用的五个命令（任务，运行，监视，src，dest）是您唯一需要知道的命令，所有第三方插件都提供了出色的文档。这是我使用的一些东西的列表，您现在就可以开始使用：
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/261918.html