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)”下方的链接下载
版本 4（截至 2016 年 7 月）为 LTS（长期支持）版本，更加稳定，推荐使用！

安装所需的 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 install 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。
它们或许还能用于日常工作之外的其他用途，例如注册重复性任务（不仅限于编程），以节省时间和精力。

就这样。

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

加载中...