1

Помогите разобраться с плагином browser-sync для gulp. Имеются два таска. При изменении html браузер перезагружается, при scss нет(При F5 работает).

var gulp = require("gulp");
var sass = require("gulp-sass");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var server = require("browser-sync");
var mqpacker = require("css-mqpacker");
var minify = require("gulp-csso");
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");
var svgstore = require("gulp-svgstore");
var svgmin = require("gulp-svgmin");
var del = require("del");
var run = require("run-sequence");

gulp.task("style", function() {
  gulp.src("sass/style.scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(postcss([
      autoprefixer({browsers: [
        "last 1 version",
        "last 2 Chrome versions",
        "last 2 Firefox versions",
        "last 2 Opera versions",
        "last 2 Edge versions"
      ]}),
      mqpacker({
      sort: true
      })
    ]))
    .pipe(gulp.dest("css"))
    .pipe(minify())
    .pipe(rename("style.min.css"))
    .pipe(gulp.dest("css"))
    .pipe(server.reload({stream: true}));
});

gulp.task("serve", ["style"], function() {
  server.init({
    server: ".",
    notify: false,
    open: true,
    ui: false
  });

  gulp.watch("sass/**/*.{scss,sass}", ["style"]);
  gulp.watch("*.html").on("change", server.reload);
});

3
  • эмм, так у вас в самом конце 2 вотчера, где для html вызывается server.reload, а для sass - нет 29 июл 2016 в 22:16
  • вотчер сасс запускает task style, в нем как раз и находиться server.reload, но почему то он не работает.
    – alexx
    30 июл 2016 в 5:45
  • Возможно не правильно объявлена переменная server, попробуйте изменить var server = require("browser-sync"); на var server = require("browser-sync").create();
    – stackanon
    30 июл 2016 в 6:12

1 ответ 1

1

В таске "style" .pipe(server.reload({stream: true})); параметр {stream: true} позволяет не перезагружать страницу, а просто обновлять файлы стилей, т.е. browser-sync находит в HTML-файле подключенный css файл и заменяет его на лету при любом изменении css-кода. При этом страница не перезагружается, и вы остаетесь в том же месте, но видите все изменения. Это работает только с css-файлами.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.