0

Выполняю команду gulp serve: в браузере не происходит онлайн обновления после сохранения css/html файлов. В чем может быть ошибка? Правильно ли составлен gulpfile?

"use strict";

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 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 include = require('posthtml-include');
var posthtml = require('gulp-posthtml');

gulp.task('style', function() {
    return gulp.src('source/sass/style.scss')
        .pipe(plumber())
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss([
            autoprefixer()
        ]))
        .pipe(gulp.dest('source/css'))
        .pipe(minify())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest('source/css'))
        .pipe(server.stream());
    });

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

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

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

gulp.task('webp', function () {
    return gulp.src('source/img/**/*.{png,jpg}')
        .pipe(webp({quality: 90}))
        .pipe(gulp.dest('source/img'));
});

gulp.task('serve', function() {
    server.init({
        server: 'source/'

    });
    gulp.task('watch', function() {
        gulp.watch('source/sass/**/*.{scss,sass}', ['style']);
        gulp.watch('source/*.html', ['html'])

    });
});

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

var del = require('del');
gulp.task('clean', function () {
    return del('build');
});


gulp.task('build', gulp.series(
    'clean', 'copy', 'style', 'sprite', 'html'
));

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

//----------------------------------------------------------------


{
  "name": "sati",
  "version": "1.0.0",
  "description": "task",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "gulp build",
    "start": "npm run build && gulp serve",
    "sprite": "gulp sprite",
    "html": "gulp html"
  },
  "author": "Dmitry",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.6.4",
    "browser-sync": "^2.24.5",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-csso": "^3.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-plumber": "^1.2.0",
    "gulp-postcss": "^7.0.1",
    "gulp-posthtml": "^3.0.4",
    "gulp-rename": "^1.3.0",
    "gulp-sass": "^4.0.1",
    "gulp-svgstore": "^6.1.1",
    "gulp-webp": "^3.0.0",
    "posthtml-include": "^1.2.0"
  },
  "dependencies": {}
}

1 ответ 1

0

В html-таске файл кладется в директорию build, а сервер запускается в папке source. Может причина в этом. Да и других тасках тоже не везде правильные пути.

gulp.task('serve', function() {
    server.init({
        server: 'source/' !!!!!!!!!!!!!!!!!!!!!!

    });
    gulp.task('watch', function() {
        gulp.watch('source/sass/**/*.{scss,sass}', ['style']);
        gulp.watch('source/*.html', ['html'])

    });
}); 

Ваш ответ

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

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