使用 gulp 处理 SASS

# 安装

npm install sass gulp-sass --save-dev

# 基本使用

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
 
// 处理sass文件
function compressSASS(cb){
  return gulp.src('sass/*.scss')
    .pipe(sass().on('error', sass.logError))  // 异步编译
    // .pipe(sass.sync().on('error', sass.logError)) // 同步编译，同步编译速度是异步编译速度的两倍
    .pipe(gulp.dest('dist/sass'));
  cb()
}
// 编译任务
exports.compressSASS = compressSASS
// 实时监听编译
exports.watchSass = function(cb){
  gulp.watch('sass/*.scss', compressSASS)
  cb()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 选项

像node-sass中传递选项

function compressSASS(cb){
  return gulp.src('sass/*.scss')
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))  // 异步编译
    // .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError)) // 同步编译，同步编译速度是异步编译速度的两倍
    .pipe(gulp.dest('dist/sass'));
  cb()
}

1
2
3
4
5
6
7

#gulp

上次更新: 2023/09/22, 16:54:32

← 使用 gulp 压缩 CSS 使用 gulp 配置 tailwindcss + sass→