Доброго времени суток! У меня возникла проблема, и так как сам решить я ее не смог - решил обратиться к IT сообществу. Проблема следующая. У меня есть проект, в нем основные html файлы, и повторяющиеся файлы типа футера или сайтбара, которые я вынес в отдельную папку и просто инклюжу их с помощью gulp-include. С основными файлами проблем нет. Я вношу изменения, gulp подхватывает и обновляет страницу. Однако загвоздка в том что когда я изменяю повторяющиеся файлы - само собой ничего не происходит. Т.е. gulp не подхватывает и не обновляет страницу. А даже если и обновить - ничего не произойдет. Все дело в том что там стоит проверка, чтобы если файл не изменен, не перезаписывать его заново. Не плагин а кое что другое. И так как изменений в файлах не произошло. (строка с помощью которой инклюдится файл не изменилась), то и файлы не попадают в поток. Чтобы gulp подхватил изменения в этих файлах мне нужно идти в любой файл который подпадает под проверку на изменения, сохранять его и только тогда те изменения которые я сделал - отобразятся. Но это как-то не очень если честно. Нужно как то сделать чтобы gulp проверял не только прямые файлы на изменения, но и те которые подключены в главном, условно говоря файле. Проблема достаточно не обычная, но для меня очень наболевшая.
gulpfile:
'use strict';
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
del = require('del'),
browserSync = require('browser-sync').create(),
nameProject = '....',
plugins = gulpLoadPlugins(),
reload = browserSync.reload;
//=======================================================
// Path config
//=======================================================
var path = {
dist: {
html: './dist',
js: './dist/js',
css: './dist/css',
img: './dist/images',
fonts: './dist/fonts',
vendor: './dist/vendor/'
},
src: {
html: './src/*.html',
js: './src/js/*.js',
style:'./src/scss/main.scss',
img: './src/images/**',
fonts: ['./bower_components/font-awesome/fonts/*',
'./src/fonts/*'],
vendor: './src/vendor/*'
},
watch: {
style: './src/scss/*.scss',
js: './src/js/*.js',
html: './src/**/*.html',
img: './src/images/*',
vendor: './src/vendor/*'
}
};
//=======================================================
// Serve
//=======================================================
gulp.task('server', function() {
return browserSync.init({
server: { baseDir: './dist' },
logPrefix: nameProject,
port: 8080,
notify: false,
logFileChanges: false
});
});
//=======================================================
// Vendor
//=======================================================
gulp.task('vendor', function () {
return gulp.src(path.src.vendor)
.pipe(gulp.dest(path.dist.vendor))
});
//=======================================================
// HTML
//=======================================================
gulp.task('html', function () {
return gulp.src(path.src.html)
.pipe(plugins.include())
.pipe(plugins.removeHtmlComments())
.pipe(plugins.replace(/^\s*\n/mg, ''))
.pipe(gulp.dest(path.dist.html))
.pipe(reload({stream: true}));
});
//=======================================================
// JavaScript
//=======================================================
gulp.task('js', function() {
return gulp.src(path.src.js, {since: gulp.lastRun('js')})
.pipe(plugins.plumber())
// .pipe(plugins.uglify())
// .pipe(plugins.rename({suffix: '.min'}))
.pipe(gulp.dest(path.dist.js))
.pipe(reload({stream: true}));
});
//=======================================================
// Style
//=======================================================
gulp.task('style', function () {
return gulp.src(path.src.style)
.pipe(plugins.newer(path.dist.css))
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass.sync().on('error', plugins.sass.logError))
// .pipe(plugins.csso())
// .pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest(path.dist.css))
.pipe(reload({stream: true}));
});
//=======================================================
// Fonts
//=======================================================
gulp.task('fonts', function () {
return gulp.src(path.src.fonts)
.pipe(gulp.dest(path.dist.fonts))
});
//=======================================================
// Images
//=======================================================
gulp.task('img', function () {
return gulp.src(path.src.img, {since: gulp.lastRun('img')})
.pipe(gulp.dest(path.dist.img));
});
//=======================================================
// Clean dist folder
//=======================================================
gulp.task('clean', function () {
return del('./dist', {read: false})
});
//=======================================================
// Watch
//=======================================================
gulp.task('watch', function () {
gulp.watch(path.watch.style, gulp.series('style'));
gulp.watch(path.watch.js, gulp.series('js'));
gulp.watch(path.watch.html, gulp.series('html'));
gulp.watch(path.watch.img, gulp.series('img'));
gulp.watch(path.watch.vendor, gulp.series('vendor'));
});
//=======================================================
// Default task
//=======================================================
gulp.task('default',
gulp.series('clean', 'html', 'style', 'js', 'vendor', 'fonts', 'img',
gulp.parallel ('server', 'watch'))
);
