Wsrtjtyk

I am using Gulp 4 with some plugins (gulp-concat, gulp-imagemin, gulp-inject, and browsersync) and running a workflow like this:

const 

    gulp = require('gulp'),

    imagemin = require('gulp-imagemin'),

    inject = require('gulp-inject'),

    uglifyjs = require('gulp-uglify'),

    concat = require('gulp-concat'),

    browsersync = require('browser-sync')

    del = require('del');



var from = {

    src: 'src/**/*',

    html: 'src/**/*.html',

    css: 'src/**/*.css',

    js: 'src/**/*.js',

    font: 'src/assets/fonts/**/*',

    img: 'src/**/*.{jpg,png,svg,gif}',

    meta: 'src/**/*.{webmanifest,xml}'

};



var to = {

    dist: 'dist',

    html: 'dist/**/*.html',

    css: 'dist/assets/css/',

    js: 'dist/assets/js/',

    font: 'dist/assets/fonts/',

    img: 'dist/**/*.{jpg,png,svg,gif}',

    meta: 'dist/**/*.{webmanifest,xml}'

};



function deldist () {

    return del(to.dist)

};



// concat -> hoya.css

function styles () {

    return gulp.src([

        'src/**/!(main)*.css',

        'src/**/main.css'

    ])

        .pipe(concat('hoya.css'))

        .pipe(gulp.dest(to.css))

};



// concat -> hoya.js

function scripts () {

    return gulp.src([

        'src/**/!(app)*.js',

        'src/**/app.js'

    ])

        .pipe(concat('hoya.js'))

        .pipe(gulp.dest(to.js))

};



// imagemin -> copy

function images () {

    return gulp.src(from.img)

        .pipe(imagemin([

            imagemin.jpegtran({

                progressive: true

            })

        ]))

        .pipe(gulp.dest(to.dist))

};



function markup () {

    return gulp.src(from.html).pipe(gulp.dest(to.dist))

};



function misc (done) {

    gulp.src(from.meta).pipe(gulp.dest(to.dist));

    gulp.src(from.font).pipe(gulp.dest(to.font));

done();

}



// inject css, cs, partial html -> copy

function inj () {

    var css = gulp.src(to.css + '*.css', {read: false});

    var js = gulp.src(to.js + '*.js', {read: false});

    gulp.src([to.html, '!dist/assets/html/*.html'])

        .pipe(inject(css, {relative: true}))

        .pipe(inject(js, {relative: true}))

        .pipe(inject(gulp.src('dist/assets/html/*.html'), {

            starttag: '<!-- inject:{{path}} -->',

            relative: true,

            transform: function (filePath, file) {

            return file.contents.toString('utf8')

        }}))

        .pipe(gulp.dest(to.dist))

};



function server (done) {

    browsersync({

        server: {

          baseDir: './dist'

        }

    });

    done()

};



function watcher (done) {

    gulp.watch(from.js, gulp.series(scripts));

    gulp.watch(from.css, gulp.series(styles));

    gulp.watch(from.img, gulp.series(images));

    gulp.watch(from.html, gulp.series(markup));

    gulp.watch(from.meta, gulp.series(misc));

    gulp.watch(from.src, gulp.series(inj));

done()

}



// delete dist -> copy assets -> inject

exports.build = gulp.series(

    deldist, 

    gulp.parallel(

        images, styles, scripts, markup, misc), 

    inj

);



// delete dist -> copy assets -> inject -> server

exports.default = gulp.series(

    deldist, 

    gulp.parallel(

        images, styles, scripts, markup, misc), 

    inj,

    gulp.parallel(server, watcher)    

);

-

[03:38:38] └─┬ default

[03:38:38]   └─┬ <series>

[03:38:38]     ├── deldist

[03:38:38]     ├─┬ <parallel>

[03:38:38]     │ ├── images

[03:38:38]     │ ├── styles

[03:38:38]     │ ├── scripts

[03:38:38]     │ ├── markup

[03:38:38]     │ └── misc

[03:38:38]     ├── inj

[03:38:38]     └─┬ <parallel>

[03:38:38]       ├── server

[03:38:38]       └── watcher

-

1. 
   deldist() - delete previous /dist directory


2. 
   styles() - concatenate all CSSs to a single hoya.css + copy to /dist


3. 
   scripts() - concatenate all JSs to a single hoya.js + copy to /dist


4. 
   images() - optimize all images + copy to /dist


5. 
   markup(), misc() - Copy all HTMLs, xml, webmanifest, and font files to /dist



6. inj() - inject CSS, JS, and partial HTMLs inside /dist/assets/html/ to parent HTMLs




7. server() - initiate server via browsersync



8. 
   watcher() Watching any assets (HTML, CSS, JS, Images) changes in /src/ and copy changed files to /dist

-

Problems:

During step 1 - 7 everything was running smoothly, until the watcher() function is not working properly without any error. If I change any files in /src, the inj() and server() respond, but the changed files not copied to /dist.

I tried to change the from.src to to.dist in function watcher() and produces endless loop with gulp-inject. Any ideas what might wrong? Thanks!

-

function watcher (done) {

    gulp.watch(from.js, gulp.series(scripts));

    gulp.watch(from.css, gulp.series(styles));

    gulp.watch(from.img, gulp.series(images));

    gulp.watch(from.html, gulp.series(markup));

    gulp.watch(from.meta, gulp.series(misc));

    gulp.watch(to.dist, gulp.series(inj));

done()

}