Zenn
Open3

11ty(v1.0.0)のビルド実行時前（開発ビルド時も）にoutput（dist） ディレクトリをクリーンアップできるように

11ty
ピン留めされたアイテム
warugakiwarugaki

11ty内のビルド（開発ビルド）は、outputクリーンアップしてくれない・・
なので、outputディレクトリに不要なファイルが貯まっていくのがいやなので

ビルド実行時前にoutput ディレクトリをクリーンアップできるようにする

warugakiwarugaki

11tyの構成ファイルにイベントを追加

公式｜イベント
https://www.11ty.dev/docs/events/#eleventy.beforewatch

.eleventy.jsに以下の記述を追加する

const fse = require('fs-extra') 

  eleventyConfig.on('eleventy.before', async () => {
    // Run me before the build starts
    await fse.remove('./dist')
      .then(() => {
        console.log('success! clean output directory')
      })
      .catch(err => {
        console.error(err)
      })
  });

※ output = ./dist

例

.eleventy.js
const fse = require('fs-extra')

// https://www.11ty.dev/docs/config/
module.exports = function (eleventyConfig) {

  eleventyConfig.on('eleventy.before', async () => {
    // Run me before the build starts
    await fse.remove('./dist')
      .then(() => {
        console.log('success! clean output directory')
      })
      .catch(err => {
        console.error(err)
      })
  });
  return {
    htmlTemplateEngine: 'njk',
    templateFormats: ['njk', 'html'],
    dir: {
      input: "src",
      output: "dist",
      includes: "_includes",
      layouts: "_layouts",
      data: "_data"
    },
  };
};