gulp-sass基础使用（基于gulp4.0）

github地址： https://github.com/dlmanning/gulp-sass

 

由于github的说明文档是基于比 gulp 4.0低的版本，所以我们跟着练习，会出现一些小错误。下面结合原文，对原文示范的例子做出了一些修改。

 

1、安装

npm install node-sass gulp-sass --save-dev

2、基础使用

    'use strict';

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

    sass.compiler = require('node-sass');

    gulp.task('sass', function () {
        return gulp.src('./sass/**/*.scss')
            .pipe(sass().on('error', sass.logError))
            .pipe(gulp.dest('./css'));
    });

    gulp.task('sass:watch', function () {
        gulp.watch('./sass/**/*.scss', gulp.series('sass'));
    });

如果按照原文的例子，会出现下面的错误，因为在gulp4.0之后已经只能接受watch第二个参数为函数，可以使用 gulp.parallel或者gulp.series

3、同步编译

    'use strict';

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

    sass.compiler = require('node-sass');

    gulp.task('sass', function () {
        return gulp.src('./sass/**/*.scss')
            .pipe(sass.sync().on('error', sass.logError))   // 同步执行
            .pipe(gulp.dest('./css'));
    });

    gulp.task('sass:watch', function () {
        gulp.watch('./sass/**/*.scss', gulp.series('sass'));
    });