Попытка придумать способ прочитать все файлы в каталоге, заново создать и записать файлы программно - PullRequest
Новая
       12

Попытка придумать способ прочитать все файлы в каталоге, заново создать и записать файлы программно

2 голосов
/ 30 мая 2019

Я пытаюсь использовать узел, встроенный в файловую структуру модуль / пакет, при попытке чтения и записи файлов. Я ищу способ, как я могу читать все файлы в определенном каталоге, заново создавать файлы и записывать любые изменения.

Обычно, если у меня есть файл с именем templates/_template-1.html, он воссоздает его в другой каталог с именем pages/template-1.html. Вместо того, чтобы объявлять каждый файл вручную в gulpfile.js. Код ниже в настоящее время находится в стадии разработки.

Он в основном печатает tpl записанных файлов, а затем переписывает их в базовый html. 

/*------------------ INDEX -------------------*/
/* Build index file for the final HTML form
 */
gulp.task("build:index", function() {
    let templateFiles = glob.sync("templates/**/*.tpl"),
        templates = {},

        RESPONSIVE_HTML = fs.readFileSync("_responsive.html", "utf8"),
        THE_HTML = fs.readFileSync("_design-system.html", "utf8"),
        THE_VISUAL_LIBRARY = fs.readFileSync("_visual-library.html", "utf8");

    // Discover all templates
    for (let file in templateFiles) {
        file = templateFiles[file];

        let template = /templates\/(.+?)\.tpl/gi.exec(file)[1],
            text = fs.readFileSync(file, "utf8");

        template = path.basename(file, '.tpl');
        templates[template] = text;
    }

    // --------------------------------------------------------
    // Visible templates:
    _.each(templates, (partial, name) => {
        interpolateTemplate(partial, name, templates);
    });

    // replace the main HTML file
    for (let template in templates) {
        RESPONSIVE_HTML = RESPONSIVE_HTML.replace(new RegExp(`{[@$]${template}}`, "g"), templates[template]);
        THE_HTML = THE_HTML.replace(new RegExp(`{[@$]${template}}`, "g"), templates[template]);
        THE_VISUAL_LIBRARY = THE_VISUAL_LIBRARY.replace(new RegExp(`{[@$]${template}}`, "g"), templates[template]);
    }

    fs.writeFileSync("design-system.html", beautify(THE_HTML), "utf8");
    fs.writeFileSync("responsive.html", beautify(RESPONSIVE_HTML), "utf8");
    fs.writeFileSync("visual-library.html", beautify(THE_VISUAL_LIBRARY), "utf8");
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>BDO Components</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-css.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.7.5/beautify-html.js"></script>
    <script src="assets/js/libs.js" type="text/javascript"></script>

    <link rel="stylesheet" href="assets/css/assets-page.css" />
    <link rel="stylesheet" href="assets/css/component-guide.css" />
</head>

<body>

    <div class="display-panels">
        {$control-bar}

        <div class="preview-pane -hide-code">
            {$globals}
            {$design-references}
            {$component-modifiers}

            <div class="section-block element-group --show-code --components -component" 
                data-name="Typesetting">
                {$typesetting}
            </div>

            <div class="section-block element-group --show-code --components -component" 
                data-name="Elements">
                {$elements}
            </div>

            <div class="section-block element-group --show-code --components -component" 
                data-name="Low Level Components">
                {$low-level-components}
            </div>

            <div class="section-block element-group --show-code --components -component" 
                data-name="High Level Components">
                {$high-level-components}
            </div>

        </div>
        <div class="index-group">
        </div>
    </div>

    <script src="assets/js/app.js" type="text/javascript"></script>
</body>

</html>

Ответы [ 2 ]

4 голосов
/ 05 июня 2019

Вы можете использовать функцию под названием readdir на fs. Он вернет список имен файлов, которые вы можете просмотреть и сделать все, что вам нужно.

В основном, это будет читать все файлы внутри dirname, читать содержимое каждого filename возвращенного, изменять его, записывать обратно.

(я обернул функции fs обещаниями для лучшего потока) 

function readFiles(dirname) {
  let fileNames = [];
  let fileContents = [];
  const results = [];

  return readdir(dirname)
  .then((_fileNames) => {
    fileNames = _fileNames;

    // map filenames to array of readFile promises
    return Promise.all(fileNames.map((filename) => readFile(filename)))
  })
  .then((allFilesContent) => {
    fileContents = allFilesContent;

    // for each file, push an object with name + content to a new array
    fileNames.forEach((fileName, index) => {
      results.push({
        name: fileName, // <-- you can also change the file paths here if needed
        content: beautify(fileContents[index]) // <-- modify the content here as you please
      });
    });
  })
  // map that array to a writeFile promise array
  .then(() => results.map((file) => writeFile(file.name, file.content)))
  .then(() => console.log('all files written successfully'))
  .catch((err) => console.error(err));
}

// FS FUNCTIONS AS PROMISES:

function readFile(filepath) {
  return new Promise((resolve, reject) => {
    fs.readFile(filepath, 'utf-8', function(err, content) {
      if (err) { return reject(err); }

      resolve(content); 
    });
  });
}

function readdir(dirname) {
  return new Promise((resolve, reject) => {
    fs.readdir(dirname, function(err, filenames) {
      if (err) { return reject(err); }

      resolve(filenames);
    });
  });
}

function writeFile(filename, content) {
  return new Promise((resolve, reject) => {
    fs.writeFile(filename, content, function(err) {
      if (err) { return reject(err); }

      resolve();
    });
  });
}
0 голосов
/ 10 июня 2019

У меня есть серия модулей, вокруг которых мы копаем целые каталоги (рекурсивно), а затем занимаемся чем-то вроде создания веб-страницы с результатами.

Вам будет довольно легко добавить то, что вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...