Browser-Sync - изменяется на .scss, который не появляется в браузере, а появляется в .css - PullRequest
Новая
       44

Browser-Sync - изменяется на .scss, который не появляется в браузере, а появляется в .css

0 голосов
/ 09 января 2019

Я пытаюсь настроить проект с браузерной синхронизацией в Gulp 4. При выполнении моей задачи по умолчанию «gulp» - браузерная синхронизация загружается и запускает экземпляр chrome на локальном компьютере: 3000 и все изменения, внесенные в мою » src "папка для .html файлов перезагружается, как и ожидалось после сохранения. Тем не менее, все, что находится в моей папке "sass" как " .scss", правильно скомпилировано и перемещено в мою папку "dist" как ".css" после сохранения, однако любые изменения не загружаются в мой браузер после сохранения.

Я попытался изменить расположение браузера browserSync.reload так, чтобы оно выполнялось до минимизации, но это не решило проблему. Я попытался просмотреть документ browsersync + Gulp.js, но безрезультатно. Я все еще новичок в Gulp 4 и учусь, поэтому вполне возможно, что я просто что-то испортил в коде или пытаюсь выполнить ряд команд, которые не работают вместе. 

/* REQUIRED PACKAGES EDITED */

var gulp = require('gulp');
    watch = require('gulp-watch');
    browserSync = require('browser-sync').create();
    concat = require('gulp-concat');
    sass = require('gulp-sass');
    uglify = require('gulp-uglify');
    imagemin = require('gulp-imagemin');
    pump = require('pump');
    cleanCSS = require('gulp-clean-css');

/* GULP TASKS */

/* Pipe .HTML to Dist Folder */

gulp.task('html', function(cb) {
  pump([
    gulp.src('src/*.html'),
    gulp.dest('dist'),
    browserSync.stream()
  ],
  cb
  );
});

/* Clean and Pipe .SCSS to Dist Folder */

gulp.task('sass', function(cb) {
  pump([
    gulp.src('src/sass/*.scss'),
    sass().on('error', sass.logError),
    cleanCSS(),
    gulp.dest('dist/css'),
    browserSync.stream()
  ],
  cb
  );
});

gulp.task('sass:watch', function(){
  gulp.watch('src/sass/*.scss', ['sass']);
});

/* Concat, Uglify & Pipe .JS to Dist Folder */

gulp.task('js', function(cb) {
  pump([
    gulp.src('src/js/*.js'),
    concat('main.js'),
    uglify(),
    gulp.dest('dist/js'),
    browserSync.stream()
  ],
  cb
  );
});

/* Minify & Pipe .IMG to Dist Folder */

gulp.task('imagemin', function(cb) {
  pump([
    gulp.src('src/img/*'),
    imagemin(),
    gulp.dest('dist/img'),
    browserSync.stream()
  ],
  cb
  );
});

/* Browser-Sync */

gulp.task('browser-sync', function() {
  browserSync.init({
      server: {
          baseDir: './src'
      }
  });
});

gulp.task('watch', function() {

  gulp.watch('./src/sass/*.scss', gulp.series('sass'));
  gulp.watch('./src//js/*.js', gulp.series('js'));
  gulp.watch('./src/*.html', gulp.series('html'));

});

/* RUN DEFAULT - RUN ALL TASKS */

gulp.task('default', gulp.parallel('html', 'sass', 'js', 'imagemin', 'browser-sync', 'watch'));

Я ожидал бы, что все будет работать, но, опять же, после любых изменений, внесенных в файл .scss, они происходят и сохраняются в файле .css, но эти изменения не отображаются в браузере. Любая помощь очень ценится!

1 Ответ

0 голосов
/ 09 января 2019

Изменить это: 

gulp.watch('./src/sass/*.scss', gulp.series('sass'), browserSync.reload);

до: 

gulp.watch('./src/sass/*.scss', gulp.series('sass', browserSync.reload));

Также в этом: 

gulp.task('sass', function(cb) {
   pump([
     gulp.src('src/sass/*.scss'),

     // don't call browserSync.stream() before sass()
     // plus you already have it in your scss watch to reload
     // so either move this to the end - after gulp.dest - and remove it from the watch
     // or remove it from here and leave in the watch

     //  browserSync.stream(),

     sass().on('error', sass.logError),
     cleanCSS(),
     gulp.dest('dist/css')
   ],

   cb;
  );
 });

// in your watch task:

gulp.watch("./src/*.html", { events: 'all' }, function(cb) {
    browserSync.reload();
    cb();
  });



gulp.task('html', function(cb) {
  pump([
    gulp.src('src/*.html'),
    gulp.dest('dist'),
    //  browserSync.stream()
  ],
  cb
  );
});
...