Answer the question
In order to leave comments, you need to log in
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)
'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
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 questionAsk a Question
731 491 924 answers to any question