node.js - Gulp 4 无法完成 sass 任务

Question

有一些线程与此问题相关，但我尚未找到解决方案或解释我的问题。

问题

我正在使用本地版本的 Gulp 4.0.0，并且我预先存在的 gulpfile.js 运行顺利。

我在 Gulpfile 中所做的事情:监视 Sass 文件的更改，自动添加前缀并将输出文件重命名为 theme.scss.liquid (对于 Shopify)，最后将一些大括号替换为转义液体变量。

Sass 任务

// Sass
gulp.task('sass', function() {
  gulp.src('./assets/scss/**/**/*.scss')
    .pipe(sass().on('error', function (err) {
      sass.logError(err);
      this.emit('end');
    }))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename('theme.scss.liquid'))
    .pipe(replace('"{{', '{{'))
    .pipe(replace('}}"', '}}'))
    .pipe(gulp.dest('./assets/'));
});

观看任务

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

发生了什么

• 运行gulp watch开始监视变化。
• 更改或保存我的 Sass 会启动 sass 任务。
• 没有发生其他事情

[12:55:33] Starting 'watch'...
[12:55:37] Starting 'sass'...

<小时/>

非常感谢任何帮助!

Answer 1

我对 gulp.task 和 gulp v4 也有类似的问题

最好采用新的 gulp 4 语法。

const gulp = require('gulp');
// other dependencies
// ....

const sassFn = (cb) => {
  gulp.src('./assets/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(rename('theme.scss.liquid'))
    .pipe(replace('"{{', '{{'))
    .pipe(replace('}}"', '}}'))
    .pipe(gulp.dest('./assets'));

  cb();
};

const watchFn = () => {
  gulp.watch('./assets/scss/**/*.scss', sassFn);
};

exports.watch = watchFn;
exports.default = watchFn;

我删除了 gulp.series()，因为我认为它至少需要 2 个任务才能运行。此外，我更改了 src 和 dest 路径。