Как отслеживать pug в gulp?

Question

[Вадим Сомов]

var gulp         = require('gulp'), 
    sass         = require('gulp-sass'),
    pug          = require('gulp-pug'),
    browserSync  = require('browser-sync'), 
     concat      = require('gulp-concat'), 
    uglify       = require('gulp-uglifyjs'), 
    cssnano      = require('gulp-cssnano'), 
    rename       = require('gulp-rename'), 
    del          = require('del'), 
    imagemin     = require('gulp-imagemin'), 
    pngquant     = require('imagemin-pngquant'), 
    autoprefixer = require('gulp-autoprefixer'),
    debug        = require('gulp-debug');   
    uncss	     = require('gulp-uncss'),
    concat       = require('gulp-concat');				
    cache        = require('gulp-cache'), 

    gulp.task('sass', function () {
        return gulp.src('app/sass/**/*.sass')
            .pipe(sass())
            .pipe(autoprefixer(['last 15 versions', '> 10%']))
            .pipe(gulp.dest('app/css'));				
      });

    gulp.task ('css', ['sass'], function() {
        return gulp.src('app/css/main.css')
        .pipe(cssnano())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({
            stream: true
        }))
    });

    gulp.task('uncss', function() {
        return gulp.src('app/css/*.min.css')
        .pipe(uncss({
            html: ['app/*.html']
        }))
        .pipe(gulp.dest('app/css'));
})

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

    gulp.task('jsLibs', function() {
        return gulp.src('app/js/libs.js')			
        .pipe(uglify())								
        .pipe(rename({
            suffix: '.min'							
        }))
        .pipe(gulp.dest('app/js'))					
        .pipe(browserSync.reload({
            stream: true							
        }));
    });

    gulp.task('scripts', function () {
        return gulp.src('app/js/common.js')   		
        .pipe(uglify())								
        .pipe(rename({
            suffix: '.min'							
        }))
        .pipe(sourcemaps.write())					
        .pipe(gulp.dest('app/js'))					
        .pipe(browserSync.reload({
            stream: true							
        }));
    });

    gulp.task('browser-sync', function() {
        browserSync({ 
            server: { 
                baseDir: 'app' 
            },
            notify: false 
        });
    });
    

    gulp.task('scripts', function() {
        return gulp.src([ 
             // js
            ])
            .pipe(concat('libs.min.js')) 
            .pipe(uglify()) 
            .pipe(gulp.dest('app/js')); 
    });

    gulp.task('img', function() {
        return gulp.src('app/img/**/*') 
            .pipe(cache(imagemin({  
                interlaced: true,
                progressive: true,
                svgoPlugins: [{removeViewBox: false}],
                use: [pngquant()]
            })))
            .pipe(gulp.dest('dist/img')); 
    });
    
    gulp.task('default', ['css', 'pug', 'jsLibs', 'scripts', 'browser-sync'], function() {
        gulp.watch('app/sass/**/*.sass', ['css']);
        gulp.watch('app/pug/**/*.pug', ['pug']);
        gulp.watch('app/js//**/*.js', ['scripts']);
        gulp.watch('app/js/libs.js', ['jsLibs']);
    });

Как сделать, чтобы pug при компиляции не создавал новый файл, а записывал в файл который был и который отслеживает browserSync. Pug создает новый файл, а browserSync не видит этот файл. prntscr.com/ganqw0

Answer 1

[Evgen Ozheh]

Вот как я у себя настраивал:

var browserSync = require('browser-sync').create();
var nodemon = require('gulp-nodemon');


gulp.task('browserSync', ['nodemon'], function() {
  browserSync.init({
    proxy: "http://localhost:3000",
  })
})



gulp.task('nodemon', function (cb) {
  var callbackCalled = false;
  return nodemon({script: './app.js'}).on('start', function () {
    if (!callbackCalled) {
      callbackCalled = true;
      cb();
    }
  });
});


gulp.task('watch', ['browserSync', 'sass', 'minify-css', 'minify-js'], function() {
  gulp.watch('scss/*.scss', ['sass']);
  gulp.watch('./public/css/*.css', ['minify-css']);
  gulp.watch('./public/js/*.js', ['minify-js']);
  gulp.watch('./views/*.pug', browserSync.reload);
});