Node.js gulp 超级有用！ 程序“不仅仅是”HTML 编码伴侣版

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

我已经有一段时间没有看到它了，我对 HTML 编码环境发生的巨大变化感到惊讶。
今天回顾一下安装SASS（SCSS）的步骤以及如何搭建自动编译的环境。
这次我不会触及 SCSS 符号本身，但我想在不久的将来写一篇关于它的文章。

自从 CSS 成为唯一可用的选项（现在）以来，它非常方便。

另外，这次我主要写Windows 10环境，但是安装Node.js后需要做的事情没有什么区别，所以希望对你有所帮助。

 

安装 Node.js

如果您的环境没有安装node.js，则必须首先安装node.js。
但是，在Windows的情况下，进入障碍很低，因为您要做的就是下载并运行安装程序。

Node.js上的 Download for Windows (x64) 下的链接下载它
我们推荐4系列（截至2016年7月），它被视为LTS（长期支持），因为它使用起来更稳定！

 

安装所需的npm

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

这次需要的模块是

• 吞咽
• gulp-sass

有两个。

Gulp 是一个所谓的任务运行器，可以非常轻松地创建书签。如何使用 Visual Studio Code | Beyond Co., Ltd.也写过相关内容，请查看！
简而言之，它是一个自动化耗时任务的工具，所以这次我决定让 gulp 自动编译 SCSS，并将编译后的 CSS 放在指定的路径中。

从现在开始，使用命令提示符或 PowerShell 进行操作。

首先，在合适的位置创建一个目录。
我经常要做的是直接在C驱动器下创建一个开发目录，并为每个项目放置一个目录。
这次直接在C盘下创建一个名为development的目录，并在该目录下创建一个名为sass_test的目录。

mkdir 开发 cd 开发 mkdir sass_test cd sass_test

 
进入最后创建的 sass_test。

接下来，作为一项规则，当使用 Node.js 启动某些东西时，运行 npm init 并创建 package.json。

npm 初始化

 
系统会询问您各种问题，但您可以稍后对其进行编辑，因此现在只需重复按 Enter 键即可。

关于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 安装 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';任务('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文件。
• 第 9 行将 SCSS 编译为 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';任务('sass', function(){ gulp.src(from) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest(dist)); });任务('watch', ['sass'], function(){ gulp.watch(from, ['sass']); });

 
从第13行开始添加的代码就是添加的代码。让我们逐步解释它们。

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

能够如此轻松地监控文件更新似乎是一个梦想。

运行添加的监视任务的命令如下。

吞咽手表

 但是，即使执行完成后，该命令也不会退出。
它监视文件并在每次有更新时运行 sass 任务。
对于给您带来的不便，我们深表歉意。

另外，前面出现的 gulp.task() 方法的第二个参数是定义 sass 任务时的匿名函数。
gulp.task() 方法采用可变数量的参数，因此您指定的值将根据参数的数量而变化。
情况2为匿名函数，写有任务名称和处理内容，情况3则可以在执行匿名函数之前列出任务名称和要执行的任务。
与 gulp.watch() 方法一样，这也可以指定为数组，因此可以按顺序执行多个任务。

不存在用于编译 SASS 的任务运行程序。
或许，如果你能注册你在日常工作中经常做的动作，而不仅仅是程序，它会为你节省很多精力，所以也许可以以不限于工作的方式使用它！

 
就是这样。