In Gulpjs, how to generate folders separated by file by "Gulp.dest()"? As if it were a widget?

Asked

Viewed 23 times

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:

inserir a descrição da imagem aqui

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.