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

【问题标题】：Why is my Sass not showing up when using Gulp?为什么使用 Gulp 时我的 Sass 没有出现？
【发布时间】：2019-03-16 02:11:19
【问题描述】：

我正在运行 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= */

【问题讨论】：

标签： javascript html css gulp gulp-sass

【解决方案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());
}

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

【讨论】：

是的，你是对的......它正在寻找我的 index.html 文件，我将它放在 src 文件夹中......并且您的解决方案有效。我将 index.html 文件放在 src 文件夹中的唯一原因是因为我在 Github 上查看的所有其他 gulpfile.js 都在该位置。如果我只是将它与 gulpfile.js 和 package.json 放在根目录中会更好吗？
我的根目录里有我的，所以我以前从来没有遇到过你的特殊问题，无论我使用了多少“././dist/css/main.css”浏览器仍然看起来直接在html文件下。我的网站实际上是一个单页网站。所以更复杂的事情，我会说“src”文件夹是存储 html 文件的更好做法。
您的问题实际上并不是您的 html 文件的位置，而是 browserSync 一直在寻找与“./src”文件夹相关的 css 文件，这不起作用。我所做的更改改变了所有内容都与根文件夹“./”相关。