Проблема с бесконечным циклом gulp-inject во время задания gulp.watch (Gulp 4) - PullRequest
0 голосов
/ 15 ноября 2018

Я использую Gulp 4 с некоторыми плагинами (gulp-concat, gulp-imagemin, gulp-inject и browsersync) и запускаю рабочий процесс, подобный этому:

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 () - удалить предыдущий / dist каталог
  2. styles () - объединить все CSSв одну hoya.css + копию в / dist
  3. scripts () - объединить все JS в одну hoya.js + копиюв / dist
  4. images () - оптимизировать все изображения + копировать в / dist
  5. markup (), misc () - копировать все HTML, xml, webmanifest и файлы шрифтов в / dist
  6. inj () - внедрить CSS, JS и частичные HTML-файлы в / dist / assets / html / в родительские HTML-файлы

  7. server () - запустить сервер через browsersync

  8. watcher () Просмотр любых ресурсов (HTML, CSS), JS, Images) изменения в / src / и копирование измененных файлов в / dist

-

Проблемы:

На шаге 1 - 7 все работало без сбоев, пока функция watcher () не работает должным образом без каких-либо ошибок.Если я изменяю какие-либо файлы в / src, inj () и server () отвечают, но измененные файлы не копируются в / dist.

Я попытался изменить с.src на на .dist в функции watcher () и выдает бесконечный цикл с gulp-inject.Есть идеи, что может не так?Спасибо!

-

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()
}
...