Gulp 4 无法完成 sass 任务

Question

有几个线程与此问题相关，但我还没有找到解决问题的方法或解释。

问题

我使用的是本地版本的 Gulp 4.0.0，而我之前存在的 gulpfile.js 运行顺利。

我在 Gulpfile 中所做的事情：观察 Sass 文件的更改，自动添加前缀并将输出文件重命名为 theme.scss.liquid（用于 Shopify），最后替换一些大括号以转义 Liquid 变量。

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 路径。