Alym_a
@Alym_a
дно

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

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

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

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

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

Вот что выдает терминал:
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('>', '>'))
    .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
  );
});


Я в большей степени не понимаю то, почему вчера работало все, ничего не делал вообще, а сегодня уже глючит. Может сталкивался кто и знает что надо сделать, чтобы все работало как часы
  • Вопрос задан
  • 263 просмотра
Пригласить эксперта
Ответы на вопрос 1
derzost_namereniya
@derzost_namereniya
Куплю сайт
У меня был такой глюк. Решил переустановкой всех gulp-плагинов
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы