Gulp3转Gulp4:怎么看scss和minify/compile变成css?
Gulp 3 to Gulp 4: How to watch scss and minify/compile it into css?
在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 中不再起作用。cmd 不是 运行 gulp watch_css
,而是抛出这样的错误:
assert.js:350
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\set-task.js:10:3)
at Gulp.task (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\task.js:13:8)
at Object. (D:\say-my-name-RG\saymyname\gulpfile.js:29:6)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
这一切都在本地主机节点服务器上,使用反应。我曾尝试寻找 gulp.set 函数,但我没有找到任何类似的东西。有人说回到 Gulp 3 是最简单的选择,但我有点想尽可能使用最新的软件。
还有 运行 gulp compile_scss
在 cmd 中,所以如果没有 gulp.watch,就会出现如上所示的相同错误。
您确实需要使用 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 是一个很好的参考。
在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 中不再起作用。cmd 不是 运行 gulp watch_css
,而是抛出这样的错误:
assert.js:350 throw err; ^
AssertionError [ERR_ASSERTION]: Task function must be specified at Gulp.set [as _setTask] (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\set-task.js:10:3) at Gulp.task (D:\say-my-name-RG\saymyname\node_modules\undertaker\lib\task.js:13:8) at Object. (D:\say-my-name-RG\saymyname\gulpfile.js:29:6) at Module._compile (internal/modules/cjs/loader.js:689:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10) at Module.load (internal/modules/cjs/loader.js:599:32) at tryModuleLoad (internal/modules/cjs/loader.js:538:12) at Function.Module._load (internal/modules/cjs/loader.js:530:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18)
这一切都在本地主机节点服务器上,使用反应。我曾尝试寻找 gulp.set 函数,但我没有找到任何类似的东西。有人说回到 Gulp 3 是最简单的选择,但我有点想尽可能使用最新的软件。
还有 运行 gulp compile_scss
在 cmd 中,所以如果没有 gulp.watch,就会出现如上所示的相同错误。
您确实需要使用 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 是一个很好的参考。