K
K
konstantinst132021-09-20 04:39:38
gulp.js
konstantinst13, 2021-09-20 04:39:38

Why can't Gulp Watch see changes in pug files? It's just that the gulp command sees them. What is the problem?

Good day to all!

For some reason, the watch task does not see my changes in .pug files when I make them. Moreover, if you stop gulp watch and write gulp again in the console, then all changes from .pug will be transferred to index.html. And if you continue to edit .pug-files, then gulp watch will still not see them until the next gulp restart.

I have a default gulp task that runs several tasks and finally runs the watch task.

gulpfile.js

let gulp = require('gulp'),
    pug = require('gulp-pug'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    del = require('del'),
    autoprefixer = require('gulp-autoprefixer'),
    gcmq = require('gulp-group-css-media-queries');


gulp.task('clean', async function () {
    del.sync('dist')
})

gulp.task('pug',function() {
 return gulp.src('app/pug/*.pug')
 .pipe(pug({
    doctype: 'html',
    pretty: false
 }))
 .pipe(gulp.dest('app/'));
});

gulp.task('scss', function () {
    return gulp.src('app/scss/style.scss')


        .pipe(autoprefixer({
            cascade: false
        }))

        .pipe(sass({
            outputStyle: 'expanded'
        }))
      .pipe(gcmq())
        .pipe(gulp.dest('app/css'))
        .pipe(sass({
            outputStyle: 'compressed'
        }))
      .pipe(gcmq())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('app/css'))
//        .pipe(browserSync.reload({
//            stream: true
//        }))
});

gulp.task('css', function () {
    return gulp.src([
    'node_modules/normalize.css/normalize.css',
    'node_modules/slick-carousel/slick/slick.css',
  ])
        .pipe(concat('_libs.scss'))
        .pipe(gulp.dest('app/scss'))
        .pipe(gcmq())
//        .pipe(browserSync.reload({
//            stream: true
//        }))
});

gulp.task('html', function () {
    return gulp.src('app/*.html')
//        .pipe(browserSync.reload({
//            stream: true
//        }))
});

gulp.task('script', function () {
    return gulp.src('app/js/*.js')
//        .pipe(browserSync.reload({
//            stream: true
//        }))
});

gulp.task('js', function () {
    return gulp.src([
    'node_modules/slick-carousel/slick/slick.js'
  ])
        .pipe(concat('libs.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('app/js'))
//        .pipe(browserSync.reload({
//            stream: true
//        }))
});

//gulp.task('browser-sync', function () {
//    browserSync.init({
//        server: {
//            baseDir: "app/"
//        }
//    });
//});

gulp.task('export', function () {
    let buildHtml = gulp.src('app/**/*.html')
        .pipe(gulp.dest('dist'));

    let BuildCss = gulp.src('app/css/**/*.css')
        .pipe(gulp.dest('dist/css'));

    let BuildJs = gulp.src('app/js/**/*.js')
        .pipe(gulp.dest('dist/js'));

    let BuildFonts = gulp.src('app/fonts/**/*.*')
        .pipe(gulp.dest('dist/fonts'));

    let BuildImg = gulp.src('app/img/**/*.*')
        .pipe(gulp.dest('dist/img'));
});

gulp.task('watch', function () {
    gulp.watch('app/pug/*.pug', gulp.parallel('pug'));
    gulp.watch('app/scss/**/*.scss', gulp.parallel('scss'));
    gulp.watch('app/*.html', gulp.parallel('html'))
    gulp.watch('app/js/*.js', gulp.parallel('script'))
});

gulp.task('build', gulp.series('clean', 'export'))

//gulp.task('default', gulp.parallel('pug', 'scss', 'css', 'js', 'browser-sync', 'watch'));
gulp.task('default', gulp.parallel('pug', 'scss', 'css', 'js', 'watch'));

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question