我的gulp-sass配置发生以下情况:
当我执行任务时,将生成.min.css,但更改在前端不可见。只有在我手动进入.min.css并保存它们之后,前端中的更改才可见。
这种奇怪的行为从未发生在我身上。有人可以帮我吗?
这是我的gulpfile.js:
// Load plugins
const autoprefixer = require("gulp-autoprefixer");
const browsersync = require("browser-sync").create();
const cleanCSS = require("gulp-clean-css");
const gulp = require("gulp");
const header = require("gulp-header");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const pkg = require("./package.json");
sass.compiler = require('node-sass');
// Copy third party libraries from /node_modules into /vendor
gulp.task("vendor", function(cb) {
// Bootstrap
gulp
.src([
"./node_modules/bootstrap/dist/**/*",
"!./node_modules/bootstrap/dist/css/bootstrap-grid*",
"!./node_modules/bootstrap/dist/css/bootstrap-reboot*"
])
.pipe(gulp.dest("./files/theme/vendor/bootstrap"));
// jQuery
gulp
.src([
"./node_modules/jquery/dist/*",
"!./node_modules/jquery/dist/core.js"
])
.pipe(gulp.dest("./vendor/jquery"));
cb();
});
function css(){
return gulp.src('./files/theme/scss/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(
autoprefixer({
browsers: ["last 2 versions"],
cascade: false
})
)
.pipe(gulp.dest('./files/theme/css'))
.pipe(
rename({
suffix: ".min"
})
)
.pipe(cleanCSS())
.pipe(gulp.dest("./files/theme/css"))
.pipe(browsersync.stream());
}
// Tasks
gulp.task("css", css);
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: "./files/theme"
}
});
done();
}
// BrowserSync Reload
function browserSyncReload(done) {
browsersync.reload();
done();
}
// Watch files
function watchFiles() {
gulp.watch("./files/theme/scss/**/*", css);
gulp.watch("./files/theme/**/*.html", browserSyncReload);
gulp.watch("./templates/*.html5", browserSyncReload);
}
gulp.task("default", gulp.parallel("vendor", css));
// dev task
gulp.task("dev", gulp.parallel(watchFiles, browserSync));