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 = r