npm-scriptsで静的サイトの制作環境を構築 (1) コンパイラのインストール~.gitignoreファイルの生成

投稿日:

WindowsVisual Studio CodeYarnnpm-scriptsPugPostCSSBabelwebpackで静的サイトの制作環境を構築した際のメモ。

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

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

nodeのパッケージにはインストール時にコンパイルを行うものがありますが、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 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のコマンド

機能 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 /d プロジェクト・フォルダのパス

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

gibo update

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

gibo dump Node VisualStudioCode Windows >> .gitignore
The following two tabs change content below.

isonishi

小規模ウェブサイトの制作を請け負うフリーランサーです。今どきのフロントエンドエンジニアより昔ながらのコーダーの方が近いと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です