面试题：CSS 中使用 Gulp 编译 Sass 预处理器代码基础

Question

请描述如何使用 Gulp 配置任务来编译 Sass 代码为 CSS。假设项目中已经安装了 `gulp`、`gulp - sass` 等必要的包，写出一个基本的 Gulp 任务代码示例，并解释其中关键步骤。

Answer 1

1. Gulp任务代码示例：

const gulp = require('gulp');
const sass = require('gulp-sass');

// 定义一个编译Sass的任务
gulp.task('sass', function () {
    return gulp.src('src/scss/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'));
});

2. 关键步骤解释：
   • 引入依赖：
     • const gulp = require('gulp');：引入Gulp模块，这是使用Gulp的基础，后续调用Gulp的各种功能都依赖此引入。
     • const sass = require('gulp-sass');：引入gulp - sass模块，该模块用于将Sass代码编译为CSS。
   • 定义任务：
     • gulp.task('sass', function () { ... });：定义一个名为sass的任务。这个任务的作用就是将Sass代码编译为CSS。
   • 指定源文件：
     • gulp.src('src/scss/*.scss')：指定要编译的Sass源文件路径。这里假设项目结构中Sass文件存放在src/scss目录下，并且匹配该目录下所有.scss文件。
   • 编译Sass：
     • .pipe(sass().on('error', sass.logError))：使用gulp - sass模块将Sass代码编译为CSS。同时添加错误处理，当编译过程中出现错误时，sass.logError会记录并打印错误信息，防止任务中断。
   • 输出结果：
     • .pipe(gulp.dest('dist/css'))：将编译后的CSS文件输出到dist/css目录下。这里的dist目录通常是项目最终输出的目录，css目录用于存放CSS文件。