Не обновляется браузер при изменении стилей через Gulp?

Question

[Сергей Семенов]

"use strict";

var gulp = require("gulp");
var less = require("gulp-less");
var plumber = require("gulp-plumber");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var minify = require("gulp-csso");
var rename = require("gulp-rename");
var imagemin = require("gulp-imagemin");
var webp = require("gulp-webp");
var svgstore = require("gulp-svgstore");
var posthtml = require("gulp-posthtml");
var include = require("posthtml-include");
var server = require("browser-sync").create();
var run = require("run-sequence");
var del = require("del");

gulp.task("style", function() {
  gulp.src("less/style.less")
    .pipe(plumber())
    .pipe(less())
    .pipe(postcss([
      autoprefixer()
    ]))
    .pipe(gulp.dest("build/css"))
    .pipe(minify())
    .pipe(rename("style.min.css"))
    .pipe(gulp.dest("build/css"))
    .pipe(server.stream());
});

gulp.task("serve", function() {
  server.init({
    server: "build/",
    notify: false,
    open: true,
    cors: true,
    ui: false
  });

  gulp.watch("less/**/*.less", ["style"]);
  gulp.watch("*.html", ["html"]);
});

gulp.task("images", function () {
  return gulp.src("build/img/**/*{png,jpg,svg}")
    .pipe(imagemin([
      imagemin.optipng({optimizationLevel: 3}),
      imagemin.jpegtran({progressive: true}),
      imagemin.svgo()
    ]))
    .pipe(gulp.dest("build/img"))
});

gulp.task("webp", function() {
  return gulp.src("build/img/**/*.{png,jpg}")
    .pipe(webp({quality: 70}))
    .pipe(gulp.dest("build/img"));
});

gulp.task("sprite", function() {
  return gulp.src("img/inline-*.svg")
    .pipe(svgstore({
      inlineSvg: true
    }))
    .pipe(rename("sprite.svg"))
    .pipe(gulp.dest("build/img"));
});

gulp.task("html", function() {
  return gulp.src("*.html")
    .pipe(posthtml([
      include()
    ]))
    .pipe(gulp.dest("build"));
});

gulp.task("copy", function () {
  return gulp.src([
    "fonts/**/*.{woff,woff2}",
    "img/**",
    "js/**"
  ], {
    base: "."
  })
    .pipe(gulp.dest("build"));
});

gulp.task("build", function(done) {
  run("clean", "copy", "images", "webp", "style", "sprite", "html", done);
});

gulp.task("clean", function() {
  return del("build");
});

Answer 1

[NichitencoEvgh]

gulp.task("serve", function() {

Букву r ты потерял.

Comments

[Сергей Семенов]

serve это такой таск

[NichitencoEvgh]

Skaper777, ну так а где он этот таск в цепочке?
run("clean", "copy", "images", "webp", "style", "sprite", "html", done);

[Сергей Семенов]

NichitencoEvgh, так ща все проверю и вернусь, не заметил

[Сергей Семенов]

NichitencoEvgh, этот таск запускается командой npm start вместе с npm run build, gulp serve, значит в другом проблема

[NichitencoEvgh]

Skaper777, я по другому собираю, вот сегодня с утра делал, на четвертом галпе, у меня всё работает:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const pug = require('gulp-pug');
const sass = require('gulp-sass');
const rimraf = require('rimraf');
const autoprefixer = require('gulp-autoprefixer');

/*------ Static server --------*/
gulp.task('browser-sync', function() {
browserSync.init({
server: {
port: 9000, // Вписан порт с адресом 9000 для браузера
baseDir: "build" // Папка, которую должен отлеживать browser-sync
}
});
gulp.watch('build/**/*').on('change', browserSync.reload); // За какими файлами следить и при измении перезагружать браузер
});

/*--------- Pug-компилятор ----------*/
gulp.task('templates:compile', function buildHTML() { // Задача Галпа: компилировать шаблон
return gulp.src('source/template/*.pug') // Путь к шаблону. Точка входа
.pipe(pug({
pretty: true // Устанавливаем, что HTML код на выходе будет несжатым
}))

.pipe(gulp.dest('build')) // Указание, куда будет складываться скомпилированный код
});

// SASS compile
gulp.task('styles:compile', function () { // Вместо SASS вприсано styles:compile
return gulp.src('source/styles/main.scss') // Точка входа. Откуда брать файл для компиляции
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('build'));
});

/*---------- Копирование картинок в папку buid -------*/
gulp.task('copy:images', function() {
return gulp.src('./source/images/**/*.*')
.pipe(gulp.dest('build/images'));
});

/*----- Очистка от мусора ---------*/
gulp.task('clean', function del(cb) {
return rimraf('build', cb);
});

/*---------Галп-автопрефиксер------------*/
gulp.task('autoprefixer', () =>
gulp.src('build/main.css')
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(gulp.dest('build'))
);

/* Watchers. Слежение за изменениями */
gulp.task('watch', function() {
gulp.watch('source/template/**/*.pug', gulp.series('templates:compile')); // За какой папкой следить и какой таск выполнять при изменении
gulp.watch('source/styles/**/*.scss', gulp.series('styles:compile', gulp.series('autoprefixer')));
});

/* Запуск поставленных задач по умолчанию при запуске Галпа */
gulp.task('default', gulp.series(
'clean',
gulp.parallel('templates:compile', 'styles:compile', 'copy:images'),
gulp.parallel('watch', 'autoprefixer', 'browser-sync')
));