ae初级教程视频教程_超级简单的Gulp初学者教程

ae初级教程视频教程

These days, using a build tool is an indispensable part of your web development workflow.

如今，使用构建工具已成为Web开发工作流程中不可或缺的一部分。

Gulp is one of the most popular build tools these days — along with Webpack.

Gulp和Webpack是当今最流行的构建工具之一。

But there’s a definite learning curve to learning Gulp. One of the biggest hurdles is figuring out the seemingly hundreds of different parts that go into it.

但是学习Gulp有一定的学习曲线。 最大的障碍之一是弄清其中似乎有数百个不同的部分。

And on top of that, you have to do everything on the command line, which can be incredibly intimidating if you haven’t worked much with it.

最重要的是，您必须在命令行上执行所有操作，如果您没有做太多工作，这可能会令人难以置信。

This tutorial will walk you through the basics of npm (Node Package Manager) and setting up Gulp for your front-end projects. Once you’re done, you’ll feel way more confident setting up your workflow and using the command line!

本教程将向您介绍npm(节点程序包管理器)的基础知识，并为您的前端项目设置Gulp。 完成后，您会感到更加自信地设置工作流程和使用命令行！

那么Gulp有什么大不了的呢？ (So what’s the big deal with Gulp?)

Gulp is a huge time saver. By using Gulp, you can let your computer handle tedious tasks, such as:

Gulp可以节省大量时间。 通过使用Gulp，您可以让计算机处理繁琐的任务，例如：

• Compiling Sass files to CSS
  将Sass文件编译为CSS
• Concatenating (combining) multiple JavaScript files
  串联(合并)多个JavaScript文件
• Minifying (compressing) your CSS and JavaScript files
  缩小(压缩)您CSS和JavaScript文件
• And automatically running the above tasks when a file change is detected
  并在检测到文件更改时自动运行上述任务

Gulp can do a lot more complex tasks than the ones I’ve mentioned above. However, this tutorial will be focused on just the basics of Gulp and how it works.

Gulp可以完成比我上面提到的要复杂得多的任务。 但是，本教程将仅关注Gulp的基础知识及其工作方式。

我们要做什么的简要概述 (Quick outline of what we’ll be doing)

Here are the steps this tutorial will be going through:

以下是本教程将要执行的步骤：

1. Install Node.js and npm to your computer
   将Node.js和npm安装到您的计算机上
2. Install Gulp and other packages needed for your project
   安装项目所需的Gulp和其他软件包
3. Configure your gulpfile.js file to run the tasks you want
   配置您的gulpfile.js文件以运行所需的任务
4. Let your computer do your work for you!
   让您的计算机为您完成工作！

Don’t worry if you don’t totally understand all the terms above. I’ll explain everything one step at a time.

如果您不完全理解上述所有术语，请不要担心。 我将一步一步地解释所有事情。

Now let’s get started!

现在开始吧！

设置环境 (Set up your environment)

Node.js (Node.js)

In order to get Gulp up and running on your computer, you need to install Node.js onto your local environment.

为了在计算机上启动并运行Gulp，您需要在本地环境中安装Node.js。

Node.js is self-described as a “JavaScript runtime”, which is considered the back-end of JavaScript. Gulp runs using Node, so you understandably need to install Node before getting started.

Node.js自称为“ JavaScript运行时”，被视为JavaScript的后端。 Gulp使用Node运行，因此可以理解，在开始之前需要安装Node。

You can download it from the Node.js website. When you install Node, it also installs npm onto your computer.

您可以从Node.js网站下载它。 当您安装Node时，它还会在您的计算机上安装npm。

What’s npm, you ask?

你问npm是什么？

Npm(节点程序包管理器) (Npm (Node Package Manager))

Npm is a continually updated collection of JavaScript plugins (called packages), written by developers around the world. Gulp is one of those plugins. You’ll also need a few more, which we’ll get into later.

Npm是由世界各地的开发人员编写的，不断更新JavaScript插件(称为软件包)集合。 Gulp是这些插件之一。 您还需要更多，稍后我们将介绍。

The beauty of npm is that it allows you to install packages directly on your command line. This is great, because you don’t have to manually go to the website, download and execute the file to install.

npm的优点在于它允许您直接在命令行上安装软件包。 很好，因为您不必手动访问网站，下载并执行文件即可安装。

Here’s the basic syntax to install a package:

这是安装软件包的基本语法：

npm install [Package Name]

npm install [Package Name]

Note for Mac users: Depending on your setup, you may need to add the “sudo” keyword at the beginning to run this with root permissions.

Mac用户注意事项：根据您的设置，您可能需要在开始时添加“ sudo”关键字以使用root权限运行此关键字。

So for Macs if would look like: sudo npm install [Package Name]

因此，对于Mac，它看起来像： sudo npm install [Package Name]

Seems pretty straightforward, right?

看起来很简单，对不对？

node_modules文件夹 (The node_modules folder)

One thing to note: when you install an npm package, npm creates a folder called node_modules and stores all the package files there.

需要注意的一件事：安装npm软件包时，npm会创建一个名为node_modules的文件夹，并将所有软件包文件存储在该文件夹中。

If you’ve ever had a project with a node_modules folder and dared to see what it contained, you probably saw that it had lots (and I mean LOTS) of nested folders and files.

如果您曾经有一个带有node_modules文件夹的项目，并且敢于查看其中包含的内容，那么您可能会发现它有很多(我的意思是很多)嵌套的文件夹和文件。

Why does this happen?

为什么会这样？

Well, this is because npm packages tend to rely on other npm packages in order to run their specific function. These other packages are known as dependencies.

好吧，这是因为npm软件包倾向于依赖其他npm软件包来运行其特定功能。 这些其他程序包称为依赖项。

If you’re writing a plugin, it makes sense to take advantage of the functionalities of existing packages. No one wants to reinvent the wheel every time.

如果您正在编写插件，则可以利用现有软件包的功能。 没有人愿意每次都重新发明轮子。

So when you install a plugin into your node_modules folder, that plugin will then install additional packages that it needs into its own node_modules folder.

所以，当你安装一个插件到您的node_modules文件夹，该插件可以再安装额外的软件包， 它需要为自己的node_modules文件夹。

And so on and so forth until you have nested folders out the wazoo.

依此类推，直到将文件夹嵌套在wazoo中为止。

You don’t need to worry too much about messing in the node_modules folder at this point — just wanted to briefly explain what’s going on in that crazy folder.

此时，您无需太担心将node_modules文件夹弄乱，只需要简要说明该疯狂文件夹中的情况。

使用package.json跟踪软件包 (Keeping track of packages with package.json)

Another cool feature of npm is that it can remember what specific packages you’ve installed for your project.

npm的另一个很酷的功能是它可以记住为项目安装了哪些特定软件包。

This is important in case you have to reinstall everything for some reason.

如果由于某种原因必须重新安装所有组件，这一点很重要。

Also it makes life easier for other developers, because they can quickly and easily install all the packages for your project on their computers.

同时，这也使其他开发人员的工作更加轻松，因为他们可以在他们的计算机上快速轻松地安装项目的所有软件包。

How does it manage to do this?

它如何做到这一点？

Npm utilizes a file called package.json to keep track of what packages and what package versions you have installed. It also stores other information about the project, like its name, author, and Git repository.

Npm利用一个名为package.json的文件来跟踪您安装了哪些软件包以及哪些软件包版本。 它还存储有关项目的其他信息，例如其名称，作者和Git存储库。

创建您的package.json (Creating your package.json)

To initialize this file, you can again use the command line.

要初始化此文件，您可以再次使用命令行。

First, navigate to your project folder, wherever you have it located on your computer.

首先，导航到项目文件夹，无论您在计算机上的任何位置。

Then type in the following command:npm init

然后键入以下命令： npm init

Npm will then prompt you to enter in information about the project. For the majority of options, you can hit enter and use the default value that’s in parentheses.

然后Npm将提示您输入有关项目的信息。 对于大多数选项，您可以按Enter键并使用括号中的默认值。

When you’re done, npm will generate the package.json file in your project folder! If you open it up in your editor, you should see something like this:

完成后，npm将在项目文件夹中生成package.json文件！ 如果在编辑器中打开它，应该会看到类似以下内容的内容：

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/thecodercoder/Super-Simple-Gulp-File.git"
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/thecodercoder/Super-Simple-Gulp-File/issues"
  },
  "homepage": "https://github.com/thecodercoder/Super-Simple-Gulp-File#readme"
}

Of course, for your project you’ll have your own name and information instead of what I have here.

当然，对于您的项目，您将拥有自己的名称和信息，而不是我在这里拥有的名称和信息。

At this point I wouldn’t worry about getting all the fields correct. This informational part is mainly used for packages that get published to npm as public plugins.

在这一点上，我不必担心所有字段都正确。 此信息部分主要用于作为公共插件发布到npm的软件包。

Now, what you will be putting into your package.json file is the list of all the packages that you need for running Gulp.

现在，你将被投入你的package.json文件是所有你需要运行咕嘟咕嘟的包的列表。

Let’s see just how you can add them in.

让我们看看如何添加它们。

安装套件 (Installing packages)

In the previous section above, we talked about typing: npm install [Package Name] into your command line to download and install the package into your node_modules folder.

在上面的上一部分中，我们讨论了键入：在命令行中将npm install [Package Name]安装到该软件包中，然后将其下载并安装到node_modules文件夹中。

It will install the package and automatically save it to your package.json file as a dependency.

它将安装软件包并将其作为依赖项自动保存到package.json文件。

Note: Prior to npm version 5.0.0, you had to add the flag “–save” in order for npm to add the package as a dependency. You no longer have to do that with versions 5 and up.

注意：在npm 5.0.0之前，您必须添加标志“ –save”，以便npm将软件包添加为依赖项。 对于版本5及更高版本，您不再需要这样做。

So if we want to install Gulp to our packages, we’d type in: npm install gulp.

因此，如果我们想将Gulp安装到我们的软件包中，请输入： npm install gulp 。

It might take a minute or two for your computer to install everything related to Gulp. You will likely see some warning messages, but I wouldn’t worry about those unless the install fails.

您的计算机可能需要一两分钟才能安装与Gulp相关的所有内容。 您可能会看到一些警告消息，但是除非安装失败，否则我不会担心这些消息。

Now, if you open your package.json file, you’ll see at the bottom that Gulp has been added as a dependency:

现在，如果打开package.json文件，则会在底部看到Gulp已作为依赖项添加：

"dependencies": { "gulp": "^3.9.1" }

This list of dependencies will grow as you install additional npm packages.

当您安装其他npm软件包时，此依赖项列表将增加。

Gulp所需的其他软件包 (Other packages needed for Gulp)

Initially, we wanted to use Gulp to run tasks like compiling your SCSS/CSS and JavaScript files. To accomplish this, we’ll be using the following packages:

最初，我们想使用Gulp运行诸如编译SCSS / CSS和JavaScript文件之类的任务。 为此，我们将使用以下软件包：

• gulp-sass — compiles your Sass files into CSS

  gulp-sass —将您的Sass文件编译成CSS

• gulp-cssnano — minifies your CSS files

  gulp-cssnano —缩小您CSS文件

• gulp-concat — concatenates (combines) multiple JavaScript files into one large file

  gulp-concat —将多个JavaScript文件串联(合并)为一个大文件

• gulp-uglify — minifies your JavaScript files

  gulp - uglify-缩小您JavaScript文件

Just like before, install each package by typing these lines one by one. You’ll have to wait a few seconds while each one installs before going on to the next line.

像以前一样，通过逐行键入以下行来安装每个软件包。 您必须等待几秒钟，然后再安装到下一行。

npm install gulp-sass 
npm install gulp-cssnano 
npm install gulp-concat 
npm install gulp-uglify

Gulp-Cli vs全球Gulp (Gulp-cli vs global Gulp)

In the past, to be able to run “gulp” from your command line, you would have to install Gulp globally on your local computer, using the command: npm install –global gulp

过去，要想从命令行运行“ gulp”，就必须使用以下命令在本地计算机上全局安装Gulp： npm install –global gulp

However, having a single global version of Gulp could cause issues if you have multiple projects all requiring different versions of Gulp.

但是，如果您有多个项目都需要不同版本的Gulp，则只有一个全局版本的Gulp可能会引起问题。

The current consensus recommends installing a different package, Gulp-cli, globally instead of Gulp itself.

当前的共识是建议在全球范围内安装另一个软件包Gulp-cli ，而不是Gulp本身。

This will allow you to still run the “gulp” command, but you’re able to use different versions of Gulp across your different projects.

这将使您仍然可以运行“ gulp”命令，但可以在不同项目中使用不同版本的Gulp。

Here’s the code for that:

这是代码：

npm install --global gulp-cli

If you’re interested, you can read more context on this Treehouse thread.

如果您有兴趣，可以在此Treehouse线程上阅读更多上下文。

All right, once all your packages are installed, you have all the tools you need. Let’s move on to setting up our project files!

好了，安装完所有软件包后，您便拥有了所需的所有工具。 让我们继续设置我们的项目文件！

设置文件结构 (Set up your file structure)

Before we start creating files and folders, just know that there are many different ways to set up your file structure. The approach that you’ll be using is good for basic projects, but the “right” setup will depend a lot on what your particular needs are.

在我们开始创建文件和文件夹之前，只要知道有很多不同的方法来设置文件结构。 您将使用的方法适用于基础项目，但是“正确”的设置将在很大程度上取决于您的特定需求。

This basic method will help you get a grasp on the basic functionality of all the moving parts. Then you can build off or change the setup to your own liking in the future!

这种基本方法将帮助您掌握所有运动部件的基本功能。 然后，您可以构建或根据自己的喜好更改设置！

Here’s what the project tree will look like:

这是项目树的样子：

Root Project Folder

根项目文件夹

• index.html
  index.html
• gulpfile.js
  gulpfile.js
• package.json
  package.json
• node_modules (folder)
  node_modules(文件夹)
• app (folder)
  应用程式(资料夹)
• script.js
  script.js
• style.scss
  style.scss
• dist (folder)
  dist(文件夹)

We already went over the package.json file and the node_modules folder. And the index.html file will be, of course, your main website file.

我们已经检查了package.json文件和node_modules文件夹。 当然，index.html文件将是您的主要网站文件。

The gulpfile.js file is where we’ll configure Gulp to run all the tasks we talked about at the beginning of this article. We’ll get into that in a bit.

在gulpfile.js文件中，我们将配置Gulp以运行本文开头讨论的所有任务。 我们将对此进行讨论。

But right now I want to mention the two folders, app and dist, as they’re important for the Gulp workflow.

但是，现在我想提到两个文件夹，app和dist，因为它们对于Gulp工作流程很重要。

应用程序和dist文件夹 (App and dist folders)

In the app folder, we have your basic JavaScript file (script.js) and your basic SCSS file (style.scss). Those files are where you will write all your JavaScript and CSS code.

在app文件夹中，我们有基本JavaScript文件(script.js)和基本的SCSS文件(style.scss)。 这些文件是您编写所有JavaScript和CSS代码的地方。

The dist folder exists only to store the final compiled JavaScript and CSS files after Gulp has processed them. You shouldn’t make any changes in the dist files, only the app files. But these files in dist are what will be loaded in index.html, since we want to use the compiled files in the website.

在gulp处理完最终JavaScript和CSS文件之后，dist文件夹仅用于存储最终的已编译JavaScript和CSS文件。 您不应在dist文件中进行任何更改，而应仅对应用程序文件进行任何更改。 但是dist中的这些文件将被加载到index.html中，因为我们要使用网站中的编译文件。

Again, there are lots of ways you can set up your project files and folders. The main important thing to keep in mind is that your structure makes sense and allows you to work the most efficiently.

同样，有很多方法可以设置项目文件和文件夹。 要牢记的最重要的一点是，您的结构合理，可以使您最有效地工作。

Now let’s get to the meat of this tutorial: configuring Gulp!

现在让我们开始学习本教程的内容：配置Gulp！

创建并配置您的Gulpfile (Create and configure your Gulpfile)

The Gulpfile contains the code to load installed packages and run different functions. The code performs two basic functions:

Gulpfile包含用于加载已安装的软件包并运行不同功能的代码。 该代码执行两个基本功能：

1. Initialize your installed packages as Node modules.
   将安装的软件包初始化为Node模块。
2. Create and run Gulp tasks.
   创建并运行Gulp任务。

初始化包 (Initialize packages)

In order to take advantage of all the features of the npm packages you added to your project, you need to export them as modules in Node — hence the folder name “node_modules”.

为了利用添加到项目中的npm软件包的所有功能，您需要将它们导出为Node中的模块-因此文件夹名称为“ node_modules”。

At the top of your Gulpfile, add the modules like this:

在Gulpfile的顶部，添加如下模块：

var gulp = require('gulp'); 
var cssnano = require('gulp-cssnano'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify');

Now that the packages are added, you can then use their functions and objects in your Gulpfile scripts. You’ll also be using some built-in functions that are part of Node.js.

现在已经添加了软件包，然后可以在Gulpfile脚本中使用它们的功能和对象。 您还将使用Node.js中的一些内置函数。

If you want to read more about npm packages and Node modules, the npm site has a great explanation here.

如果您想了解有关npm软件包和Node模块的更多信息，npm网站此处提供了很好的解释。

创建您的Gulp任务 (Create your Gulp tasks)

Creating a Gulp task is done by using the following code:

使用以下代码完成创建Gulp任务：

gulp.task('[Function Name]', function(){    
   // Do stuff here 
}

This allows you to run the Gulp task by typing in gulp [Function Name] into the command line. This is important because you can then run that named function from other Gulp tasks.

这使您可以通过在命令行中输入gulp [Function Name]来运行Gulp任务。 这很重要，因为您可以从其他Gulp任务中运行该命名函数。

Specifically, we are building several different Gulp tasks, which will all be run when you run the default Gulp task.

具体来说，我们正在建设的几个不同咕嘟咕嘟的任务，当你运行默认咕嘟咕嘟的任务， 都将被运行。

Some of the main functions that we’ll be using are:

我们将使用的一些主要功能是：

• .task() — Creates a task, as mentioned above

  .task() -如上所述创建任务

• .src() — identifies what files you will be compiling in a particular task

  .src() -标识将在特定任务中编译的文件

• .pipe() — adds a function to the Node stream that Gulp is using; you can pipe multiple functions in the same task (read an excellent write-up on this topic on florian.ec)

  .pipe() —向Gulp使用的Node流添加一个函数； 您可以在同一任务中传递多个函数(请在florian.ec上阅读有关此主题的出色文章 )

• .dest() — writes the resulting file to a specific location

  .dest() -将生成的文件写入特定位置

• .watch() — identifies the files to detect any changes

  .watch() —识别文件以检测任何更改

If you’re curious, you can read up more on the Gulp documentation here.

如果您感到好奇，可以在此处阅读Gulp文档中的更多内容。

All set? Now let’s get down to business (cue Mulan music) and write those tasks!

可以了，好了？ 现在让我们开始做生意(提示花木兰音乐)并编写这些任务！

These are the following tasks that we want Gulp to run:

这些是我们希望Gulp运行的以下任务：

• Sass task to compile SCSS to a CSS file and minify
  Sass任务，将SCSS编译为CSS文件并缩小
• JavaScript task to concatenate the JavaScript files and minify/uglify
  JavaScript任务以连接JavaScript文件并缩小/丑化
• Watch task to detect when SCSS or JavaScript files are changed, and re-run the tasks
  监视任务以检测何时更改了SCSS或JavaScript文件，然后重新运行任务

• Default task to run all needed tasks when you type gulp into the command line

  当您在命令行中输入gulp时，默认任务将运行所有必需的任务

Sass任务 (Sass task)

For the Sass task, first we want to create the task in Gulp using task(), and we will name it “sass.”

对于Sass任务，首先我们要使用task()在Gulp中创建任务，并将其命名为“ sass”。

Then we add in each component that the task will run. First we will designate that the source will be the app/scss/style.scss file, using src(). Then we will pipe in the additional functions.

然后，我们添加任务将运行的每个组件。 首先，我们将使用src()将源指定为app / scss / style.scss文件。 然后，我们将管道附加功能。

The first one runs the sass() function — using the gulp-sass module which we called “sass” at the top of the Gulpfile. It will automatically save the CSS file with the same name as the SCSS file, so ours will be named style.css.

第一个运行sass()函数-使用gulp-sass模块，我们在Gulpfile的顶部将其称为“ sass”。 它将自动以与SCSS文件相同的名称保存CSS文件，因此我们将其命名为style.css。

The second one minifies the CSS file with cssnano(). And the last puts the resulting CSS file in the dist/css folder.

第二个使用cssnano()缩小CSS文件。 最后一个将生成CSS文件放在dist / css文件夹中。

Here’s the code for all that:

这是所有代码：

gulp.task('sass', function(){    
    return gulp.src('app/style.scss')       
        .pipe(sass())       
        .pipe(cssnano())       
        .pipe(gulp.dest('dist/css')); 
});

To test, I just put in some filler SCSS in the style.scss file:

为了进行测试，我只是在style.scss文件中添加了一些填充SCSS：

div {    
    display: block; 
   	&.content {       
        position: relative;    
    } 
} 

.red { 
    color: red; 
}

You can run each individual Gulp task on the command line if you type gulp and the name of the task. So to test the Sass task, I typed in gulp sass to check if it works without errors, and generates the minified dist/style.css file.

如果键入gulp和任务名称，则可以在命令行上运行每个单独的Gulp任务。 因此，为了测试Sass任务，我输入gulp sass来检查它是否正常工作，并生成缩小的dist / style.css文件。

If everything works correctly, you should see messaging like this in your command line:

如果一切正常，您应该在命令行中看到如下消息：

[15:04:53] Starting 'sass'... [15:04:53] Finished 'sass' after 121 ms

Checking in the dist folder shows that there is indeed a style.css file, and opening it shows correctly-minified CSS:

签入dist文件夹表明确实存在style.css文件，打开该文件将显示正确缩小CSS：

div{display:block}div.content{position:relative}.red{color:red}

Ok, our Sass task is now done. On to JavaScript!

好的，我们的Sass任务现在已经完成。 上JavaScript！

JS 任务 (JS task)

The JS Gulp task is similar to the Sass task, but has a few different elements.

JS Gulp任务类似于Sass任务，但是有一些不同的元素。

First we’ll create the task and call it “js,” then we’ll identify the source files. In the src() function, you can identify multiple files a couple different ways.

首先，我们将创建任务并将其命名为“ js”，然后我们将识别源文件。 在src()函数中，您可以通过几种不同的方式来识别多个文件。

One is to utilize the wildcard (*) to tell Gulp to use all files with the *.js extension like this:

一种是利用通配符(*)告诉Gulp使用所有带有*.js扩展名的文件，如下所示：

gulp.src('app/*.js')

However this will compile the files in alphabetical order, which could potentially cause errors if you end up loading scripts that are dependent on other scripts before those other script files.

但是，这将按字母顺序编译文件，如果最终在其他脚本文件之前加载依赖于其他脚本的脚本，则可能导致错误。

You can control the order by manually designating each JavaScript file if you don’t have too many script files.

如果您没有太多的脚本文件，则可以通过手动指定每个JavaScript文件来控制顺序。

The src() function can take an array of values as a parameter, by using the square brackets like this:

src()函数可以使用如下方括号将值的数组作为参数：

gulp.src(['app/script.js', 'app/script2.js'])

If you do have a lot of JavaScript files, you can make sure that you load dependencies first by keeping them in a separate sub-folder, like say “app/js/plugins”. Then keep other JavaScript files in the parent “app/js” folder.

如果确实有很多JavaScript文件，则可以通过将依赖项保存在单独的子文件夹中(例如“ app / js / plugins”)来确保首先加载依赖项。 然后将其他JavaScript文件保留在父“ app / js”文件夹中。

Then you can use the wildcard notation to load all lib (library) scripts, followed by regular scripts:

然后，您可以使用通配符表示法来加载所有lib(库)脚本，然后再加载常规脚本：

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

Your approach will vary depending on the number and types of JavaScript files you have.

您使用的方法会根据您拥有JavaScript文件的数量和类型而有所不同。

Once you’ve set your source files, you’ll pipe in the remaining functions. The first is to concatenate the files into one large JavaScript file. The concat() function requires one parameter with the name of the resulting file.

设置源文件后，将通过管道传输其余功能。 第一种是将文件串联成一个大JavaScript文件。 concat()函数需要一个带有结果文件名的参数。

Then you’ll uglify the JavaScript file, and save it in the destination location.

然后，将ugl化JavaScript文件，并将其保存在目标位置。

Here’s the complete code for the JS task:

这是JS任务的完整代码：

gulp.task('js', function(){    
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])          
        .pipe(concat('all.js'))       
        .pipe(uglify())       
        .pipe(gulp.dest('dist')); 
});

Just like the Sass task, you can test that the JS task works by typing in gulp js into the command line.

就像Sass任务一样，您可以通过在命令行中输入gulp js来测试JS任务是否正常工作。

[14:38:31] Starting 'js'... [14:38:31] Finished 'js' after 36 ms

Now that we’ve finished our main two worker Gulp tasks, we can move on to the Watch task.

现在，我们已经完成了两个主要的Gulp工作任务，我们可以继续执行Watch任务。

观看任务 (Watch task)

The Watch task will watch the files that you tell it to for any changes. Once it detects a change, it will run the tasks that you designate and then continue watching for changes.

“监视”任务将监视您告诉它的文件是否有任何更改。 一旦检测到更改，它将运行您指定的任务，然后继续监视更改。

We will create two watch functions, one to watch SCSS files and the other to watch JavaScript files.

我们将创建两个监视函数，一个监视SCSS文件，另一个监视JavaScript文件。

The watch() function takes two parameters: the source location, and then the tasks to run when a change is detected.

watch()函数采用两个参数：源位置，然后是检测到更改时要运行的任务。

The Sass Watch function will watch any SCSS files in the app folder and then run the Sass task if it detects changes.

Sass监视功能将监视app文件夹中的所有SCSS文件，然后在检测到更改时运行Sass任务。

The function will look like this:

该函数将如下所示：

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

For the JS Watch function, we’ll have to take advantage of a really useful Node feature called “globbing.” Globbing refers to using the “**” symbols as a kind of wildcard for folders and subfolders. We need it for the JavaScript files, because we have a JavaScript file in the app/js folder, and a JavaScript file in the app/js/plugins folder.

对于JS Watch函数，我们必须利用一个非常有用的Node功能，即“ globbing”。 通配符是指使用“ **”符号作为文件夹和子文件夹的通配符。 我们需要JavaScript文件，因为我们在app / js文件夹中有一个JavaScript文件，在app / js / plugins文件夹中有一个JavaScript文件。

And here’s what that function will look like:

该函数的外观如下：

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

The way the glob (“**”) works is it will look for JavaScript files anywhere in the app/js folder. It will look either directly in the folder or in any subsequent child folders, like the plugins folder. Globbing comes in handy so that you don’t have to designate each sub-folder as a separate source in the watch() function.

Glob(“ **”)的工作方式是，它将在app / js文件夹中的任何位置查找JavaScript文件。 它会直接在该文件夹或任何后续子文件夹(如plugins文件夹)中查找。 globbing非常方便，因此您不必在watch()函数中将每个子文件夹指定为单独的源。

Here’s the complete Watch task:

这是完整的Watch任务：

gulp.task('watch', function(){       
	gulp.watch('app/*.scss', ['sass']);          
    gulp.watch('app/js/**/*.js', ['js']); 
});

Now we’re almost done! The last task to create is the default Gulp task.

现在我们快完成了！ 最后创建的任务是默认的Gulp任务。

默认Gulp任务 (Default Gulp task)

The default Gulp task is what you want to run when you just type in gulp in the command line. When you create the task, you have to call it “default” in order for Gulp to recognize that that’s what you want to run.

当您仅在命令行中输入gulp时，默认的Gulp任务就是您要运行的任务。 创建任务时，必须将其称为“默认”，以便Gulp识别出您要运行的内容。

What we’d like to do is run the Sass and JS tasks once, then run the Watch task to re-run tasks when files are changed.

我们要做的是一次运行Sass和JS任务，然后在文件更改时运行“监视”任务以重新运行任务。

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

You can create other tasks to run your builds, just don’t reuse the “default” name. For instance, let’s say you want to leave your CSS and JavaScript files unminified by default, but you do want to minify them for production.

您可以创建其他任务来运行构建，只是不要重复使用“默认”名称。 例如，假设您要在默认情况下将CSS和JavaScript文件保留为最小，但要在生产时将它们最小化。

You could create separate Gulp tasks to minify your CSS and JavaScript files called “minifyCSS” and “minifyJS.” Then you wouldn’t add those tasks to your default Gulp task, but you could create a new Gulp task called “prod” that has everything the default task has, and also has your minify tasks.

您可以创建单独的Gulp任务来最小化称为“ minifyCSS”和“ minifyJS”CSS和JavaScript文件。 这样，您就不会将这些任务添加到默认的Gulp任务中，而是可以创建一个名为“ prod”的新Gulp任务，该任务具有默认任务所具有的所有功能，并且还具有缩小任务。

index.html中的参考 (References in your index.html)

Once you’ve gotten your Gulp process working, make sure that your index.html file references all the correct CSS and JavaScript files.

在完成Gulp流程后，请确保index.html文件引用了所有正确CSS和JavaScript文件。

For the examples I’ve given you here, you’ll want to add a CSS reference to dist/style.css in your <head>:

对于我在这里给您的示例，您需要在<head>中添加一个对dist/style.cssCSS引用：

<link rel="stylesheet" href="dist/style.css">

And add a script tag referencing dist/all.js in your <body>:

并在<body>中添加引用dist/all.js的脚本标签：

<script src="dist/all.js"><;/script>

在结束时 (In closing)

Congrats on making it through! I hope that you found this basic Gulp tutorial helpful.

恭喜您成功通过！ 我希望您发现本基本的Gulp教程对您有所帮助。

Like I mentioned at the beginning, this is just a very simple tutorial of the basics of npm and Gulp.

就像我在开始时提到的那样，这只是一个非常简单的有关npm和Gulp基础知识的教程。

Most devs add many additional tasks to their Gulpfile. Let me know if you’d be interested to see another article on those more advanced topics!

大多数开发人员在其Gulpfile中添加了许多其他任务。 如果您有兴趣查看有关这些更高级主题的另一篇文章，请告诉我！

Lastly, you can check out all the code from this tutorial on my GitHub account here.

最后，您可以在我的GitHub帐户上查看本教程中的所有代码。

I hope you found this post helpful! Let me know any thoughts you have in the comments below.

希望这篇文章对您有所帮助！ 让我知道您在下面的评论中有什么想法。

想要更多？ (Want more?)

• Read more tutorials on my blog, coder-coder.com.

  在我的博客c oder-coder.com上阅读更多教程。

• Sign up here to get emails about new articles.

  请点击此处以获取有关新文章的电子邮件。

• Join 25,000+ others — Follow @thecodercoder on Instagram.

  加入25,000多个其他人- 在Instagram上关注@th ecodercoder。

• Check out coding tutorials on my YouTube channel.

  在我的YouTube频道上查看编码教程。

This post was originally published on Coder-Coder.com.

该帖子最初发布在Coder-Coder.com上 。

翻译自: https://www.freecodecamp.org/news/super-simple-gulp-tutorial-for-beginners-45141974bfe8/

ae初级教程视频教程