- 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'));
});
- 关键步骤解释:
- 引入依赖:
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文件。