Node.js Gulp 超级好用！它不仅适用于编程，也是 HTML 编码的好帮手。

2016.07.14

1 安装 Node.js
2 安装所需的 npm
3 整理 gulpfile.js
4 自动监视和编译

你好。
我是Mandai，负责Wild 开发团队。

自从我上次关注以来，HTML 编码环境的变化之大让我感到惊讶。
今天，我想回顾一下 SASS (SCSS) 的安装步骤以及自动编译环境的搭建。
这次我不会深入讲解 SCSS 的语法，但我会在不久的将来专门写一篇文章来讲解。

回想当年 CSS 是唯一可用的语言时，它仍然非常有用（即使在今天）。

另外，这次我主要会介绍 Windows 10 环境，但安装 Node.js 后需要做的操作并没有什么不同，希望对您有所帮助。

安装 Node.js

如果你的环境中未使用 Node.js，则需要先安装它。
但是，如果你使用的是 Windows 系统，安装过程非常简单，只需下载并运行安装程序即可。

Node.js“下载 Windows 版 (x64)”下方的链接下载
我们推荐使用 LTS（长期支持）版本 4（截至 2016 年 7 月），因为它更稳定，也更容易使用。

安装所需的 npm

让我们使用Node.js自带的npm来安装必要的模块。

这次需要的模块有：

咕噜
咕噜咕噜

有两种类型：

Gulp 是一个任务运行器，它让创建书签变得异常简单。Beyond Inc. 的《如何使用 Visual Studio Code》一文中也介绍了它，不妨去看看！
它本质上是一个用于自动化耗时任务的工具，所以这次我们将使用 Gulp 自动编译 SCSS 并将编译后的 CSS 放置在指定路径中。

从现在开始，您将通过命令提示符或 PowerShell 进行操作。

首先，在合适的位置创建一个目录。
一种常见的方法是在 C 盘根目录下创建一个名为 development 的目录，然后在该目录下为每个项目创建一个子目录。
在本例中，在 C 盘根目录下创建一个名为 development 的目录，然后在该目录下创建一个名为 sass_test 的目录。

mkdir development cd development mkdir sass_test cd sass_test

移动到你创建的最后一个 sass_test 文件。

接下来，按照使用 Node.js 启动任何程序时的惯例，运行 npm init 来创建 package.json。

npm init

你会被问到很多问题，但你可以稍后编辑它们，所以现在只需一直按回车键即可。

接下来，关于安装 Gulp，由于 Gulp 是一个需要全局和本地安装的工具，我们将首先尝试全局安装它。

npm 安装 gulp -g

-g 选项会将其全局安装。

我一直都在说“全球”，但是“全球”到底是什么意思呢？

作为控制台命令运行的全局命令是
将其放置在您为项目创建的目录中，安装将位于本地，因此您可以从 JS 文件中调用它。

还
添加了一个本地化的解释，接下来我会解释，但这就是大致思路。

然后将其安装到本地。

npm install gulp --save-dev # --save-dev 选项用于写入 package.json，因此如果您不在其他环境中工作，则没有必要。

前面提到了 package.json 这个术语，它是一个预先列出所需软件包的文件，并放置在类似 Git 的代码仓库中，这样在其他环境中克隆仓库后就可以立即开始开发。
当多人同时开发时，这可以极大地加快开发环境的搭建速度，方便开发者使用 Git 进行部署，然后使用 npm 一次性完成所有软件包的安装。

接下来，安装 gulp-sass，这是一个用于将 Sass 与 Gulp 结合使用的模块。

npm install gulp-sass --save-dev

仅限本地使用。

所有必要的模块均已安装完毕。

整理 gulpfile.js

接下来，我们将最终创建自动将 scss 编译为 css 的部分。

Gulp 任务是程序，而不是配置。

所以从现在开始，我们将使用服务器端 JS（虽然它很简单）。

Gulp启动时，首先会加载一个名为gulpfile.js的文件。
你可以从这里加载其他文件并执行任务，但在这个例子中，我们将所有任务都写在gulpfile.js中。

首先，我将向您展示此示例中的 gulpfile.js 文件。

var gulp = require('gulp'); var sass = require('gulp-sass'); var from = 'path/to/scss/*.scss'; var dist = 'path/to/css'; gulp.task('sass', function(){ gulp.src(from) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(dist)); });

资料来源按顺序解释如下

第 1 行和第 2 行加载我们刚刚安装的 gulp 和 gulp-sass 模块。
在第 4 行和第 5 行设置 scss 文件保存位置和 css 输出目标位置。
第七行是任务的开始。gulp.task 的第一个参数是任务名称。在这个例子中，我将任务命名为“sass”。
在第 8 行，指定 scss 文件的保存位置并加载 scss 文件。
SCSS 在第 9 行被编译成 CSS。一系列进程使用 pipe() 方法连接起来，因此很容易理解其含义。
此外，在第 9 行，我们编写了编译过程中发生错误时的处理方法。如果没有这行代码，Gulp 会因为 SCSS 语法错误而停止运行。通过指定错误处理方式，Gulp 就不会因为错误而崩溃。
第 10 行将编译后的 CSS 写入输出目标。

解释就到此为止。

执行命令如下：

咕噜咕噜

如果 SCSS 文件不存在，则不会发生任何事情，程序将退出。

我认为 sass().on('error', sass.logError) 是一个很棒的小技巧。

自动监视和编译

即使在之前的状态下，虽然可以从 SCSS 编译 CSS，但编写 SCSS → 运行 gulp 编译 → 生成 CSS 的步骤非常繁琐。
如果系统能够检测文件更新，自动编译并生成 CSS，那就太好了。

实现此功能的工具是 gulp.watch() 方法。

以下是包含 gulp.watch() 的版本。

var gulp = require('gulp'); var sass = require('gulp-sass'); var from = 'path/to/scss/*.scss'; var dist = 'path/to/css'; gulp.task('sass', function(){ gulp.src(from) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(dist)); }); gulp.task('watch', ['sass'], function(){ gulp.watch(from, ['sass']); });

新增代码从第 13 行开始。让我们一步一步地解释一下。

在第 13 行，我们添加了一个名为 watch 的新任务。我们将一个数组指定为第二个参数，稍后会对此进行解释。
gulp.watch() 方法出现在第 14 行。它会监视第一个参数指定的路径中的文件更新，如果发生更新，则立即执行第二个参数指定的任务。这是一个数组，因此可以执行多个任务。

文件更新监控能够如此轻松实现，简直就像梦想成真一样。

运行新增监视任务的命令如下：

吞咽观察

然而，即使执行完毕，该命令也不会终止。
它会监控文件，并在每次更新时执行 Sass 任务。
我们不希望它终止。

此外，关于前面提到的 `gulp.task()` 方法的第二个参数，在定义 Sass 任务时，第二个参数是一个匿名函数。`gulp.task
()` 方法接受可变数量的参数，因此您指定的值会根据参数的数量而变化。
如果参数有两个，则该匿名函数包含任务名称和处理内容；如果参数有三个，则可以在执行任务名称和匿名函数之前列出要运行的任务。
与 `gulp.watch()` 方法类似，您可以在这里指定一个数组，以便按顺序运行多个任务。

任务运行器并非仅仅用于编译 SASS。
如果您可以注册日常工作中经常执行的操作（而不仅仅是程序），您或许可以减少一些工作量并获得不错的结果，因此它的用途可能远不止于工作！

就是这样。

如果您觉得这篇文章有帮助，请点赞！

加载中...