当前位置: 首页 > 知识库问答 >
问题:

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

昌勇锐
2023-03-14
//=======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']);

AssertionError[ERR_ASSERTION]:必须在gulp.set[as_settask](D:\say-my-name-rg\saymyname\node_modules\bujerker\lib\set-task.js:10:3)处指定任务函数,在gulp.Task(D:\say-my-name-rg\saymyname\node_modules\bujerker\lib\set-task.js:13:8)处指定任务函数。(d:\say-my-name-rg\saymyname\gulpfile.js:29:6)在module._compile(internal/module/cjs/loader.js:689:30)在object.module._extensions.js(internal/module/cjs/loader.js:700:10)在module.load(internal/module/cjs/loader.js:599:32)在tryModuleLoad(internal/module/cjs/loader.js:538:12)在function.module.load(internal/module/cjs/loader.js:530:3)在module.require(internal/module/cjs/loader.js S:637:17)在需要时(内部/Modules/CJS/Helpers.js:22:18)

这都是在localhost节点服务器上使用React完成的。我尝试过寻找gulp.set函数,但没有找到任何类似的函数。有人说回到Gulp3将是最简单的选择,但我有点想使用最新的软件可能。

同样,在cmd中运行gulp compile_scss,因此不使用gulp.watch,会出现与上面所示相同的错误。

共有1个答案

华升
2023-03-14

您确实需要使用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');
 类似资料: