Почему мой Sass не отображается при использовании Gulp? - PullRequest
Новая
       17

Почему мой Sass не отображается при использовании Gulp?

0 голосов
/ 16 марта 2019

Я использую 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;

ЦСИ / 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>

ЦСИ / СКС / main.scss 

.heading {
background: green;
display: flex;


}

расстояние / CSS / main.css 

.heading{background:green;display:-webkit-box;display:-ms- 
flexbox;display:flex}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFNBQ0UsV0FBWSxNQUNaLFFBQVMsWUFDVCxRQUFTLFlBQ1QsUUFBUyIsImZpbGUiOiJtYWluLmNzcyIsInNvdXJjZXNDb250ZW50IjpbXX0= */

1 Ответ

0 голосов
/ 16 марта 2019

Попробуйте это: 

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() pipe должен идти до sass() pipe 

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

Это последнее изменение не имеет ничего общего с вашей первоначальной проблемой, но это изменение, которое вы захотите внести.

...