为什么我的 Sass 在使用 Gulp 时没有出现？

Question

我是运行 Gulp 版本 4。我有一个文件夹结构，我编辑的所有代码都在我的 src 文件夹中，所有被缩小、自动添加前缀等的代码都在发送到我的 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= */

Answer 1

试试这个：

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 并不像 browserSync 认为的那样位于 index.html 文件下。也使用这个：

 <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());
}

最后的更改与您原来的问题无关，但这是您想要进行的更改。

为什么我的 Sass 在使用 Gulp 时没有出现？

Why is my Sass not showing up when using Gulp?

javascript

html

css

gulp

gulp-sass