klim.log()

フロントエンドエンジニア見習いによる学習記録

フロントエンド環境構築（Node.jsの導入からYarnの導入まで）

Node.js Gulp Frontend Yarn

フロントエンドの環境構築を行う。

以下、自分の環境がmacOS Sierraであるため、導入方法はMacで行われることが前提の記事になっている。 なお、過去にも似たような記事を書いていた記憶があるが、一旦忘れることにする。

本記事以降もフロントエンドの環境構築について書いていく予定であるが、当面の目標は以下の感じに。

  1. Node.jsの導入
  2. Yarnの導入
  3. Gulpの導入
  4. BrowserSyncの導入
  5. SASSコンパイル環境の構築
  6. Pugコンパイル環境の構築

ひとまず1.から2.までを本記事で言及していく。

Contents

Install nvm

Node.jsをインストールするが、公式サイトからインストールするとバージョンの切り替えが発生した時に面倒なことになる。 バージョンの切り替えを行うために、nvmをインストールする。

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

$ nvm --version
0.33.0

Install node.js

Node.jsをインストールする。 ひとまず最新版（執筆当時、推奨版が8.10.0 LTS）をインストールする。

$ nvm install 8.10.0

なんでもいい！適当に最新のLTS入れちゃえ！って人は以下でも可。

$ nvm install --lts

インストールしたら以下で確認。

$ node -v
v8.10.0

Install npm

Node.jsインストール時に自動でnpmもインストールされる。

$ npm -v
5.6.0

┌────────────────────────────────────────────────────────────┐
│                  npm update check failed                   │
│            Try running with sudo or get access             │
│           to the local update config store via             │
│ sudo chown -R $USER:$(id -gn $USER) /Users/[account]/.config │
└────────────────────────────────────────────────────────────┘

npm update check failed とあるように、アップデートに失敗している様子。 大人しく上記のようにコマンドを叩く（[account]の部分は要書き換え）。 sudoがあるので、パスワードが求められる。

$ sudo chown -R account /Users/[account]/.config

これを叩いてから、もう一度 npm -v を叩く。

$ npm -v
5.6.0

   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.3.0 → 5.7.1    │
   │     Run npm i -g npm to update      │
   │                                     │
   ╰─────────────────────────────────────╯

npmのバージョンが古いようなので、上記のコマンドを叩いてアップデートする（古い方のバージョンが合ってない原因は分からん）。

$ npm i -g npm to update

もう一度バージョンを確認。

$ npm -v
5.7.1

Install yarn

npmよりも高速なパッケージマネージャーであるYarnを入れてみる。 Installation | Yarn{:target="_blank"} 上記リンク先（Alternativesタブ内）にも書かれているが、実はYarnを $ npm --global install yarn というようにnpmでインストールするのは非推奨となっている。

Note: Installation of Yarn via npm is generally not recommended. When installing Yarn with Node-based package managers, the package is not signed, and the only integrity check performed is a basic SHA1 hash, which is a security risk when installing system-wide apps. For these reasons, it is highly recommended that you install Yarn through the installation method best suited to your operating system.

という訳で、各OSに合った方法でインストールするのが良いと思われる。 自分の環境がMacであるため、 Homebrew{:target="_blank"} を用いてインストールしておく。 既にNode.jsやnpmをインストールしているので、 --without-node オプションを付けておく。

$ brew install yarn --without-node

これだけだと yarn -v しても怒られが発生するだけなので、Pathを通してやる必要がある。

Note: your profile may be in your .profile, .bash_profile, .bashrc, .zshrc, etc. 1. Add this to your profile: export PATH="$PATH:/opt/yarn-[version]/bin" (the path may vary depending on where you extracted Yarn to) 2. In the terminal, log in and log out for the changes to take effect

自分の場合、ホームディレクトに内にある .bash_profile に export PATH="$PATH:/opt/yarn-1.5.1/bin" を追記した（1.5.1のバージョン部分は適宜書き換える）。 ターミナルを再起動して、バージョン確認してみる。

$ yarn -v
1.5.1

以下、npmコマンドの代わりにyarnコマンドでパッケージのインストールを行っていく。

Create project files

適当にプロジェクトファイルを作成する。 例として、以下のようにディレクトリを作成してみた。

$ mkdir ~/your/project/path

適当に index.html のようなファイルを上記ディレクトリ内に作成。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>Gulp Test</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <p>Gulp Test</p>
    </main>
</body>
</html>

ついでにSCSSファイル style.scss も作成

$fontColor: #f00;

main {
    p{
        color: $fontColor;
        font-size: 2em;
    }
}

以下、 ~/your/project/path 内にGulp等のパッケージをローカルインストールしていく。 なお、基本的にグローバルインストール（yarn global add [package]）は行わない方針とする。

Create package.json

プロジェクトフォルダごとにインストールするパッケージ群やその依存関係をまとめて記載しておけるjsonファイル（という雑な認識）を作成する。

デフォルト（空の内容）でいいという人は以下を。

$ yarn init --yes

対話的に何か入力しておきたい人は以下を。

$ yarn init

前者のコマンドを叩くと以下のような表示に。 セキュリティ的にアレと言われているが無視する。

$ yarn init --yes
yarn init v1.5.1
warning The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.
success Saved package.json
✨  Done in 0.04s.

package.jsonの中身は以下。（nameをgulp_testに変更した）

{
  "name": "gulp_test",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

今回はここまで。 次回はGulpのインストールから。

References

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門