All Articles

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

Visual C++ Build Tools * Python * Yarn

WindowsVisual Studio CodeYarnnpm-scriptsPugPostCSSBabelwebpack で静的サイトの制作環境を構築した際のメモ。(コンパイラのインストール~ .gitignore ファイルの生成)

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

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

目次

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

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

windows-build-tools – npm を使えば、必要なものがインストールされ、設定も行われるようですが、PythonScoop で管理したいので、手動で 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 configmsvs_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 のコマンド

機能 npm Yarn
対話型セッションで package.json を生成 npm init yarn init
入力を省略して package.json を生成 npm init --yes yarn init --yes
プロジェクトの全てのパッケージをインストール npm install yarn install
グローバルにパッケージを追加 npm install --global パッケージ名 yarn global add パッケージ名
dependencies にパッケージを追加 npm install --save パッケージ名 yarn add パッケージ名
devDependencies にパッケージを追加 npm install --save-dev パッケージ名 yarn add --dev パッケージ名
グローバルの古いパッケージ一覧を表示 npm outdated --global yarn global upgrade-interactive
※yarn globalにoutdatedがないので代用。
ローカルの古いパッケージ一覧を表示 npm outdated yarn outdated
グローバルのパッケージを更新 npm update --global パッケージ名 yarn global upgrade パッケージ名
グローバルのパッケージを対話型で更新 npm-check --update --global
※npm-checkのインストールが必要。
yarn global upgrade-interactive
ローカルのパッケージを更新 npm update パッケージ名 yarn upgrade パッケージ名
ローカルのパッケージを対話型で更新 npm-check --update
※npm-checkのインストールが必要。
yarn upgrade-interactive
グローバルのパッケージを削除 npm uninstall --global パッケージ名 yarn global remove パッケージ名
dependencies のパッケージを削除 npm uninstall --save パッケージ名 yarn remove パッケージ名
devDependencies のパッケージを削除 npm uninstall --save-dev パッケージ名 yarn remove パッケージ名

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