我正在运行Gulp版本4.我有一个文件夹结构，我编辑的所有代码都在我的src文件夹中，所有被缩小的代码，autoprefixed等都被发送到我的dist文件夹。出于某种原因，当我使用BrowserSync打开我的文件时，对main.scss文件所做的所有更改都会缩小，自动反映到dist / css / main.css文件，但只要BrowserSync生效，更改就不会显示。这是我的gulpfile.js，index.html，main.css和main.scss。
Gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const cleanCSS = require( 'gulp-clean-css');
const sourcemaps = require( 'gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
// Create a function named scss which applies all the changes to our scss folder and all .scss files in that folder
function scss() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(sourcemaps.init())
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
}
/* Create a function that will compress our images */
/* function images() {
return gulp.src('src/img/*')
.pipe(imagemin())
.pipe( imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5})
]))
.pipe(gulp.dest('dist/img/'))
} */
function watch() {
browserSync.init({
server: {
baseDir: './src'
}
});
gulp.watch('src/scss/**/*.scss', scss);
gulp.watch('src/*.html').on('change', browserSync.reload);
}
exports.scss = scss;
exports.watch = watch;SRC / index.html的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="dist/main.css">
<title>Gulp 4</title>
</head>
<body>
<h1 class="heading">Gulp 4 Works</h1>
</body>
</html>SRC / SCSS / main.scss
.heading {
background: green;
display: flex;
}
DIST / CSS /的main.css
.heading{background:green;display:-webkit-box;display:-ms-
flexbox;display:flex}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFNBQ0UsV0FBWSxNQUNaLFFBQVMsWUFDVCxRQUFTLFlBQ1QsUUFBUyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbXX0= */
试试这个：
function watch() {
browserSync.init({
server: {
// baseDir: './src',
baseDir: "./",
index: "src/index.html",
}
});
gulp.watch('src/scss/**/*.scss', scss);
gulp.watch('src/*.html').on('change', browserSync.reload);
}
请注意我对baseDir所做的更改并添加了index服务器选项。我认为你的index.html位于src文件夹中？
我运行了你的原始代码，浏览器总是在这里寻找css文件：
http://localhost:3000/dist/css/main.css
这是有问题的，因为你的main.css不在index.html文件下，因为browserSync似乎认为。也用这个：
<link rel="stylesheet" href="dist/css/main.css">
有了上述内容，您无需从index.html文件夹中移动src文件。
另外，在你的scss任务中，sourcemaps.init()管道应该在sass()管道之前
function scss() {
return gulp.src('src/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer('last 2 versions'))
.pipe(cleanCSS())
.pipe(sourcemaps.write())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
}
最后一次更改与原始问题无关，但这是您要进行的更改。