I'm using the gulp-file-include package to make development locally a little bit easier.
I currently have three HTML pages:
index.htmlcontact.htmlproducts.htmlThe way my setup works is:
.html components in my components foldertemplate foldergulp watch compiles that template file into HTML and creates / updates the file in the root directoryFolder structure for reference:
theme
template
index.html
contact.html
product.html
index.html
contact.html
product.htmlIn short, everything in the template folder contains templating language.
Now, in my gulp I've have to create three different functions to compile the pages when a change for each page is registered.
function compileIndex() {
return gulp.src('./template/index.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
}
function compileContact() {
return gulp.src('./template/contact.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
}
function compileProducts() {
return gulp.src('./template/product.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./'));
}
function watch() {
gulp.watch([globalCSS,configCSS,themeCSS, componentCSS],mainCSS);
gulp.watch([globalJS],mainJS);
gulp.watch([componentJS]);
gulp.watch('./template/index.html', compileIndex);
gulp.watch('./template/contact.html', compileContact);
gulp.watch('./template/product.html', compileProducts);
}You can tell it'll get really lengthy and hard to manage once more pages are added. As such, is there a way to morph all of these functions into one?
I have tried simply copying the returns into one function, but get a watch task has to be a function error.