I
I
Ilya Belsky2016-04-14 15:40:28
gulp.js
Ilya Belsky, 2016-04-14 15:40:28

Check for changes in included files?

Good day! I had a problem, and since I could not solve it myself, I decided to turn to the IT community. The problem is the following. I have a project that has the main html files in it, and repeating files like a footer or a sitebar, which I put in a separate folder and just include them using gulp-include. There are no problems with the main files. I make changes, gulp picks up and refreshes the page. However, the catch is that when I change duplicate files, nothing happens of course. Those. gulp doesn't pick up and refresh the page. And even if you update - nothing will happen. The thing is that there is a check so that if the file is not changed, do not overwrite it again. Not a plugin but something else. And since there were no changes in the files. (the line with which the file is included has not changed), then the files do not get into the stream. In order for gulp to pick up the changes in these files, I need to go to any file that falls under the check for changes, save it, and only then those changes that I made will be displayed. But it's not very good, to be honest. It is necessary to do something so that gulp checks not only direct files for changes, but also those that are included in the main, relatively speaking file. The problem is not common enough, but for me it is very sore.
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'))
);

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander, 2016-04-14
@verstka

The compiler doesn't care if the files are included or not. You just didn't write watch for the includes. Try like this:
gulp.watch('YOUR_DIR/**/*.html', ['YOUR_TASK']);

D
denis2601, 2018-08-19
@denis2601

Tell me, how did you solve this issue?
Thank you!

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question