Gulp 3 到 Gulp 4:如何观看 scss 并将其缩小/编译成 css?

Posted

技术标签:

【中文标题】Gulp 3 到 Gulp 4:如何观看 scss 并将其缩小/编译成 css?【英文标题】:Gulp 3 to Gulp 4: How to watch scss and minify/compile it into css? 【发布时间】:2019-05-23 16:58:14 【问题描述】:

在 Gulp 3 中,当检测到更改时,使用以下代码会将 scss 放入 css。它会从旧的 .scss 文件中生成新的缩小文件并将它们放入 css 文件夹中。

//=======gulpfile.js=======
//dependencies
var gulp        = require('gulp');
var sass        = require('gulp-sass');
var minifyCCS   = require('gulp-clean-css');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');
var changed     = require('gulp-changed');

//Roots
var SCSS_SRC    = './public/scss/*.scss';
var SCSS_DEST   = './public/css';

//Compiling
gulp.task('compile_scss', function()
    return gulp.src(SCSS_SRC)
        .pipe(sass())
        .pipe(minifyCSS())
        .pipe(rename(suffix: '.min'))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
);

//Detect changes in SCSS
gulp.task('watch_scss', function()
    gulp.watch(SCSS_SRC, ['compile_scss']);
);

//Run
gulp.task('default', ['watch_scss']);

但是,Gulp 4 完全改变了函数处理,我还没有找到一个很好的例子来说明如何简单地观察 scss 并将其放入缩小的 css 中。我已经阅读了有关 gulp.series 和 gulp.parallel 的信息,但我认为这些东西都不是我想要的。上面的代码在 Gulp 3 中使用,在 Gulp 4 中不再工作。不是运行gulp watch_css,而是 cmd 向我抛出这样的错误:

assert.js:350 抛出错误; ^

AssertionError [ERR_ASSERTION]:必须指定任务函数 在 Gulp.set [as _setTask] (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\set-task.js:10:3) 在 Gulp.task (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\task.js:13:8) 在对象。 (D:\say-my-name-RG\saymyname\gulpfile.js:29:6) 在 Module._compile (internal/modules/cjs/loader.js:689:30) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) 在 Module.load (internal/modules/cjs/loader.js:599:32) 在 tryModuleLoad (internal/modules/cjs/loader.js:538:12) 在 Function.Module._load (internal/modules/cjs/loader.js:530:3) 在 Module.require (internal/modules/cjs/loader.js:637:17) 在需要(内部/模块/cjs/helpers.js:22:18)

这一切都在 localhost 节点服务器上,使用 react。我曾尝试寻找 gulp.set 函数,但我没有找到任何类似的东西。有人说回到 Gulp 3 是最简单的选择,但我有点想使用最新的软件。

还在 cmd 中运行 gulp compile_scss,所以没有 gulp.watch,会出现与上图相同的错误。

【问题讨论】:

【参考方案1】:

你确实需要使用 gulp.series:

//Detect changes in SCSS
gulp.task('watch_scss', function()
    gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
);

//Run
gulp.task('default', gulp.series('watch_scss'));

你有一个错字:

var minifyCCS   = require('gulp-clean-css');

改为:

var minifyCSS   = require('gulp-clean-css');

Migrating to gulp4 是一个很好的参考。

【讨论】:

非常感谢。我确实必须使用 .series 之一。我现在也明白为什么了。也感谢您的错字,我在我的 cmd 中也遇到了它:p 再次感谢

以上是关于Gulp 3 到 Gulp 4:如何观看 scss 并将其缩小/编译成 css?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 gulp 从 node_modules 导入 bootstrap 4 sass/scss

Glob观看多个文件,处理一个

Gulp:将文件复制到以特定字符串开头的多个文件夹

如何在 Gulp 4 中使用 async/await?

如何使用 Gulp 从 SASS/SCSS 中缩小和 Autoprefixer CSS 文件

Gulp-sass 无法编译 scss 文件