0
I’m trying to solve a problem that so far I haven’t found a good solution.
In my front-end project with Gulpjs, I am using the package Gulp-file-include to include HTML blocks and generate another HTML with all the blocks included, so far so good.
But I’m trying to create a directory for each HTML generated, as if they were a Widget, where will have HTML, CSS and JS, related to this Widget. However, I couldn’t find a good way or Gulpjs package to generate this directory inside the parent directory, passed in the function Gulp.dist.
One way I did was to iterate two arrays objects with the name of the files and directories that are created, but this is a very optimized way, because it will always recreate the files that are already created.
Someone indicates another way I can do it or know about a Gulp package?
Code of gulpfile.js complete: https://gist.github.com/cjambrosi/cfe32bd79e9bc454dab22ead427a0639
Part of the file code gulpfile.js:
const gulp = require("gulp");
const less = require("gulp-less");
const concat = require("gulp-concat");
const rename = require("gulp-rename");
const notify = require("gulp-notify");
const nodemon = require("gulp-nodemon");
const autoprefixer = require("gulp-autoprefixer");
const fileInclude = require("gulp-file-include");
const browserSync = require("browser-sync").create();
const es = require("event-stream");
const path = {
build: {
css: "./build/css/",
js: "./build/js/",
html: "./build/pages/",
directories: ["diretori-1", "diretori-2", "diretori-3"],
nameFale: ["register-1", "register-2", "register-3"],
}
}
const includeHTML = async function () {
return es.merge(
path.build.directories.map((name, index) => {
return gulp
.src([
`./dev/pages/${path.build.nameFale[index]}.html`,
"!header.html", // ignore example
])
.pipe(
fileInclude({
prefix: "@@",
basepath: "@file",
})
)
.pipe(gulp.dest(`./build/${name}/`))
.pipe(browserSync.stream());
})
);
};
Part of the folder structure: