У меня есть такая структура каталогов:
/build
/src
/html
/pages
index.html
about.html
...
/partials
_footer.html
_header.html
/stylus
/js
/fonts
/img
Ну, стандартная структура каталогов, я наблюдаю за изменениями в моей папке ./src и запускаю конкретные задачи для html, css, js и т. Д. Ну, вопрос - когда я вносил измененияв мой . / src / html / partials файл - мне нужно перестроить все мои . / src / html / pages файлы, но когда я изменяю один из . / src/ html / pages , скажем, index.html , мне нужно перестроить только этот один файл.В настоящее время мой код просто выполняет задачу build: html для любого изменения в . / Src / html , и он перестраивает все из . / Src / html / pages Возможно ли получить такое поведение (используйте другой глобус для моей сборки: html, в зависимости от измененных файлов)? Спасибо.Вот мой текущий gulpfile.js
var gulp = require('gulp');
// Utils
var del = require('del');
var rigger = require('gulp-rigger');
var yargs = require('yargs');
const spritesmith = require('gulp.spritesmith');
const merge = require('merge-stream');
// Server
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
// CSS(minification - cssnano)
var stylus = require('gulp-stylus');
var nib = require('nib');
var sourcemaps = require('gulp-sourcemaps');
var postcss = require('gulp-postcss');
// Error handling and notifications
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
// Save to memory
var GulpMem = require('gulp-mem');
var gulpMem = new GulpMem();
// Main files to compile
const src = {
html: './src/html/pages/*.html',
css: './src/styl/[^_]*.styl',
js: './src/js/main.js',
};
// What files to watch(src folder, by subfolders)
const watch = {
html: './src/html/**/*.html',
css: './src/styl/**/*.*',
js: './src/js/**/*.*',
};
// Says for itself
const dest = {
html: './dest',
css: './dest/css',
js: './dest/js',
};
// Plugin's and custom settings
gulpMem.serveBasePath = './dest';
gulpMem.enableLog = false;
var argv = yargs.default({
toMemory: true
}).argv;
// Build tasks
gulp.task('build:html', function() {
return gulp.src(src.html)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(rigger())
.pipe(argv.toMemory ? gulpMem.dest(dest.html) : gulp.dest(dest.html))
.pipe(reload({stream:true}));
});
gulp.task('build:css', function() {
var plugins = [
require('postcss-import')(),
require('autoprefixer')({
browsers: ['> 0%']
})
];
return gulp.src(src.css)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(sourcemaps.init())
.pipe(stylus({
use: nib()
}))
.pipe(postcss(plugins))
.pipe(sourcemaps.write('.'))
.pipe(argv.toMemory ? gulpMem.dest(dest.css) : gulp.dest(dest.css))
.pipe(reload({stream:true}));
});
gulp.task('build:js', function() {
return gulp.src(src.js)
.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
.pipe(rigger())
.pipe(argv.toMemory ? gulpMem.dest(dest.js) : gulp.dest(dest.js))
.pipe(reload({stream:true}));
});
// General build
gulp.task('build', gulp.parallel(
'build:html',
'build:css',
'build:js',
));
// Static Server + watching html files
gulp.task('serve', function(done) {
browserSync.init({
server: dest.html,
middleware: gulpMem.middleware
});
done();
});
gulp.task('watch', function(done) {
gulp.watch(watch.html, gulp.series('build:html'));
gulp.watch(watch.css, gulp.series('build:css'));
gulp.watch(watch.js, gulp.series('build:js'));
done();
});
gulp.task('default', gulp.series(
'build',
gulp.parallel(
'serve',
'watch'
)
));
gulp.task('clean', function(done) {
del('dest');
done();
});