Функция Gulp Watch не отображает онлайн изменения в браузере. - PullRequest
0 голосов
/ 14 апреля 2020

Вот мой gulpfile. js код.

"use strict";

var gulp = require("gulp"),
    autoprefixer = require("gulp-autoprefixer"),
    cssbeautify = require("gulp-cssbeautify"),
    removeComments = require('gulp-strip-css-comments'),
    rename = require("gulp-rename"),
    sass = require("gulp-sass"),
    cssnano = require("gulp-cssnano"),
    rigger = require("gulp-rigger"),
    uglify = require("gulp-uglify"),
    watch = require("gulp-watch"),
    plumber = require("gulp-plumber"),
    imagemin = require("gulp-imagemin"),
    run = require("gulp4-run-sequence"),
    rimraf = require("rimraf"),
    webserver = require("browser-sync");



/* Paths to source/build/watch files
    =========================*/

var path = {
  build: {
    html: "dist/",
    js: "dist/assets/js/",
    css: "dist/assets/css/",
    img: "dist/assets/i/",
    fonts: "dist/assets/fonts/",
    json: "dist/assets/"
  },
  src: {
    html: "src/*.{htm,html,php}",
    js: "src/assets/js/*.js",
    css: "src/assets/sass/style.scss",
    img: "src/assets/i/**/*.*",
    fonts: "src/assets/fonts/**/*.*",
    json: "src/assets/*.json"
  },
  watch: {
    html: "src/**/*.{htm,html,php}",
    js: "src/assets/js/**/*.js",
    css: "src/assets/sass/**/*.scss",
    img: "src/assets/i/**/*.*",
    fonts: "src/assets/fonts/**/*.*",
    json: "src/assets/*.json"
  },
  clean: "./dist"
};



/* Webserver config
    =========================*/

var config = {
  server: "dist/",
  notify: false,
  open: true,
  ui: false
};



/* Tasks
    =========================*/

gulp.task("webserver", function () {
  webserver(config);
});


gulp.task("html:build", function () {
  return gulp.src(path.src.html)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(gulp.dest(path.build.html))
    .pipe(webserver.reload({stream: true}));
});


gulp.task("css:build", function () {
  return gulp.src(path.src.css)
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
    overrideBrowserslist: ["last 8 versions"],
    cascade: true
  }))
    .pipe(cssbeautify())
    .pipe(gulp.dest(path.build.css))
    .pipe(cssnano({
    zindex: false,
    discardComments: {
      removeAll: true
    }
  }))
    .pipe(removeComments())
    .pipe(rename("style.min.css"))
    .pipe(gulp.dest(path.build.css))
    .pipe(webserver.reload({stream: true}));
});


gulp.task("js:build", function () {
  return gulp.src(path.src.js)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(gulp.dest(path.build.js))
    .pipe(uglify())
    .pipe(rename("main.min.js"))
    .pipe(gulp.dest(path.build.js))
    .pipe(webserver.reload({stream: true}));
});


gulp.task("fonts:build", function() {
  return gulp.src(path.src.fonts)
    .pipe(gulp.dest(path.build.fonts));
});


gulp.task("image:build", function () {
  return gulp.src(path.src.img)
    .pipe(imagemin({
    optimizationLevel: 3,
    progressive: true,
    svgoPlugins: [{removeViewBox: false}],
    interlaced: true
  }))
    .pipe(gulp.dest(path.build.img));
});


gulp.task("json:build", function() {
  return gulp.src(path.src.json)
    .pipe(gulp.dest(path.build.json));
});


gulp.task("clean", function (cb) {
  rimraf(path.clean, cb);
});


gulp.task("build", function (cb) {
  run(
    "clean",
    "html:build",
    "css:build",
    "js:build",
    "fonts:build",
    "image:build",
    "json:build"
    , cb);
});


gulp.task("watch", function() {
  gulp.watch(path.watch.html, gulp.parallel("html:build"));
  gulp.watch(path.watch.css, gulp.parallel("css:build"));
  gulp.watch(path.watch.js, gulp.parallel("js:build"));
  gulp.watch(path.watch.img, gulp.parallel("image:build"));
  gulp.watch(path.watch.fonts, gulp.parallel("fonts:build"));
  gulp.watch(path.watch.json, gulp.parallel("json:build"))
});


gulp.task("default", function (cb) {
  run(
    "clean",
    "build",
    "webserver",
    "watch"
    , cb);
});

Работает хорошо, за исключением одной вещи. Там нет онлайн отслеживания изменений (глоток часы). Проект редактируется в папке «src /», но файлы сохраняются в другой папке «dist /». Может быть, это проблема?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...