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并不位于browser.Sync认为的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());
}

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

为什么在使用Gulp时Sass不能显示？

1 个答案: