如何将我的 styles
任务、browser-sync
和我的 watch
任务合并到一个 gulp
默认命令中?
这是我到目前为止所拥有的。
var gulp = require("gulp");
var sass = require("gulp-sass");
var browserSync = require("browser-sync").create();
gulp.task("styles", function() {
gulp
.src("sass/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./css/"));
});
// Static server
gulp.task("browser-sync", function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
//Watch task
gulp.task("default", function() {
gulp.watch("sass/**/*.scss", gulp.series("styles"));
});
我也从浏览器同步文档中尝试过此操作,但它给了我错误AssertionError [ERR_ASSERTION]:必须指定任务函数
顶部具有相同的变量。
gulp.task("serve", ["sass"], function() {
browserSync.init({
server: "./"
});
gulp.watch("/sass/*.scss", ["sass"]);
gulp.watch("/*.html").on("change", browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task("sass", function() {
return gulp
.src("/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("/css"))
.pipe(browserSync.stream());
});
gulp.task("default", ["serve"]);
最佳答案
我猜您正在使用 gulp 4,它处理依赖任务的方式有点不同,这就是您收到错误的原因。
如果您确实使用 gulp 4,请尝试官方 recipe :
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css/')) //removed semicolon
.pipe(browserSync.reload({ stream:true }));
});
// watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
gulp.task('serve', gulp.series('sass', function() {
browserSync({
server: {
baseDir: './'
}
});
gulp.watch('sass/**/*.scss', gulp.series('sass'));
}));
关于node.js - gulp 将任务合并到默认命令中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53573492/