解决方案很简单,但我将列出我所做的更改,我遇到的错误,我的 gulpfile 更改前后以及包版本等内容,因此它看起来很长。
我通过遵循多个先前答案的指示解决了这个问题,还要根据每次保存 .scss 文件时输出的错误进行调整。
简而言之:
1. 我更改了 gulp-sass 的导入方式 - 参见 (A)
2. 将所有功能更改为 ASYNC 功能 - 参见 (B)
(A) gulp-sass 导入所做的更改:
1. 之前:var sass = require('gulp-sass)
2. 之后:var sass = require('gulp-sass')(require('sass'));
(B) 简单地将函数转换为 ASYNC -
我的 gulpfile 更改前的样子:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
function compile_scss() {
return gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
}
function watch_scss() {
gulp.watch(SCSS_SRC, compile_scss);
}
gulp.task('default', watch_scss);
exports.compile_scss = compile_scss;
exports.watch_scss = watch_scss;
我的 gulpfile 在完成后的样子:
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';
async function compile_scss() {
return gulp.src(SCSS_SRC)
.pipe(sass().on('error', sass.logError))
.pipe(minifyCSS())
.pipe(rename({ suffix: '.min' }))
.pipe(changed(SCSS_DEST))
.pipe(gulp.dest(SCSS_DEST));
}
async function watch_scss() {
gulp.watch(SCSS_SRC, compile_scss);
}
gulp.task('default', watch_scss);
exports.compile_scss = compile_scss;
exports.watch_scss = watch_scss;
包版本:
"gulp": "^4.0.2",
"gulp-changed": "^4.0.3",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-sass": "^5.0.0",
"sass": "^1.38.0"
我遇到的错误:
Error in plugin "gulp-sass"
Message:
gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:
var sass = require('gulp-sass')(require('sass'));
[14:00:37] The following tasks did not complete: default, compile_scss
[14:00:37] Did you forget to signal async completion?
webpack-stream
出现了问题,请使用以下链接:https://github.com/shama/webpack-stream/issues/34#issuecomment-478602446 - B3none