一饮而尽观看css并在变化中缩小
一饮而尽观看css并在变化中缩小
提问于 2022-09-09 02:58:41
我有下面的gulp文件，它将监视我的styles.scss文件并更新我的style.css文件。每次styles.css文件更新时，我都需要运行“”来缩小它。我想知道是否有一种方法可以“监视”styles.css文件并自动缩小它？
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const minifyCSS = require('gulp-minify-css');
const minify = require('gulp-minify');
// complie scss into css
function style() {
// where is my scss file
return gulp.src('./css/scss/**/*.scss')
// pass that file through scss compiler
.pipe(sass())
//where do i save the compiled css?
.pipe(gulp.dest('./css'))
// stream changes to all browsers
.pipe(browserSync.stream());
}
function minifycss() {
return gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
}
function watch () {
browserSync.init({
});
gulp.watch('./css/scss/**/*.scss', style);
gulp.watch('./css/styles.css', minifycss);
}
exports.style = style;
exports.minifycss = minifycss;
exports.watch = watch;我看到了这篇文章Using Gulp to Minify and Auto Update a CSS File并编辑了我的gulp文件如下：
function minifycss() {
return gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
}
gulp.task("minify-css", minifyCSS);
gulp.task("watch", () => {
gulp.watch("./css/*.css", minifyCSS);
});
gulp.task('default', gulp.series('minify-css', 'watch'));但是，当我运行它时，我会得到以下错误：
您忘记发出异步完成的信号了吗？
这是我的口水细节：
CLI版本: 2.3.0 本地版本: 4.0.2
你知道我是怎么让它起作用的吗？
谢谢
回答 1
Stack Overflow用户
发布于 2022-11-03 03:38:38
在Gulp 4+中，任务默认为异步，因此需要在完成时发出信号。您可以返回任务以与其他任务连接，或者如果其他任务是独立的，只需发出信号，表示任务已经作为任务函数中的一个参数获得回调方法(下面我将其命名为done，但您可以使用任何您想要的名称)。
除此之外，要使用watch运行任务，您需要使用gulp.series()来指定任务。此外，由于watch不会立即返回，所以您应该使用watch和series也作为参数的结束信令方法。
因此，在您的例子中，代码应该是(我还没有测试它，但它应该能工作)：
gulp.task("minify-css", (done) => {
gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'));
done();
});
gulp.task("watch", (done) => {
gulp.watch("./css/*.css", gulp.series(minifyCSS))(done);
});
gulp.task('default', (done) => gulp.series('minify-css', 'watch')(done));如果对你有用的话请告诉我。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73661107
复制相关文章
点击加载更多
相似问题
本地和Heroku环境变量
问题设置本地heroku环境变量
Heroku Python导入本地函数
导出用于本地开发和heroku部署的环境变量
更改heroku环境变量
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
