E
E
Evgeny Vlasov2016-11-30 12:31:53
JavaScript
Evgeny Vlasov, 2016-11-30 12:31:53

Why are all Jade/Pug files compiled?

If I make a change in one file, then all are updated. How can this problem be solved?
Console:

[12:08:02] Starting 'jade'...
[12:08:04] Finished 'jade' after 1.53 s
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers. ..
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] Reloading Browsers...
[BS] 16 files changed (about.html, blog.html, cart.html, catalog-inner.html, catalog .html, contacts.html, favorite.html, index.html, news.html, order.html, prints.html, types.html, layout.html, _footer.html, _head.html, _menu.html)

gulpfile.js:
'use strict';

const PATH = 'airbnb';

let gulp = require('gulp'),
    sass = require('gulp-sass'),
    browserSync = require('browser-sync'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    cssnano = require('gulp-cssnano'),
    rename = require('gulp-rename'),
    del = require('del'),
    imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    cache = require('gulp-cache'),
    autoprefixer = require('gulp-autoprefixer'),
    pug = require('gulp-pug'),
    spritesmith = require('gulp.spritesmith'),
    pump = require('pump');

gulp.task('pug', function() {
  gulp.src(PATH + '/pug/**/*.pug')
  .pipe(pug({
    pretty: true
  })
  .on('error', function(err) {
    console.log(err);
  }))
  .pipe(gulp.dest(PATH + '/'))
  .pipe(browserSync.reload({stream: true}))
});

gulp.task('sass', function(){
  return gulp.src(PATH + '/sass/**/*.sass')
  .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
  .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 9'], { cascade: true }))
  .pipe(gulp.dest(PATH + '/css'))
  .pipe(browserSync.reload({stream: true}))
});

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

gulp.task('sprite', function () {
  var spriteData = gulp.src(PATH + '/img/sprites/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: '_icons.sass',
    cssFormat: 'sass',
    algorithm: 'left-right',
    imgPath: '../img/sprite.png'
  }));
  spriteData.img.pipe(gulp.dest(PATH + '/img/'));
  spriteData.css.pipe(gulp.dest(PATH + '/sass/'))
});

gulp.task('scripts', function (cb) {
  pump([
    gulp.src(PATH + '/libs/*.js'),
    uglify(),
    gulp.dest(PATH + 'dist')
  ], cb);
});

gulp.task('css-libs', ['sass'], function() {
  return gulp.src(PATH + '/css/libs.css')
  .pipe(cssnano())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(PATH + '/css'));
});

gulp.task('watch', ['browser-sync', 'css-libs', 'scripts'], function() {
  gulp.watch(PATH + '/sass/**/*.sass', ['sass']);
  gulp.watch(PATH + '/pug/**/*.pug', ['pug']);
  gulp.watch(PATH + '/*.html', browserSync.reload);
  gulp.watch(PATH + '/js/**/*.js', browserSync.reload);
});

gulp.task('clean', function() {
  return del.sync('dist-' + PATH);
});

gulp.task('img', function() {
  return gulp.src(PATH + '/img/**/*')
  .pipe(cache(imagemin({
    interlaced: true,
    progressive: true,
    svgoPlugins: [{removeViewBox: false}],
    use: [pngquant()]
  })))
  .pipe(gulp.dest('dist-' + PATH + '/img'));
});

gulp.task('build', ['clean', 'img', 'sass', 'scripts'], function() {
  var buildCss = gulp.src([
    PATH + '/css/main.css',
    PATH + '/css/libs.min.css'
  ])
  .pipe(gulp.dest('dist-' + PATH+ '/css'))
  var buildFonts = gulp.src(PATH + '/fonts/**/*')
      .pipe(gulp.dest('dist-' + PATH + '/fonts'))

  var buildJs = gulp.src(PATH + '/js/**/*')
      .pipe(gulp.dest('dist-' + PATH + '/js'))
  var buildHtml = gulp.src(PATH + '/*.html')
      .pipe(gulp.dest('dist-' + PATH + ''));
});

gulp.task('clear', function () {
  return cache.clearAll();
})

gulp.task('default', ['pug', 'watch']);

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergei Nazarenko, 2016-11-30
@nazares

gulp.watch('smth').on('change', function(event) { //event.path })
https://github.com/gulpjs/gulp/blob/master/docs/API.md
https: //www.npmjs.com/package/gulp-watch

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question