PostCSS/setup.js
表示
< PostCSS
必要なプラグインのリストを入力として、PostCSS の手順を自動生成するスクリプトは実用的です。 Node.js を使ったシンプルなスクリプトとして以下のコードを提案します。
- setup.js
const fs = require('fs'); const path = require('path'); // 必要なプラグインリストを入力 const plugins = [ "postcss-import", "postcss-simple-vars", "autoprefixer", "cssnano" ]; // ctx.env による設定のデフォルト値 const envConfigs = { development: { map: { inline: false }, plugins: { "cssnano": false, }, }, production: { map: false, plugins: { "cssnano": { preset: "default" }, }, }, }; // .postcssrc.js ファイル生成 const generatePostCSSConfig = (plugins, envConfigs) => { const pluginConfig = plugins.reduce((acc, plugin) => { acc[plugin] = plugin === "cssnano" ? envConfigs.production.plugins[plugin] : {}; return acc; }, {}); const content = `module.exports = (ctx) => ({ parser: false, stringfier: false, map: ctx.env === 'development' ? ${JSON.stringify(envConfigs.development.map)} : ${JSON.stringify(envConfigs.production.map)}, plugins: ${JSON.stringify(pluginConfig, null, 2)}, });`; fs.writeFileSync('.postcssrc.js', content, 'utf8'); console.log('.postcssrc.js has been generated!'); }; // npm インストールコマンド生成 const generateNPMInstallCommand = (plugins) => { const command = <code>npm i -D ${plugins.join(' ')}</code>; console.log("Run the following command to install plugins:"); console.log(command); }; // Makefile の生成 const generateMakefile = () => { const makefileContent = `build: \tnpx postcss --env production src/css/main.css -o css/main.css`; fs.writeFileSync('Makefile', makefileContent, 'utf8'); console.log('Makefile has been generated!'); }; // ディレクトリ構成の生成 const generateDirectoryStructure = () => { const dirs = [ 'src/css', 'css', 'node_modules', ]; dirs.forEach((dir) => { fs.mkdirSync(dir, { recursive: true }); }); fs.writeFileSync(path.join('src/css', 'main.css'), '', 'utf8'); console.log('Directory structure has been created!'); }; // 実行 generatePostCSSConfig(plugins, envConfigs); generateNPMInstallCommand(plugins); generateMakefile(); generateDirectoryStructure();
このスクリプトは以下のように動作します:
- プラグインリストの設定: 必要な PostCSS プラグインを配列で指定。
.postcssrc.js
の生成:ctx.env
に基づいてdevelopment
とproduction
の動作を設定。- npm インストールコマンドの生成: 指定したプラグインを
npm i -D
コマンドでインストール。 - Makefile の生成: PostCSS コマンドを実行するためのシンプルな Makefile を作成。
- ディレクトリ構成のセットアップ: 必要なディレクトリ(例:
src/css
)と空のmain.css
を作成。
実行方法
[編集]- 上記のスクリプトを
setup.js
などの名前で保存。 - Node.js がインストールされている環境で以下を実行:
node setup.js
- 必要なファイル・フォルダが生成され、次に実行すべきコマンド(npm インストール)が出力されます。
このスクリプトを改良して柔軟性を高めたり、プラグインごとに独自の設定を追加することも可能です!