Я использую 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 () - внедрить CSS, JS и частичные HTML-файлы в / dist / assets / html / в родительские HTML-файлы
server () - запустить сервер через browsersync
- 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()
}