Gulp Sass
最后修改于 2023 年 10 月 18 日
在本文中，我们将展示如何使用 gulp-sass 插件将 Sass 编译为 CSS。
Gulp
Gulp 是一个 Node 任务运行器。它是前端 Web 开发中的一个流式构建系统。它有助于自动化诸如复制文件、缩小 JavaScript 代码或将 TypeScript 或 CoffeeScript 编译为 JavaScript 等任务。
Sass
Sass 是一种预处理器脚本语言，它被解释或编译为层叠样式表 (CSS)。Sass 有两种语法；旧语法使用缩进分隔代码块，使用换行符分隔规则。
较新的 SCSS 语法使用类似 CSS 的块格式。它使用大括号表示代码块，并使用分号分隔块内的行。缩进语法和 SCSS 文件通常分别使用扩展名 .sass 和 .scss。
gulp-sass 插件
gulp-sass 是一个用于将 Sass 编译为 CSS 的 Gulp 插件。它在内部使用 node-sass 模块。
安装 Gulp 和 gulp-sass
我们初始化一个 Node.js 项目并安装 Gulp 和 gulp-sass 插件。
$ npm init -y $ npm i --global gulp-cli $ npm i gulp --save-dev
我们初始化一个 Node 项目并安装 Gulp 和 Gulp CLI。
$ npm i --save-dev gulp-sass $ npm i --save-dev del
我们安装 gulp-sass 插件和 del 模块，该模块使用 Promise API 删除文件，并支持多个文件和 globbing。
Gulp-sass 示例
以下示例演示了 gulp-sass 模块的用法。
$ mkdir sass $ mkdir css $ touch index.html gulpfile.js sass/main.scss
我们创建两个目录和三个空文件。
.
│ gulpfile.js
│ index.html
│ node_modules
│ package-lock.json
│ package.json
│
├───css
└───sass
main.scss
这是项目结构。index.html 文件使用 CSS 进行布局。CSS 被生成到 css 目录中。SCSS 位于 sass 目录下的 main.scss 文件中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>Bugs</title>
</head>
<body>
<div class="container">
<h1>Bugs</h1>
<table>
<tr>
<th>Bug name</th>
<th>Description</th>
</tr>
<tr>
<td>Assasin bug</td>
<td>The assassin bug uses its short three-segmented beak to pierce
its prey and eat it.</td>
</tr>
<tr>
<td>Bed bug</td>
<td>Bed bugs are parasitic insects in the that feed exclusively
on blood.</td>
</tr>
<tr>
<td>Carpet beetle</td>
<td>Considered a pest of domestic houses and, particularly, natural
history museums where the larvae may damage natural fibers and
can damage carpets, furniture, clothing, and insect collections.</td>
</tr>
<tr>
<td>Earwig</td>
<td>Earwigs are mostly nocturnal and often hide in small, moist
crevices during the day, and are active at night, feeding on
a wide variety of insects and plants.</td>
</tr>
</table>
</div>
</body>
</html>
这是 index.html 文件。link 标签包含来自 css/main.css 文件的 CSS。
$myfont: Georgia 1.2em;
$table_head_col: #ccc;
$table_row_col: #eee;
$table_bor_col: #eee;
$container_width: 700px;
$first_col_width: 150px;
div.container {
margin: auto;
font: $myfont;
width: $container_width;
}
table {
tr:nth-child(odd) {background: $table_row_col}
td:first-child {width: $first_col_width}
th {
background-color: $table_head_col;
}
border: 1px solid $table_bor_col;
}
这是要编译为 CSS 的 SCSS 代码。
const gulp = require('gulp');
const sass = require('gulp-sass');
const del = require('del');
gulp.task('styles', () => {
return gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task('clean', () => {
return del([
'css/main.css',
]);
});
gulp.task('default', gulp.series(['clean', 'styles']));
这是包含我们的 Gulp 任务的 gulpfile.js。
gulp.task('styles', () => {
return gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/'));
});
gulp.task() 创建一个新任务，我们称之为 styles。gulp.src() 创建一个用于读取所有 SCSS 文件的流。通过 pipe()，我们将流式数据传递给 sass 编译器。最后，我们将编译后的数据传递给 gulp.dest()，它进而创建一个将数据写入文件系统的流。
gulp.task('clean', () => {
return del([
'css/main.css',
]);
});
clean 任务会删除生成的 CSS 文件。
gulp.task('default', gulp.series(['clean', 'styles']));
默认任务是在不指定 Gulp CLI 任务名时执行的任务。它按顺序运行 clean 和 styles 任务。
$ gulp [13:07:10] Using gulpfile ~\Documents\js\gulpsass\gulpfile.js [13:07:10] Starting 'default'... [13:07:10] Starting 'clean'... [13:07:10] Finished 'clean' after 4.11 ms [13:07:10] Starting 'styles'... [13:07:11] Finished 'styles' after 14 ms [13:07:11] Finished 'default' after 23 ms
我们运行默认任务。CSS 文件已生成。
Gulp watch 任务
我们可以使用 gulp.watch() 来自动监视更改。
gulp.task('watch', () => {
gulp.watch('sass/**/*.scss', (done) => {
gulp.series(['clean', 'styles'])(done);
});
});
请注意，监视文件可能会占用大量资源；因此，我们应该谨慎使用 gulp.watch()。
在本文中，我们使用 Gulp 将 SCSS 代码编译为 CSS。
您可能还对以下相关教程感兴趣：Node Sass 教程、Gulp 缩小教程、Datatables JSON Server 教程 或 Handsontable 教程。