在前端开发中，Sass 是一个流行的 CSS 预处理器，而 Gulp 是一款强大的前端自动化构建工具。@mariusgundersen/gulp-sass 是一个非常有用的 npm 包，它能够帮助我们将 Sass 编译成 CSS，并且能够自动刷新浏览器。本文将详细介绍如何使用 @mariusgundersen/gulp-sass。
安装 @mariusgundersen/gulp-sass
在使用之前，我们需要确保已经安装了 gulp-cli 和 node.js，然后我们需要在终端中使用 npm 命令安装 @mariusgundersen/gulp-sass 包：
npm install @mariusgundersen/gulp-sass --save-dev
创建 Gulp 任务
在使用 @mariusgundersen/gulp-sass 之前，我们需要先创建一个 Gulp 任务。我们可以在项目根目录下创建一个名为 gulpfile.js 的文件。
在该文件中，我们需要引入需要的模块：
const gulp = require('gulp');
const sass = require('@mariusgundersen/gulp-sass');
const browserSync = require('browser-sync').create();然后，我们可以编写一个简单的 Gulp 任务，用于编译 Sass 文件，并自动刷新浏览器：
-- -------------------- ---- -------
-------- ------------- -
------ ------------------------------
-------------
----------------------------
----------------------------
-
-------- ------- -
------------------
------- -
-------- ----
-
---
-------------------------------- -------------
----------------------------------- --------------------
--------------------------------------- --------------------
-
------------------- - ------------
------------- - ------在上述代码中，我们定义了两个任务：sassCompile 和 watch。
其中，sassCompile 任务用于编译 Sass 文件，使用的是 @mariusgundersen/gulp-sass 包。源文件位于 src/scss 文件夹下的所有 .scss 文件，输出到 dist/css 文件夹下的同名 .css 文件中。同时，我们使用 .pipe(browserSync.stream()) 将编译后的文件注入到浏览器中，自动刷新页面。
watch 任务则用于监测文件的变化，并自动执行相应的任务。我们使用 browserSync 包来创建一个本地服务器，并将其设置为默认打开文件所在文件夹下的 index.html 文件。watch 任务会监测 src/scss 文件夹下的所有 .scss 文件的变化，并自动执行 sassCompile 任务进行编译。同时，还会监测根目录下的 .html 和 ./js/ 下的 .js 文件的变化，一旦发生变化就会自动刷新浏览器。
使用 @mariusgundersen/gulp-sass 编译 Sass 文件
创建了 Gulp 任务之后，我们可以使用 @mariusgundersen/gulp-sass 包来编译 Sass 文件了。在 Gulp 任务中，我们已经定义了 sassCompile 任务，使用它即可：
gulp sassCompile
以上命令会自动将 src/scss 文件夹下的所有 .scss 文件编译成 CSS 文件，并输出到 dist/css 文件夹下。
结语
通过本文的介绍，我们可以轻松地使用 @mariusgundersen/gulp-sass 包将 Sass 编译成 CSS，并且能够自动刷新浏览器。同时，我们还讲解了如何编写一个简单的 Gulp 任务，并使用 @mariusgundersen/gulp-sass 包。希望本教程能够帮助到大家。
完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bca967216659e244632