@thereal_kh
Более менее опытный фронт-энд разработчик.

Почему gulp.watch не работает как должен?

gulp.watch не видит изменения в #src/index.html.
изменения в #src/scss/style.scss видит и запускает компиляцию, только html не видит....

gulpfile.js
// const { series } = require('gulp');
const gulp = require('gulp');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');

function sass_compile(d) {
  
  gulp.src('./#src/scss/style.scss')
    .pipe(sass({
      errorLogToConsole: true,
      outputStyle: 'compressed'
    }))
    .on('error', console.error.bind(console))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 5 versions'],
      cascade: false,
      grid: 'autoplace'
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/css/'));
  
  gulp.src('./#src/scss/style.scss')
    .pipe(sass())
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 5 versions'],
      cascade: false,
      grid: 'autoplace'
    }))
    .pipe(gulp.dest('./#src/css/'));
  d();
}

function watch() {
  console.log('detected');
  
  gulp.watch('./#src/scss/style.scss', sass_compile);
  gulp.watch('./#src/*.html', gulp.dest('./dist/'));
  gulp.watch('./#src/js/**/*.js', gulp.dest('./dist/js'));
  gulp.watch('./#src/img/**/*.{png, jpg, ico, gif, webp}', gulp.dest('./dist/img'));

}
function launchProject(d) {
  gulp.src('#src/img/**/*.{png, jpg, ico, gif, webp}')
    .pipe(gulp.dest('dist/img/'));
  
  gulp.src('#src/js/**/*.js')
    .pipe(gulp.dest('dist/js/'));
  
  gulp.src('#src/css/**/*.css')
    .pipe(gulp.dest('dist/css/'));
  
  gulp.src('#src/**/*.html')
    .pipe(gulp.dest('dist/'));
  d();
}
exports.sass_compile = sass_compile;
exports.watch = watch;
exports.launchProject = launchProject;
exports.default = gulp.series(sass_compile, watch);


Структура проекта:
5ec3ff678794b541039939.jpeg
  • Вопрос задан
  • 53 просмотра
Пригласить эксперта
Ответы на вопрос 2
@its2easyy
в watch второй параметр это название функции которая выполняется при изменении, в scss стоит sass_compile поэтому она выполняется, для html нужно сделать отдельную функцию которая будет копировать html и передать её вторым параметром.
Ответ написан
Комментировать
@thereal_kh Автор вопроса
Более менее опытный фронт-энд разработчик.
function gulpDest(){
    return gulp.dest('./dist/');
}


сработает?
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы