我能不能有一个教程来确切地告诉我我需要做什么和知道什么来设置 Gulp，而不是陷入一些关于 HTML 语义的无关讨论，你想知道吗？是的，你可以。在这里。
下面为您介绍
如果您正在寻找一个不做任何假设的教程，并且会列出安装 Gulp 的每个步骤 - 从头开始，按顺序，没有任何间隙，那么本文适合您。
本指南也是在Mac上制作的。对于Windows，几个步骤会有所不同。
本教程目标
安装所有必要的东西，让 Gulp 启动并运行。
将多个 Sass 文件编译为一个 CSS 文件，应用供应商前缀，然后缩小。
简要概述
Gulp.js - 流式构建系统是一个 JavaScript 任务运行程序，可以自动为您处理冗余任务。像许多其他有用的技术工具一样，Gulp没有“初学者入门”指南可言。实际上，他们的入门指南从第 6 步左右开始。如果您已经知道 Node 和 npm 的工作原理并安装了所有内容，那就太好了 - 但初学者只会更加困惑和沮丧。
我将快速总结几个重要的概念。在开始取得一些进展以进行澄清后，请随时向上滚动到此内容。
Node.js - 一个支持运行服务器端 JavaScript for Web 的环境.
npm - Node.js的包管理器。一个工具，允许您快速轻松地设置本地节点环境和插件。
Local vs. Global - Node.js 是全局安装的，但 Gulp 及其所有插件将按项目在本地安装。
1、打开HBuilder，点击软件顶部的文件选项，在弹出的选择中点击新建，选您要新建的文件JS，HTML，CSS等可以进行选择。2、输入完成后将文件进行保存，可使用Ctrl+s键保存文件，或点击红框标注出的位置也可保存文件。3、保存完。
Task Runner - 像 Gulp 这样的任务运行程序可以自动化您的所有流程，因此您不必考虑它们。 Gulp 要求 package.json 和 gulpfile.js.
步骤
就我而言，我将尝试创建丢失的Gulp初学者指南。我列出了这些步骤，以便您知道要进入的内容.
Install Xcode Command Line Tools
Install Homebrew
Install Node.js
Install Gulp globally
Install Node and Gulp locally
Install Gulp plugins
Set up project
有很多方法可以做到这一点，但这就是我们要做的方式。
安装Xcode
App Store下载 Xcode
安装命令行工具
打开Xcode，然后按如下方式点击.
js脚本怎么在浏览器中运行，Preferences > Downloads > Command Line Tools
安装Homebrew
usr/bin/ruby -e &34;
安装Node.js
我们将使用 Homebrew 来安装 Node.js，这是 Gulp 运行的服务器端 JavaScript 环境。Node.js 附带 npm，即 Node Package Manager。在终端中键入此内容。
brew install node
全局安装Gulp
这将全局安装 Gulp 命令行。这是我们开始在本地安装之前的最后一步 - 基于每个项目。
npm install --global gulp-cli
全球安装到此结束！这些步骤都不需要重复。从这里开始，我们将开始建立我们的本地项目。
局部安装Node 和 Gulp
cd sites
然后，我将创建一个新的项目目录。
mkdir startgulp
并移动到新创建的文件夹。
cd startgulp
为了在本地安装 Node，你需要一个 package.json 文件。您可以手动创建该文件，也可以生成一个文件。我们将生成一个，以便您了解它的工作原理.
npm init
此命令将引导您创建通用 package.json。这非常简单，如果您不确定或不想填写某些内容，只需按回车键即可。我只是给了它一个描述、关键字和作者，文件已经生成。
所以现在的方法，都是讲script标签写body里面，元素的后面。；3. 外部JS文件；1）可维护性高；2）可缓存：例如有两个HTML文件（A，B）都是用的同一个JS文件。当用户请求A页面的时候，A页面的HTML文件和JS文件一起被。
{&34;: &34;， &34;: &34;， &34;: &34;， &34;: &34;， &34;: {&34;: &34;Error: no test specified\&34;}， &34;: [&34;， &34;]， &34;: &34;， &34;: &34;}
现在我们将运行一个命令来安装 Node 和 Gulp。
npm install --save-dev gulp
您将收到一些有关弃用和丢失文件的警告，但不要太担心。
npm WARN package.json startgulp@1.0.0 No repository field.npm WARN package.json startgulp@1.0.0 No README data
完成后，您可以列出您的文件：
ls
node_modules package.json
您将看到已创建一个node_modules目录。为了自己的理智，不要掉进node_modules兔子洞;你可能永远找不到出路。
安装Gulp 插件
此时，在我们的node_modules目录中，我们安装的唯一devDependency 是 Gulp。为了发挥魔力，我们需要安装所有的 Gulp 插件。有很多 Gulp 插件。在本文中，我们将为前端 Web 开发工作流安装四个。
Gulp Sass，将SCSS编译为CSS。
Gulp Sourcemaps，这比你想象的要有用得多。
Gulp cssnano，缩小和优化输出的CSS
Gulp Autoprefixer，为输出的 CSS 添加供应商前缀。
如果您没有使用 Sass 的经验，我建议您阅读 Learn Sass Now： A Guide to Installing， Use and Understanding Sass，以更好地了解它的工作原理。
这是添加所有四个 Gulp 插件的代码。
npm install --save-dev gulp-sass gulp-cssnano gulp-sourcemaps gulp-autoprefixer
如果你检查你的package.json，你会注意到添加了一个新的部分。
&34;: {&34;: &34;， &34;: &34;， &34;: &34;， &34;: &34;， &34;: &34;}
这些是您已安装的所有 Node 包。
设置工程项目 Project
我们需要做的最后一件事是设置一个名为gulpfile.js的文件，这是一个JavaScript文件，将定义整个任务运行过程。
创建一个 gulpfile.js。现在我们有了Gulp拼图的所有碎片。以下是到目前为止您的项目应该如何显示的图形表示:
我们可以通过为每个插件需求定义一个变量来开始我们的 Gulpfile。
&39;var gulp = require(&39;)var sass = require(&39;)var cssnano = require(&39;)var sourcemaps = require(&39;)var autoprefixer = require(&39;)
我喜欢在 src/ 目录中处理我所有的源文件，例如 Sass，在 dist/ 目录中处理我的所有目标文件。
因此，我将首先创建一个 Gulp 任务。
gulp.task(&39;，function () {gulp.src(&39;)// Insert tasks here.pipe(gulp.dest(&39;))})
路径 /**/*.scss 表示任务适用于此目录或任何后续目录 （src/sass/），任何文件名都以 .scss 结尾。目的地将是dist/css/。
我们常见的执行js代码都是放入到HTML引入后然后通过HTML文件来执行胡查看代码。显然这是比较麻烦的事情，如果你的电脑里面安装了node.js，你可以使用node来直接使用node来运行你想要运行的js文件。
插入所有其他插件很容易。
gulp.task(&39;，function () {gulp.src(&39;).pipe(sourcemaps.init()).pipe(sass().on(&39;，sass.logError)).pipe(autoprefixer({browsers: [&39;]， cascade: false， })).pipe(cssnano()).pipe(sourcemaps.write(&39;)).pipe(gulp.dest(&39;))})
每个插件都有一个相应的 GitHub 自述文件，说明如何使用它。但是，它们中的大多数都非常简单。每个 Gulp 任务都在管道函数中。在上面，您可以看到我正在启动源映射，使用错误日志记录启动 Sass，自动前缀到最后两个浏览器，缩小，并将源映射写入与输出 CSS 相同的目录。
最后，我将默认的 Gulp 任务定义为“监视”任务 - Gulp 将监视我指定目录中的任何更改，并在进行任何更改时运行。
gulp.task(&39;，function () {gulp.watch(&39;，[&39;])})
这里是最终的gulpfile.js:
&39;var gulp = require(&39;)var sass = require(&39;)var cssnano = require(&39;)var sourcemaps = require(&39;)var autoprefixer = require(&39;)gulp.task(&39;，function () {gulp.src(&39;).pipe(sourcemaps.init()).pipe(sass().on(&39;，sass.logError)).pipe(autoprefixer({browsers: [&39;]， cascade: false， })).pipe(cssnano()).pipe(sourcemaps.write(&39;)).pipe(gulp.dest(&39;))})gulp.task(&39;，function () {gulp.watch(&39;，[&39;])})
现在为了测试这段代码，我将创建三个简单的 .scss 文件 - main.scss、_variables.scss 和 _scaffolding.scss。
Main
* Main SCSS File */// Base@import &34;;// Components@import &34;;
变量
/ Typography$font-style: normal;$font-variant: normal;$font-weight: normal;$font-color: {$font-size}/#{$line-height}$font-family;}// Vertically center anything.vertical-center {display: flex;align-items: center;justify-content: center;}
好的，这应该足以设置并证明自动前缀器和cssnano运行正常。请注意，我没有创建dist/文件夹 - Gulp会为我做到这一点。
您现在需要做的就是在项目目录的根目录中键入 gulp 命令。
gulp
[00:12:04] Using gulpfile ~/Sites/startgulp/gulpfile.js[00:12:04] Starting &39;...[00:12:04] Finished &39; after 16 ms
现在，如果我保存我创建的任何 .scss 文件......
[00:12:39] Starting &39;...[00:12:39] Finished &39; after 32 ms
凭借闪电般的速度，Gulp 创建了 dist、我的主 CSS 文件和与之配套的源映射。
总结
Gulp 可以做的还有很多 - 值得注意的是，我省略了任何类型的 JavaScript 缩小或 linting - 但就前端 Sass 工作流程而言，这是一个非常有用和有效的工作流程！
1、首先，打开html编辑器，新建html文件，例如：index.html，填充问题基础代码。2、在index.js中，实现func1和func2函数。3、在index.html中，新增第3个button，并调用func3()方法，并在标签中输入js代码：function func3(。
如果您想使用本教程中确切的 Gulp 工作流程的真实示例，请随时查看我的个人 Sass 样板。代码在这里是开源的，尽管我还没有完成文档。
现在，您已经安装了所有全局依赖项，并且您知道如何设置所有内容，只需三个命令即可启动和运行。这是一个很好的例子，说明 Gulp 的所有初始设置最终都是值得的：
git clone
npm install
gulp
(显然，你需要具备使用 Git 的基本知识才能使用此方法.)
