gulp sass_在工作流中对Sass和JS文件使用Gulp 4-白红宇

gulp sass_在工作流中对Sass和JS文件使用Gulp 4

阅读量：2522 次

发布时间：2019-05-11

本文共 16353 字，大约阅读时间需要 54 分钟。

gulp sass

This post was originally published on .

该帖子最初发布在。

This tutorial will explain, step by step, how to set up Gulp 4 in your workflow, as well as how to migrate from Gulp 3 to Gulp 4 syntax.

本教程将逐步说明如何在工作流程中设置Gulp 4，以及如何从Gulp 3迁移到Gulp 4语法。

Need to just quickly get your Gulp 3 gulpfile.js working with Gulp 4? to go right to that part of the post.

是否需要快速使Gulp 3 gulpfile.js与Gulp 4一起使用？ 转到帖子的该部分。

Install the gulp-cli on your command line by running npm install gulp-cli -g.
通过运行npm install gulp-cli -g在命令行上npm install gulp-cli -g 。

Install Gulp by running npm install gulp.
通过运行npm install gulp安装Gulp。

Install other npm packages for your Gulp workflow.
为Gulp工作流程安装其他npm软件包。

Create a gulpfile.js file in your project root.
在项目根目录中创建一个gulpfile.js文件。

Import your npm packages as modules in your gulpfile.
将您的npm软件包作为模块导入gulpfile中。

Add your tasks to the gulpfile to compile your SCSS/JS files and run a watch task.
将您的任务添加到gulpfile中，以编译您的SCSS / JS文件并运行监视任务。

Run the gulp command to run all your tasks.
运行gulp命令以运行所有任务。

什么是Gulp，它有什么作用？ (What is Gulp and what does it do?)

Gulp is a tool that will run various tasks for you in your web development workflow. It might be called a bundler, build tool, or a task runner. They all mean roughly the same thing.

Gulp是一个工具，它将在您的Web开发工作流程中为您运行各种任务。它可能被称为捆绑器，构建工具或任务运行器。它们的意思大致相同。

Similar tools are Webpack and Grunt (although Grunt is quickly becoming obsolete).

Webpack和Grunt(尽管Grunt很快就过时了)是类似的工具。

Here’s what we’re going to have Gulp do for us:

这是古普为我们做的：

Compile our Sass files to CSS
将我们的Sass文件编译为CSS

Add vendor prefixes to our CSS
在我们CSS中添加供应商前缀

Minify our final CSS file
缩小最终CSS文件

Concatenate (i.e. combine) our JS files
连接(即合并)我们的JS文件

Uglify our final JS file
统一我们的最终JS文件

Move the final CSS/JS files into our /dist folder.
将最终CSS / JS文件移动到我们的/dist文件夹中。

Pretty cool, right?!

很酷吧？

So the way it works is, all your settings and tasks are stored in a gulpfile.js file. And you run Gulp on your command line.

因此，它的工作方式是，所有设置和任务都存储在gulpfile.js文件中。然后在命令行上运行Gulp。

The great part about that is that once you have your gulpfile all set up, you can easily reuse it for other projects. So it’s a huge time-saver!

最重要的是，一旦全部设置了gulpfile，就可以轻松地将其重新用于其他项目。因此，这节省了很多时间！

Let’s move on to installing and setting up Gulp on your computer.

让我们继续在计算机上安装和设置Gulp。

使用有效的演示项目安装Gulp (Installing Gulp, using a working demo project)

Before you can run Gulp, you will need to install a couple of things:

在运行Gulp之前，您需要安装以下几点：

Install if you don’t have it yet.
安装，如果你没有它。

Install the by running npm install --global gulp-cli.
通过运行npm install --global gulp-cli安装。

Once you have Gulp working, check out a demo project I built that uses Gulp! It’s a front-end boilerplate project that’s meant to be a quick way for me to get started with any simple front-end website.

在Gulp工作之后，请查看我使用Gulp构建的演示项目！这是一个前端样板项目，对于我来说，这是快速入门任何简单的前端网站的方法。

(I also have plenty of code snippets in the rest of this tutorial, so you can just refer to those as well!)

(在本教程的其余部分中，我也有很多代码片段，因此您也可以参考它们！)

To set the front-end boilerplate project up:

设置前端样板项目：

Clone or download the of this project onto your computer.
将此项目的或下载到您的计算机上。

Open the project, and in the root project folder, go to your command line and run npm install. This will install the npm packages listed in the package.json file, particularly Gulp 4.
打开项目，然后在根项目文件夹中，转到命令行并运行npm install 。这将安装package.json文件中列出的npm软件包，特别是Gulp 4。

You should now have the project files set up, and all the npm packages installed that we’ll be using to run Gulp tasks.

现在，您应该已经设置了项目文件，并安装了我们将用于运行Gulp任务的所有npm软件包。

Since the files from the repo are ready to go, if you type in gulp in the command line, you should see an output like this:

由于回购中的文件已准备就绪，因此，如果您在命令行中输入gulp ，则应该看到如下输出：

> gulp [22:29:48] Using gulpfile ~\Documents\GitHub\frontend-boilerplate\gulpfile.js [22:29:48] Starting 'default'... [22:29:48] Starting 'scssTask'... [22:29:48] Starting 'jsTask'... [22:29:48] Finished 'jsTask' after 340 ms [22:29:48] Finished 'scssTask' after 347 ms [22:29:48] Starting 'watchTask'...

And you’ve run Gulp!

而且您已经运行了Gulp！

运行Gulp时项目中发生了什么？ (What’s happening in the project when you run Gulp?)

All right, you have the project successfully working! Now let’s get into more detail on what’s in the project and how it works.

好的，您的项目成功进行了！现在让我们更详细地了解项目中的内容及其工作方式。

First, here’s a quick rundown of the file structure of our project:

首先，这是我们项目文件结构的简要介绍：

index.html — your main HTML file
index.html —您的主要HTML文件

package.json — contains all the npm packages to install when you run npm install.
package.json —包含运行npm install时要安装的所有npm软件包。

gulpfile.js — contains the config and runs all the Gulp tasks
gulpfile.js —包含配置并运行所有Gulp任务

/app — working folder, you will edit SCSS/JS files in here
/ app-工作文件夹，您将在此处编辑SCSS / JS文件

/dist — Gulp will output files here, don’t edit these files
/ dist -Gulp将在此处输出文件，请勿编辑这些文件

In your workflow, you will edit the HTML, SCSS, and JS files. Gulp will then detect any changes and compile everything. Then you will load your final CSS/JS files from the /dist folder in your index.html file.

在工作流程中，您将编辑HTML，SCSS和JS文件。 Gulp然后将检测任何更改并编译所有内容。然后，您将从index.html文件中的/dist文件夹加载最终CSS / JS文件。

Now that we have Gulp running, let’s take a closer look at how Gulp works.

现在我们已经运行了Gulp，下面让我们仔细看看Gulp的工作原理。

gulpfile.js中到底是什么？ (What exactly is in the gulpfile.js?)

Here’s an in-depth explanation of each section of the gulpfile, and what they do:

这是对gulpfile的每个部分及其作用的深入说明：

步骤1：初始化npm模块 (Step 1: Initialize npm modules)

At the very top of the gulpfile.js, we have a whole bunch of constants that import the npm packages we installed earlier, using the require() function.

在gulpfile.js的最顶部，我们有一堆常量，它们使用require()函数导入之前安装的npm软件包。

Here’s what our packages do:

这是我们的软件包的作用：

Gulp package:

大包装：

gulp — runs everything in the gulpfile.js. We’re exporting just the specific gulp functions that we will be using, like src, dest, watch, and others. This allows us to call those functions directly without the gulp, for example we can just type in src() instead of gulp.src().
gulp -运行在gulpfile.js一切。我们仅导出将要使用的特定gulp函数，例如src ， dest ， watch和其他函数。这使我们可以直接调用这些函数没有gulp ，比如我们可以在只需键入src()代替gulp.src()

CSS packages:

CSS包：

gulp-sourcemaps — maps the CSS styles back to the original SCSS file in your browser dev tools
gulp-sourcemaps将CSS样式映射回浏览器开发工具中的原始SCSS文件

gulp-sass — compiles SCSS to CSS
gulp-sass —将SCSS编译为CSS

gulp-postcss — runs autoprefixer and cssnano (see below)
gulp-postcss运行autoprefixer和cssnano(请参见下文)

autoprefixer — adds vendor prefixes to CSS
autoprefixer —将供应商前缀添加到CSS

cssnano — minifies CSS
cssnano —缩小CSS

If you’ve used Gulp before, you might be wondering why I’m using straight-up autoprefixer and cssnano, instead of gulp-autoprefixer and gulp-cssnano. For some reason, using them will work, but will prevent sourcemaps from working. Read more about that issue .

如果您以前使用过Gulp，则您可能想知道为什么我要使用直接的autoprefixer和cssnano而不是cssnano gulp-autoprefixer和gulp-cssnano 。 出于某种原因，使用它们会起作用，但会阻止源地图起作用。 阅读有关该问题的更多信息。

JS packages:

JS软件包：

gulp-concat — concatenates multiple JS files into one file
gulp-concat —将多个JS文件合并为一个文件

gulp-uglify — minifies JS
gulp gulp-uglify uglify —缩小JS

Now that we have our modules added, let’s put them to work!

现在我们已经添加了模块，让我们开始使用它们吧！

步骤2：使用模块来运行任务 (Step 2: Use the modules to run your tasks)

A “task” in Gulp is basically a function that performs a specific purpose.

Gulp中的“任务”基本上是执行特定目的的功能。

We’re creating a few utility tasks to compile our SCSS and JS files, and also to watch those files for any changes. Then those utility tasks will be run in our default Gulp task when we type gulpon the command line.

我们正在创建一些实用程序任务来编译我们的SCSS和JS文件，并监视这些文件的任何更改。然后，当在命令行上键入gulp时，这些实用程序任务将在我们的默认Gulp任务中运行。

为文件路径创建常量 (Creating constants for file paths)

Before writing our tasks, though, we have a few lines of code that save our file paths as constants. This is optional, but I like using path variables so that we don’t have to manually retype them each time:

但是，在编写任务之前，我们有几行代码将文件路径另存为常量。这是可选的，但是我喜欢使用路径变量，因此我们不必每次都手动重新键入它们：

This code creates scssPath and jsPath constants that we will use to tell Gulp where files are found.

这段代码创建了scssPath和jsPath常量，我们将用来告诉Gulp在哪里找到文件。

Sass任务 (Sass task)

Here’s the code for our Sass task:

这是我们的Sass任务的代码：

function scssTask(){        return src(files.scssPath)        .pipe(sourcemaps.init())        .pipe(sass())        .pipe(postcss([ autoprefixer(), cssnano() ]))        .pipe(sourcemaps.write('.'))        .pipe(dest('dist')    );}

Our Sass task, called scssTask(), is doing several things. In Gulp, you can chain multiple functions by using the Gulp function pipe() after the first function.

我们的Sass任务叫做scssTask() ，它正在做几件事。在Gulp中，可以通过在第一个函数之后使用Gulp函数pipe()链接多个函数。

In our task, Gulp is first running src() to load the source directory of the SCSS files. It’s using the constant we created earlier, files.scssPath.

在我们的任务中，Gulp首先运行src()来加载SCSS文件的源目录。它使用了我们先前创建的常量files.scssPath 。

Then after src() we’re piping everything else into the build process. You can think about it like adding more and more sections of pipe onto an existing pipe.

然后在src()我们将其他所有内容传递到构建过程中。您可以考虑一下它，就像在现有管道上添加越来越多的管道部分一样。

The functions it’s running are:

它运行的功能是：

sourcemaps.init() — sourcemaps needs to be added first after src()
sourcemaps.init() -需要先在src()之后添加源映射

sass() does the compiling of all the SCSS files to one CSS file
sass()将所有SCSS文件编译为一个CSS文件

postcss() runs two other plugins:
postcss()运行另外两个插件：

- autoprefixer() to add vendor prefixes to the CSS
autoprefixer()将供应商前缀添加到CSS

- cssnano() to minify the CSS file
cssnano()缩小CSS文件

sourcemaps.write() creates the sourcemaps file in the same directory.
sourcemaps.write()在同一目录中创建sourcemaps文件。

dest() tells Gulp to put the final CSS file and CSS sourcemaps file in the /dist folder.
dest()告诉Gulp将最终CSS文件和CSS sourcemaps文件放在/dist文件夹中。

JS任务 (JS task)

Here’s the code for our JavaScript task:

这是我们JavaScript任务的代码：

function jsTask(){    return src([files.jsPath])        .pipe(concat('all.js'))        .pipe(uglify())        .pipe(dest('dist')    );}

Our JavaScript task, called jsTask(), is also running multiple functions:

我们JavaScript任务jsTask()也正在运行多个功能：

src() to load the JS files from files.jsPath.
src()以从files.jsPath加载JS文件。

concat() to concatenate all the JS files into one JS file.
concat()将所有JS文件连接为一个JS文件。

uglify() to uglify/minify the JS file.
uglify()来丑化/缩小JS文件。

dest() to move the final JS file into the /dist folder.
dest()将最终的JS文件移动到/dist文件夹中。

观看任务 (Watch task)

The watch() function is a super handy part of Gulp. When you run it, it will run continuously, waiting to detect any changes to the files you tell it to watch. When it detects changes, it will run any number of tasks you tell it to.

watch()函数是Gulp的超级方便部分。当您运行它时，它将连续运行，等待检测您告诉它观看的文件的任何更改。当它检测到更改时，它将运行您告诉它的许多任务。

This is great because then you don’t have to keep manually running gulp after every code change.

这很棒，因为这样，您不必在每次代码更改后都保持手动运行gulp 。

Here’s the code for our watch task:

这是我们监视任务的代码：

function watchTask(){    watch(        [files.scssPath, files.jsPath],        parallel(scssTask, jsTask)    );}

The watch() function takes three parameters, but we’re just using two:

watch()函数采用三个参数，但我们仅使用两个参数：

globs, meaning the file path strings,
glob，表示文件路径字符串，

options (not used), and
选项(未使用)，以及

tasks, meaning which tasks we want to run.
任务，这意味着我们要运行哪些任务。

What we’re having our watch task do is watch the files in our scssPath and jsPath directories. Then if any changes are made in either, run the scssTask and jsTask tasks simultaneously.

我们要执行的监视任务是监视scssPath和jsPath目录中的文件。然后，如果任何一个都进行了scssTask ， jsTask同时运行scssTask和jsTask任务。

Now that we’ve gotten our utility tasks set up, we need to set up our main Gulp task.

现在我们已经设置了实用程序任务，我们需要设置主要的Gulp任务。

默认任务 (Default task)

This is the main Gulp task, which will automatically run if you type in gulp on the command line.

这是主要的任务咕嘟咕嘟，如果你键入它会自动运行gulp在命令行上。

exports.default = series( parallel(scssTask, jsTask), watchTask);

Gulp will automatically search for a default task in your gulpfile.js when you use the gulpcommand. So you must export the default task in order for it to work.

咕嘟咕嘟会自动搜索default在您的任务gulpfile.js当您使用gulp命令。因此，必须导出默认任务才能使其正常工作。

Our default task will do the following:

我们的默认任务将执行以下操作：

Run the scssTask and jsTask simultaneously using parallel()
使用parallel()同时运行scssTask和jsTask

Then run the watchTask
然后运行watchTask

You’ll also notice that we are putting all those tasks inside the series() function.

您还将注意到，我们将所有这些任务放入了series()函数中。

This is one of the major new changes in Gulp 4 for how it handles tasks– you are required to wrap all tasks (even single ones) either in series() or parallel().

这是Gulp 4处理任务的主要新变化之一-您需要将所有任务(甚至是单个任务)包装为series()或parallel() 。

关于注册任务的注释：Gulp 4中的更改 (A note on registering tasks: what’s changed in Gulp 4)

If you’ve been using the tasks() function to run everything, you may have noticed that there’s a difference now.

如果您一直使用tasks()函数来运行所有程序，则可能已经注意到现在有所不同。

Instead of using gulp.task() to contain all your task functions, we’re creating actual functions like scssTask() and watchTask().

我们不是使用gulp.task()来包含所有任务功能，而是创建诸如scssTask()和watchTask()类的实际功能。

This is to follow Gulp’s official guidelines for creating tasks.

这是为了遵循Gulp创建任务的官方指南。

The Gulp team recommends using exports rather than tasks():

Gulp团队建议使用exports而不是tasks() ：

“In the past, task() was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won’t work.” []

“过去，使用task()将函数注册为任务。 尽管该API仍然可用，但是导出应该是主要的注册机制，除非在某些情况下无法进行导出。” [ ]

So, while they still let you use the task() function, it’s more current to create JS functions for each task and then export them.

因此，尽管它们仍然允许您使用task()函数，但为每个任务创建JS函数然后将其导出更为最新。

If you can, I’d recommend updating your syntax to reflect this, as it’s possible that Gulp will deprecate task() at some point.

如果可以的话，我建议您更新语法以反映这一点，因为Gulp可能会在某个时候弃用task() 。

从Gulp 3迁移时遇到问题吗？ (Problems Migrating from Gulp 3?)

If you’ve been using Gulp 3 and all you want is to get the dang thing working with Gulp 4, you’re in luck!

如果您一直在使用Gulp 3，而您想要做的就是让Gulp 4可以正常工作，那么您真幸运！

Before, in Gulp 3, you could simply list a single function or multiple functions in an array. However, in Gulp 4, doing so without wrapping them in either series() or parallel() will throw an error now.

之前，在Gulp 3中，您可以简单地在数组中列出单个函数或多个函数。但是，在Gulp 4中，如果不将它们包装在series()或parallel()则会立即引发错误。

Something like:

就像是：

AssertionError [ERR_ASSERTION]: Task function must be specified

Gulp 4 introduces two new functions to run tasks: series() and parallel(). It gives you the option of running multiple tasks concurrently, or one after the other.

Gulp 4引入了两个运行任务的新函数： series()和parallel() 。它使您可以选择同时运行多个任务，也可以一个接一个地运行。

So to quickly fix the error, put all your tasks into either a series() or parallel()function.

因此，要快速解决该错误，请将所有任务放到series()或parallel()函数中。

Tasks in (old) Gulp 3 syntax

Gulp 3语法中的任务

In Gulp 3, you might have run tasks this way:

在Gulp 3中，您可能以这种方式运行任务：

gulp.task('default', ['sass', 'js', 'watch']);

gulp.watch('app/scss/*.scss', ['sass']);

Tasks in Gulp 4 syntax

Gulp 4语法中的任务

Put those tasks into a series() function like this:

将这些任务放入如下的series()函数中：

gulp.task('default', gulp.series('sass', 'js', 'watch'));

gulp.watch('app/scss/*.scss', gulp.series('sass'));

And that will fix the task function error with the smallest change possible! ?

这样就可以以最小的变化修复任务功能错误！？

项目文件下载 (Project files download)

All the code I’ve displayed here is from a GitHub repository I have for front-end boilerplate. It’s meant as a quick starter kit for any simple front-end website project.

我在这里显示的所有代码均来自我为前端样板提供的GitHub存储库。它是任何简单的前端网站项目的快速入门套件。

You’re welcome to check it out, customize, and use it for your own projects!

欢迎您检出，自定义并将其用于自己的项目！