要编写一个合并任务的Gulp代码来编译不同的SCSS文件,可以按照以下步骤进行操作:
npm install gulp gulp-sass gulp-concat --save-dev
在项目根目录下创建一个名为gulpfile.js的文件,并打开该文件。
在gulpfile.js文件中,引入所需的插件:
const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
gulp.task('sass', function() {
return gulp.src('src/scss/*.scss') // 要编译的SCSS文件路径
.pipe(sass()) // 编译SCSS文件
.pipe(concat('style.css')) // 合并编译后的文件为style.css
.pipe(gulp.dest('dist/css')); // 输出到目标文件夹dist/css
});
gulp.task('watch', function() {
gulp.watch('src/scss/*.scss', gulp.series('sass')); // 监视src/scss文件夹下所有的scss文件的变化,并自动执行sass任务
});
gulp.task('default', gulp.series('watch'));
gulp
现在,Gulp将监视src/scss文件夹下的所有SCSS文件的变化,并自动编译合并为一个style.css文件,并输出到dist/css文件夹中。