Внедрение SASS + CSS с помощью Gulp и BrowserSync

ОБНОВЛЕНО

Если вы хотите настроить browserSync как статический сервер с перезагрузкой в ​​реальном времени, вы в значительной степени правы со своим подходом. Вы можете указать браузерной синхронизации любую папку в вашем репозитории, используя опцию baseDir. Вы также можете использовать несколько каталогов. Для получения дополнительной информации ознакомьтесь с документацией.

Первый. Я хотел бы разделить задачи, которые у вас есть.

Лично я бы предпочел, чтобы моя серверная задача была примерно такой;

gulp.task('serve', ['build'], function(event) {
  var server = browsersync.create();
  server.init({
    baseDir: 'app/'
  });
  return server.watch('app/**', function(evt, file) {
    server.reload();
  });
});

Обратите внимание, что build является зависимостью. Это гарантирует, что все наши обслуживаемые файлы будут на месте, когда мы инициируем BrowserSync.

Сохраняя его общим, мы можем затем разделить задачи, связанные со SCSS, на их собственные задачи, такие как scss:compile и scss:watch.

gulp.task('scss:compile', function(){
    return gulp.src('src/scss/**/*.scss')
        .pipe(plumber())
        .pipe(scss())
        .pipe(gulp.dest('app/css/');
});

а также

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

Для внедрения CSS. Есть два варианта сделать это

Помните, что инъекция отличается от перезагрузки. В то время как перезагрузка сбросит состояние страницы, внедрение не повлияет на текущее состояние страницы и просто введет стили.

Первый вариант — вызвать browsersync.stream() с переданным по конвейеру содержимым вашей компиляции SASS, как показано ниже;

gulp.task('scss:compile', function() {
  return gulp.src('src/scss/**/*.scss')
    .pipe(plumber())
    .pipe(scss())
    .pipe(gulp.dest('app/css')
    .pipe(browsersync.stream());
});

Обратите внимание, что последний канал вводит изменения. Это также требует проверки типа файла в часах BrowserSync, чтобы перезагружаться только при изменении файла, отличного от CSS.

Этот вариант подходит. Тем не менее, я думаю, что неясно, чтобы он был просто связан в конце и отделен от кода установки BrowserSync.

Второй вариант (лично предпочтительнее) – отслеживать изменения с помощью BrowserSync, и если изменяется файл CSS, используйте vinyl для потоковой передачи этих изменений в BrowserSync.

Что-то вроде следующего имеет тенденцию работать;

var gulp      = require('gulp'),
  browsersync = require('browser-sync'),
  vss         = require('vinyl-source-stream'),
  vb          = require('vinyl-buffer'),
  vf          = require('vinyl-file');

gulp.task('serve', ['build'], function() {
  var server = browsersync.create();
  server.init({ baseDir: 'app/' });
  return server.watch('app/**', function(evt, file) {
    if (evt === 'change' && file.indexOf('.css') === -1)
      server.reload();
    if (evt === 'change' && file.indexOf('.css') !== -1)
      vf.readSync(file)
        .pipe(vss(file))
        .pipe(vb())
        .pipe(server.stream());
  });
});

Надеюсь, это поможет вам!