Gulp возвращает пустой файл css и html, в чем может быть дело?

Question

Aleksey Alym @Alym_a

дно

Gulp возвращает пустой файл css и html, в чем может быть дело?

Несколько дней разбирался с Gulp, все хорошо, писал таски, все работало, сервер автоматически рефрешил страницу при работе с файлами. Сегодня сделал новый тестовый проект. Все хорошо, sass преобразовался, страница готова, но при изменении файлов sass или html на выходе получаю пустой файл css, там только соурсмэпы. Если еще раз сохранить файл, то могут стили примениться, а могут и нет. Аналогично с html.

Я думал, что сделал что-то криво. Зашел в папку вчерашнего тестового проекта, позавчерашнего. Запустил там сервер и та же история.

Это состояние, когда я стартовал сервер(свехру исходные, снизу результат)

Это, когда я добавил правило в файл sass

Вот что выдает терминал:

spoiler

[23:22:22] Using gulpfile D:\OSPanel\domains\flexbox.loc\gulpfile.js
[23:22:22] Starting 'dist'...
[23:22:22] Starting 'clean'...
[23:22:22] Finished 'clean' after 284 ms
[23:22:22] Starting 'copy'...
[23:22:22] Finished 'copy' after 19 ms
[23:22:22] Starting 'sass'...
[23:22:22] Finished 'sass' after 47 ms
[23:22:22] Starting 'images'...
[23:22:22] gulp-imagemin: Minified 0 images
[23:22:22] Finished 'images' after 6.6 ms
[23:22:22] Starting 'svg'...
[23:22:22] Finished 'svg' after 122 ms
[23:22:22] Finished 'dist' after 486 ms
[23:22:24] Using gulpfile D:\OSPanel\domains\flexbox.loc\gulpfile.js
[23:22:24] Starting 'serve'...
[23:22:24] Finished 'serve' after 15 ms
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.117:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: dist
[23:24:27] Starting 'sass'...
[Browsersync] 1 file changed (style.css)
[23:24:27] Finished 'sass' after 174 ms

вот мой gulpfile, если нужен

spoiler

const gulp = require('gulp');
const sass = require('gulp-sass');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();
const sourceMaps = require('gulp-sourcemaps');
const imagemin = require("gulp-imagemin");
const imageminJpegRecompress = require('imagemin-jpeg-recompress');
const pngquant = require('imagemin-pngquant');
const run = require("run-sequence");
const del = require("del");
const svgSprite = require('gulp-svg-sprite');
const svgmin = require('gulp-svgmin');
const cheerio = require('gulp-cheerio');
const replace = require('gulp-replace');



gulp.task('sass', function(){
  return gulp.src("app/scss/style.scss/")
    .pipe(plumber())
    .pipe(sourceMaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(sourceMaps.write())
    .pipe(gulp.dest("dist/css"))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task("html", function(){
  return gulp.src("app/*.html")
    .pipe(gulp.dest("dist"))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task("js", function(){
  return gulp.src("app/js/**/*.js")
    .pipe(gulp.dest("dist/js"))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task("css", function(){
  return gulp.src("app/css/**/*.css")
    .pipe(gulp.dest("dist/css"))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task("allimg", function(){
  return gulp.src("app/img/**/*.{png, jpg}")
    .pipe(gulp.dest("dist/img"))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('images', function(){
  return gulp.src("dist/img/**/*.{png, jpg}")
    .pipe(imagemin([
      imagemin.jpegtran({progressive: true}),
      imageminJpegRecompress({
        loops: 5,
        min: 65,
        max: 70,
        quality: 'medium'
      }),
      imagemin.optipng({optimizationLevel: 3}),
      pngquant({quanty: "65-70", speed: 5})
    ]))
    .pipe(gulp.dest("dist/img"));
});

gulp.task('svg', function(){
  return gulp.src('app/img/**/*.svg')
    .pipe(svgmin({
      js2svg: {
        pretty: true
      }
    }))
    .pipe(cheerio({
      run: function ($) {
        $('[fill]').removeAttr('fill');
        $('[stroke]').removeAttr('stroke');
        $('[style]').removeAttr('style');
      },
      parserOptions: {xmlMode: true}
    }))
    .pipe(replace('&gt;', '>'))
    .pipe(svgSprite({
      mode: {
        symbol: {
          sprite: "sprite.svg"
        }
      }
    }))
  .pipe(gulp.dest('dist/img'));
});

gulp.task("serve", function(){
  browserSync.init({
    server: "dist"
  });

  gulp.watch("app/scss/**/*.scss", ["sass"]);
  gulp.watch("app/*.html", ["html"]);
  gulp.watch("app/js/**/*.js", ["js"]);
  gulp.watch("app/css/**/*.css", ["css"]);
  gulp.watch("app/img/**/*.{png, jpg}", ["allimg"]);
  gulp.watch("app/img/**/*.{svg}", ["svg"]);
});

gulp.task("copy", function(){
  return gulp.src([
    'app/img/**',
    'app/js/**',
    'app/css/**',
    'app/*.html'
  ],{
    base: 'app'
  })
    .pipe(gulp.dest("dist"));
});

gulp.task('clean', function(){
  return del('dist');
});

gulp.task('dist', function(fn){
  run(
    'clean',
    'copy',
    'sass',
    'images',
    'svg',
    fn
  );
});

Я в большей степени не понимаю то, почему вчера работало все, ничего не делал вообще, а сегодня уже глючит. Может сталкивался кто и знает что надо сделать, чтобы все работало как часы