Appearance
ビルド環境
@d-zero/builder
を通してPugからHTMLへの変換を行います。
製品ソースコードの納品要件によっては、改行コードや文字コードの変換が必要なケースがあります。その場合はeleventy.config.mjs
に変換オプションを追加してください。
js
import path from 'node:path';
import eleventy from '@d-zero/builder/11ty';
export default function (eleventyConfig) {
return eleventy(eleventyConfig, {
alias: {
'@': path.resolve(import.meta.dirname, '__assets', '_libs'),
},
outputCssDir: 'css',
outputJsDir: 'js',
outputImgDir: 'img',
imageSizes: { selector: '*' },
prettier: false,
minifier: { minifyJS: false },
lineBreak: '\n', // or '\r\n'
charset: 'utf8', // or 'shift_jis',
pathFormat: 'preserve', // or 'file' or 'directory'
autoDecode: false, // or true
ssi: {
'**/*': {
encoding: 'utf8', // or 'shift_jis',
},
},
});
}
変換オプション
@d-zero/builder/11ty
からインポートしたコンフィギュレーション関数eleventy()
の第二引数にオプションを渡します。
alias
パスのエイリアスを設定します。
Pugでは@
に指定したパスがルートとして解釈されます。次のパスは同じ場所を参照します。
ファイル | ベースディレクトリへの参照 |
---|---|
Pug | include /same-dir/a.pug |
SASS | @import '@/same-dir/a.scss' |
TypeScript | import {} from '@/same-dir/a.js' |
imageSizes
画像のwidth
/height
属性を自動付与します。selector
オプションにCSSセレクタを指定することで、対象範囲を限定することができます。
prettier
Prettierによる整形を行います。デフォルトはtrue
です。
minifier
HTMLMinifierによって最適化を行います。必要であれば設定を上書きしてください。
lineBreak
改行コードを変換します。CRLF(\r\n
)やLF(\n
)を指定してください。デフォルトはLF(\n
)です。
charset
HTMLを出力する際に文字コードを変換します。文字コードはUTF-8(utf8
)とShift-JIS(shift_jis
)のみ対応しています。デフォルトはUTF-8(utf8
)です。
overrides
オプションで特定のファイルに限定することが可能です。
js
eleventy(eleventyConfig, {
charset: {
encoding: 'utf8', // グローバル設定
overrides: {
paths: ['legacy/pages/**/*'],
encoding: 'shift_jis', // 特定のページへの設定
},
},
});
pathFormat
出力ファイルの形式を変更します。デフォルトはpreserve
です。
値 | 説明 |
---|---|
file | 各ページに対応するHTMLファイルを生成 |
directory | ディレクトリを生成しページに対応するindex.html ファイルをネスト |
preserve | ソースフォルダに表示される通りにHTMLファイルを生成 |
この設定はAstroのbuild.format
を参考にしています。
開発用ローカルサーバーのオプション
autoDecode
自動デコードを有効にします。開発用ローカルサーバーはUTF-8しか対応していないため、Shift-JISのファイルを開いた場合に自動でUTF-8に変換します。
ssi
開発用ローカルサーバーでSSI(Server Side Includes)を再現する設定です。簡易的なものになるので#include
ディレクティブのみに対応しています。文字コードを自動で判定できないのでUTF-8以外に変更する必要がある場合は、対象ファイルのパターンに対してencoding
を指定します。