Question

我正在将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

-

deldist（）-删除先前的/ dist目录

styles（）-将所有CSS连接到一个 hoya.css +复制到/ dist

scripts（）-将所有JS连接到单个 hoya.js +复制到/ dist

images（）-优化所有图像+复制到/ dist

markup（），misc（）-将所有HTML，xml，webmanifest和字体文件复制到/ dist


inj（）-将/ dist / assets / html /内的CSS，JS和部分HTML注入父HTML



服务器（）-通过浏览器同步启动服务器


watcher（）监视/ src /中的所有资产（HTML，CSS，JS，图像）更改，并将更改的文件复制到/ dist

-

问题：

在第1步至第7步中，所有操作均正常运行，直到watcher（）函数无法正常运行且没有任何错误。如果更改/ src中的任何文件，则inj（）和server（）会响应，但是更改后的文件不会复制到/ dist。

我试图在功能watcher（）中将从.src 更改为 to.dist 并使用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()
}

在gulp.watch任务（gulp 4）期间出现无限的gulp-inject循环问题

问题：

0 个答案: