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:

以下是本教程將要執行的步驟：

Install Node.js and npm to your computer

將Node.js和npm安裝到您的計算機上

Install Gulp and other packages needed for your project

安裝項目所需的Gulp和其他軟件包

Configure your gulpfile.js file to run the tasks you want

配置您的gulpfile.js文件以運行所需的任務

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包含用于加載已安裝的軟件包并運行不同功能的代碼。 該代碼執行兩個基本功能：

Initialize your installed packages as Node modules.

將安裝的軟件包初始化為Node模塊。

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初級教程視頻教程

總結

以上是生活随笔為你收集整理的ae初级教程视频教程_超级简单的Gulp初学者教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。