Windows、Visual Studio Code、Yarn、npm-scripts、Pug、PostCSS、Babel、webpack で静的サイトの制作環境を構築した際のメモ。(package.json ファイルの生成~ npm-run-all のインストール)
長くなったので、(1) コンパイラのインストール~ .gitignore ファイルの生成、(2) package.json ファイルの生成~ npm-run-all のインストール、(3) 構文ハイライトのインストール~ファイル保存時に自動整形、の3つに分けました。
Prettier の prettier.eslintIntegration
と prettier.stylelintIntegration
が非推奨になったため、(3) (改) 構文ハイライトのインストール~ファイル保存時に自動整形を投稿しました。
目次
package.json ファイルの生成
npm プロジェクトの情報が格納される package.json ファイルを生成します。
yarn init --yes
Pug のインストール
Pug をインストール
HTML のコーディングには Pug を使いたいので、pug – npm をインストールします。
yarn add pug --dev
pug-cli をインストール
pug-cli で _ がついたファイル(_header.pug)やディレクトリ(_include)もコンパイルされてしまう問題を解決する – Qiita を参考に、pug-cli – npm はインストールせずに、GitHub – pugjs/pug-cli: Pug’s CLI interface をインストールします。
yarn add github:pugjs/pug-cli#master --dev
Pug のコマンド・エイリアスを定義
package.json の scripts
に compile-pug
というコマンド・エイリアスを設定します。
{
"scripts": {
"compile-pug": "pug --out dist --basedir src/pug --pretty src/pug" }
}
コマンド・オプションは --out dist
で出力フォルダを指定、--basedir src/pug
で階層の基準フォルダを指定、--pretty
で出力コードを整形、src/pug
で入力フォルダを指定しました。
PostCSS のインストール
PostCSS をインストール
CSS のコーディングには Sass を使うのが一般的かと思いますが、Sass に拘りがある訳ではないので、お目当ての Autoprefixer に必要な PostCSS だけで済ませることにし、postcss – npm をインストールします。
yarn add postcss --dev
PostCSS CLI をインストール
postcss-cli – npm をインストールします。
yarn add postcss-cli --dev
postcss-import をインストール
別ファイルの読み込みに postcss-import – npm をインストールします。
yarn add postcss-import --dev
PostCSS Custom Properties をインストール
変数の定義に postcss-custom-properties – npm をインストールします。
yarn add postcss-custom-properties --dev
PostCSS Nesting をインストール
入れ子記法に postcss-nesting – npm をインストールします。
yarn add postcss-nesting --dev
Autoprefixer をインストール
ベンダープリフィックスの自動付与に autoprefixer – npm をインストールします。
yarn add autoprefixer --dev
postcss-csso をインストール
CSS の圧縮は css-minification-benchmark results を参考に CSSO に決め、postcss-csso – npm をインストールします。
yarn add postcss-csso --dev
PostCSS の設定ファイルを作成
プロジェクト・ルートに postcss.config.js ファイルを作成します。
module.exports = {
map: {
inline: false,
},
plugins: {
'postcss-import': {},
'postcss-custom-properties': {},
'postcss-nesting': {},
autoprefixer: {
cascade: false,
grid: true,
},
'postcss-csso': {},
},
};
map: { inline: false }
でソース・マップを埋め込みから外部ファイルへ変更、plugins: { }
にプラグインを適用する順に記述、autoprefixer: { cascade: false, grid: true }
で出力コードの整形を抑止、CSS GridのIE 11対応を設定しました。
対象ブラウザの設定ファイルを作成
プロジェクト・ルートに .browserslistrc ファイルを作成します。
# Browsers that we support
> 0.5% in JP
Firefox ESR
> 0.5% in JP
で日本国内のシェアが 0.5% より多く、Firefox ESR
で Firefox 延長サポート版を設定しました。
PostCSS のコマンド・エイリアスを定義
package.json の scripts
に compile-pcss
というコマンド・エイリアスを設定します。
{
"scripts": {
"compile-pug": "pug --out dist --basedir src/pug --pretty src/pug",
"compile-pcss": "postcss src/pcss/style.pcss --map --output dist/css/style.min.css" }
}
コマンド・オプションは src/pcss/style.pcss
で入力ファイルを指定、--map
でソース・マップを作成、--output dist/css/style.min.css
で出力ファイルを指定しました。
Babel のインストール
@babel/core をインストール
JavaScript のトランスパイルには Babel を使いたいので、@babel/core – npm をインストールします。
yarn add @babel/core --dev
@babel/preset-env をインストール
@babel/preset-env – npm をインストールします。
yarn add @babel/preset-env --dev
@babel/plugin-transform-runtime をインストール
@babel/plugin-transform-runtime – npm をインストールします。
yarn add @babel/plugin-transform-runtime --dev
Babel の設定ファイルを作成
プロジェクト・ルートに babel.config.js ファイルを作成します。
module.exports = (api) => {
const presets = [
[
'@babel/preset-env',
{
useBuiltIns: false,
},
],
];
const plugins = [
[
'@babel/plugin-transform-runtime',
{
corejs: false,
helpers: true,
regenerator: true,
useESModules: false,
},
],
];
api.cache(true);
return {
presets,
plugins,
};
};
対象ブラウザは PostCSS で設定した .browserslistrc ファイルを参照させるので targets: { }
では指定せず、ポリフィルは @babel/plugin-transform-runtime に任せました。
webpack のインストール
webpack をインストール
JavaScript のビルドには webpack を使いたいので、webpack – npm をインストールします。
yarn add webpack --dev
webpack CLI をインストール
webpack-cli – npm をインストールします。
yarn add webpack-cli --dev
Babel Loader をインストール
babel-loader – npm をインストールします。
yarn add babel-loader --dev
webpack の設定ファイルを作成
プロジェクト・ルートに webpack.config.js ファイルを作成します。
const path = require('path');
module.exports = {
mode: 'production', // 'production' | 'development' | 'none'
// Chosen mode tells webpack to use its built-in optimizations accordingly.
entry: './src/js/script', // string | object | array
// defaults to './src'
// Here the application starts executing
// and webpack starts bundling
output: {
// options related to how webpack emits results
path: path.resolve(__dirname, 'dist/js'), // string
// the target directory for all output files
// must be an absolute path (use the Node.js path module)
filename: 'script.min.js', // string
// the filename template for entry chunks
},
module: {
// configuration regarding modules
rules: [
// rules for modules (configure loaders, parser options, etc.)
{
test: /\.js?$/,
loader: 'babel-loader',
// the loader which should be applied, it'll be resolved relative to the context
// -loader suffix is no longer optional in webpack2 for clarity reasons
// see webpack 1 upgrade guide
options: {
presets: ['@babel/preset-env'],
},
// options for the loader
},
],
},
devtool: 'source-map', // enum
// enhance debugging by adding meta info for the browser devtools
// source-map most detailed at the expense of build speed.
};
mode: 'production'
で出力ファイルを最適化、entry: './src/js/script'
で入力ファイルを指定、output: { }
で出力ファイルを指定、loader: 'babel-loader'
で Babel を使用、devtool: 'source-map'
でソース・マップ作成を設定しました。
webpack のコマンド・エイリアスを定義
package.json の scripts
に compile-js
というコマンド・エイリアスを設定します。
{
"scripts": {
"compile-pug": "pug --out dist --basedir src/pug --pretty src/pug",
"compile-pcss": "postcss src/pcss/style.pcss --map --output dist/css/style.min.css",
"compile-js": "webpack" }
}
コマンド・オプションは webpack.config.js ファイルで設定したのでありません。
ファイルの変更を監視するスクリプトの作成
Chokidar をインストール
pug-cli、postcss-cli、webpack-cli の何れにもファイルの変更を監視するコマンド・オプションがありますが、監視の開始時に対象ファイルの全てに対してコンパイルやビルドを行ってしまうのが嫌なので、chokidar – npm を使って自前で監視します。
yarn add chokidar --dev
Chokidar CLI をインストール
chokidar-cli – npm をインストールします。
yarn add chokidar-cli --dev
node-notifier をインストール
エラーの発生時にデスクトップ通知を表示したいので、node-notifier – npm をインストールします。
yarn add node-notifier --dev
スクリプト・ファイルを作成
プロジェクト・ルートに変更を検出したファイルのコンパイルやビルドを行う compile.js ファイルを作成します。
/* eslint-disable import/no-extraneous-dependencies, no-console */
// モジュールを読み込む
const cpexec = require('child_process').exec; // コマンド実行
const fsmkdir = require('fs').mkdir; // ディレクトリ作成
const notifier = require('node-notifier'); // デスクトップ通知
const path = require('path'); // パス文字列操作
// 拡張子ごとに入力元の基準ディレクトリを設定
const baseDir = {
'.js': 'src/js',
'.pcss': 'src/pcss',
'.pug': 'src/pug',
};
// 拡張子ごとに出力先の基準ディレクトリを設定
const outDir = {
'.js': 'dist/js',
'.pcss': 'dist/css',
'.pug': 'dist',
};
// 引数からパスを取得
const srcPath = path.normalize(process.argv[2]);
// パスから拡張子を取得
const extStr = path.extname(srcPath);
// 出力先のディレクトリ・パスを生成
const outPath = path.join(
outDir[extStr],
path.relative(baseDir[extStr], path.dirname(srcPath))
);
// コンパイル・コマンドを生成
let cmdStr = '';
switch (extStr) {
// 拡張子.js用コンパイル・コマンド
case '.js':
// Usage: webpack [options]
cmdStr = 'webpack';
break;
// 拡張子.pcss用コンパイル・コマンド
case '.pcss':
// Usage: postcss [input.css] [options] [-o|--output output.css]
cmdStr = 'postcss src/pcss/style.pcss --map --output dist/css/style.min.css';
break;
// 拡張子.pug用コンパイル・コマンド
case '.pug':
// Usage: pug [options] [dir|file ...]
cmdStr = `pug --out ${outPath} --basedir ${baseDir[extStr]} --pretty ${srcPath}`;
break;
// 登録外拡張子用メッセージ
default:
cmdStr = `echo Command for "${extStr}" is not registered.`;
}
// 出力先のディレクトリを作成(Node.js v10.12 以降)
fsmkdir(outPath, { recursive: true }, (err) => {
// エラー処理
if (err) {
throw err;
} else {
// コンパイル・コマンドを実行
cpexec(cmdStr, (error, stdout) => {
// エラー処理
if (error) {
// デスクトップ通知を表示
notifier.notify({
title: 'An error has occured',
message: 'Check the terminal for more information',
});
// コンソールにエラー・ログを表示
console.log(error);
} else {
// コンソールにログを表示
console.log(stdout);
}
});
}
});
複数ファイルの同時変更は想定していないので、エディタで すべて保存
はしないことにします。
変更監視のコマンド・エイリアスを定義
package.json の scripts
に watch-compile
というコマンド・エイリアスを設定します。
{
"scripts": {
"compile-pug": "pug --out dist --basedir src/pug --pretty src/pug",
"compile-pcss": "postcss src/pcss/style.pcss --map --output dist/css/style.min.css",
"compile-js": "webpack",
"watch-compile": "chokidar src/js/**/*.js src/pcss/**/*.pcss src/pug/**/*.pug --ignore src/**/_*.* --command \"node compile.js {path}\"" }
}
コマンド・オプションは src/js/**/*.js src/pcss/**/*.pcss src/pug/**/*.pug
で監視するファイルを指定、--ignore src/**/_*.*
で除外するファイルを指定、--command \"node compile.js {path}\"
で実行するコマンドを指定しました。
Browsersync のインストール
Browsersync をインストール
静的サイトのブラウザでの確認には webpack-dev-server より Browsersync の方が向いていると思うので、browser-sync – npm をインストールします。
yarn add browser-sync --dev
Browsersync の設定ファイルを生成
プロジェクト・ルートに bs-config.js ファイルを生成します。
yarn run browser-sync init
生成した bs-config.js ファイルを編集します。
module.exports = {
// files: false,
files: ['dist/**/*.html', 'dist/css/**/*.css', 'dist/js/**/*.js'], // server: false,
server: { baseDir: 'dist', directory: true, },};
files: ['dist/**/*.html', 'dist/css/**/*.css', 'dist/js/**/*.js']
で監視するファイルを指定、server: { baseDir: 'dist', directory: true }
でルート・ディレクトリを指定、ディレクトリ・リスティングを有効にしました。
Browsersync のコマンド・エイリアスを定義
package.json の scripts
に watch-server
というコマンド・エイリアスを設定します。
{
"scripts": {
"compile-pug": "pug --out dist --basedir src/pug --pretty src/pug",
"compile-pcss": "postcss src/pcss/style.pcss --map --output dist/css/style.min.css",
"compile-js": "webpack",
"watch-compile": "chokidar src/js/**/*.js src/pcss/**/*.pcss src/pug/**/*.pug --ignore src/**/_*.* --command \"node compile.js {path}\"",
"watch-server": "browser-sync start --config bs-config.js" }
}
コマンド・オプションは start
で Browsersync を開始、--config bs-config.js
で設定ファイルを指定しました。
npm-run-all のインストール
npm-run-all をインストール
複数の npm-scripts を実行する npm-run-all – npm をインストールします。
yarn add npm-run-all --dev
npm-run-all のコマンド・エイリアスを定義
package.json の scripts
に start
というコマンド・エイリアスを設定します。
{
"scripts": {
"compile-pug": "pug --out dist --basedir src/pug --pretty src/pug",
"compile-pcss": "postcss src/pcss/style.pcss --map --output dist/css/style.min.css",
"compile-js": "webpack",
"watch-compile": "chokidar src/js/**/*.js src/pcss/**/*.pcss src/pug/**/*.pug --ignore src/**/_*.* --command \"node compile.js {path}\"",
"watch-server": "browser-sync start --config bs-config.js",
"start": "npm-run-all --parallel watch-*" }
}
コマンド・オプションは --parallel watch-*
で watch-compile
と watch-server
の並列実行を指定しました。