npm-scripts で静的サイトの制作環境を構築 (1)

Windows、Visual Studio Code、Yarn、npm-scripts、Pug、PostCSS、Babel、webpack で静的サイトの制作環境を構築した際のメモ。（コンパイラのインストール～ .gitignore ファイルの生成）

長くなったので、(1) コンパイラのインストール～ .gitignore ファイルの生成、(2) package.json ファイルの生成～ npm-run-all のインストール、(3) 構文ハイライトのインストール～ファイル保存時に自動整形、の 3 つに分けました。

Prettier の prettier.eslintIntegration と prettier.stylelintIntegration が非推奨になったため、(3) (改) 構文ハイライトのインストール～ファイル保存時に自動整形を投稿しました。

eslint-plugin-prettier と stylelint-prettier が非推奨になり、stylelint v15 以降は stylelint-config-prettier が不要になったため、(3) (改) (2) 構文ハイライトのインストール～ファイル保存時に自動整形を投稿しました。

目次

コンパイラのインストール

Node.js のパッケージにはインストール時にコンパイルを行うものがありますが、Windows には標準でコンパイラがインストールされていないので、コンパイルが出来るようにします。

windows-build-tools – npm を使えば、必要なものがインストールされ、設定も行われるようですが、Python は Scoop で管理したいので、手動で Microsoft Visual C++ Build Tools と Python をインストールしてみました。

Microsoft Visual C++ Build Tools をインストール

Visual Studio のバージョンは 2017 と 2015 のどちらかで、デフォルトでは 2017 のようですが、今回はファイル・サイズが小さい（かも知れない）2015 にしました。

以前の Visual Studio ソフトウェアのダウンロード | Visual Studio – Visual Studio から 再頒布可能パッケージおよびビルド ツール の Microsoft Build Tools 2015 Update 3 をダウンロードします。

ダウンロードした visualcppbuildtools_full.exe を起動します。

インストールの種類で 規定 を選択し、インストールします。

npm config で msvs_version を設定

Microsoft Visual C++ Build Tools のインストールが完了したら、PowerShell かコマンドプロンプトを起動し、npm config で msvs_version を設定します。

npm config set msvs_version 2015 -g

npm config で設定を確認します。

npm config list

msvs_version = "2015" と表示されれば設定が出来ています。

Python をインストール

node-gyp は Python 3.x.x に対応していないので、Scoop で過去のバージョンもインストール出来るよう versions bucket を導入します。

scoop bucket add versions

Python を検索します。

scoop search python

versions bucket に Python 2.7.x（python27）があると確認出来たのでインストールします。

scoop install python27

npm config で Python のパスを設定

Python 2.7.x のインストールが完了したら、PowerShell かコマンドプロンプトを起動し、npm config で Python のパスを設定します。

npm config set python Scoop のインストール先のパス\apps\python27\current\python.exe -g

npm config で設定を確認します。

npm config list

python = "Scoop のインストール先のパス\\apps\\python27\\current\\python.exe" と表示されれば設定が出来ています。

パッケージ・マネージャーのインストール

パッケージ・マネージャーは npm を使っても良いのですが、Yarn の方が良さそうなので、Scoop で Yarn をインストールします。

Yarn をインストール

Yarn を検索します。

scoop search yarn

main bucket に Yarn があると確認出来たのでインストールします。

scoop install yarn

npm と Yarn のコマンド

node-gyp のインストール

node-gyp – npm をグローバルにインストールします。

yarn global add node-gyp

プロジェクト・フォルダの作成

作業を行うプロジェクト・フォルダの構成を考えます。

フォルダ構成

ソースコードは src フォルダ以下に、成果物は dist フォルダ以下に出力することにしました。

プロジェクト・フォルダ
├── .git
├── dist
│  ├── css
│  │  ├── style.min.css
│  │  └── style.min.css.map
│  ├── js
│  │  ├── script.min.js
│  │  └── script.min.js.map
│  └── index.html
├── node_modules
├── src
│  ├── js
│  │  └── script.js
│  ├── pcss
│  │  └── style.pcss
│  └── pug
│     └── index.pug
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .stylelintrc.js
├── babel.config.js
├── bs-config.js
├── compile.js
├── package.json
├── postcss.config.js
├── webpack.config.js
└── yarn.lock

.gitignore ファイルの生成

node_modules フォルダを Git の管理から除外したいので、.gitignore ファイルを自動生成する gibo を Scoop でインストールします。

gibo をインストール

PowerShell かコマンドプロンプトを起動し、gibo を検索します。

scoop search gibo

main bucket に gibo があると確認出来たのでインストールします。

scoop install gibo

.gitignore ファイルを自動生成

.gitignore ファイルの生成前に boilerplates を最新版に更新します。

gibo update

fatal: --[no-]autostash option is only valid with --rebase. とエラーメッセージが表示されて boilerplates が更新されないので、OS X や Linux 用のシェルスクリプト（Scoop のインストール先のパス\apps\gibo\2.1.0\gibo）と Windows 用のバッチファイル（Scoop のインストール先のパス\apps\gibo\2.1.0\gibo.bat）の update コマンド・オプションを比較してみました。

OS X や Linux 用のシェルスクリプト（Scoop のインストール先のパス\apps\gibo\2.1.0\gibo）

update() {
    if [ ! -e "$local_repo/.git" ]; then
        clone
    else
        cd "$local_repo"
        git pull --ff origin master
    fi
}

Windows 用のバッチファイル（Scoop のインストール先のパス\apps\gibo\2.1.0\gibo.bat）

:update
    call :init

    rem If the repo was just cloned, don't perform a `pull`
    if not defined __cloned (
        echo updating..
        pushd "%local_repo%"
        git pull -q --autostash --ff origin master
        popd
    )

    goto :eof

Windows 用のバッチファイル（Scoop のインストール先のパス\apps\gibo\2.1.0\gibo.bat）の git pull -q --autostash --ff origin master をコメントアウトし、git pull --ff origin master を追記します。

:update
    call :init

    rem If the repo was just cloned, don't perform a `pull`
    if not defined __cloned (
        echo updating..
        pushd "%local_repo%"
        rem git pull -q --autostash --ff origin master
        git pull --ff origin master        popd
    )

    goto :eof

これで、gibo update を行うと GitHub – github/gitignore: A collection of useful .gitignore templates がユーザー・フォルダのパス\AppData\Roaming\.gitignore-boilerplates に複製され、boilerplates を最新版に更新出来るようになりました。

使用出来る boilerplates の一覧を表示して確認します。

gibo list

Node.js のパッケージやモジュールを開発する訳ではありませんが、node_modules フォルダを除外したいので言語は Node を選択、エディタは Visual Studio Code、OS は Windows を選択します。

プロジェクト・フォルダに移動します。

cd プロジェクト・フォルダのパス

boilerplates を最新版に更新します。

gibo update

.gitignore ファイルを生成します。

gibo dump Node VisualStudioCode Windows >> .gitignore