環境構築(Mac)

Node.jsのインストール

gulp を使うためには、 Node.js がインストールされている必要があるため、確認します。

$ node -v

バージョンが表示されなければ、Homebrew(Mac用パッケージマネージャー)などでインストールします。
既にインストール済みの場合はHomebrewをアップデートしてから、node.jsをインストールします。

$ brew update
$ brew install node

npm(node.jsのパッケージ管理ツール)は、homebrewでNode.jsをインストールすると一緒にインストールされます。

グローバルにgulpをインストール

グローバルインストールすると「gulp」というコマンドが使えるようになります。

$ sudo npm install gulp -g

package.jsonを作成

適当な場所にプロジェクトのディレクリを作成し移動します。
そこにnpm initを実行してpackage.jsonというnode.js用のプロジェクトファイルを作成します。
色々と聞かれますが、とりあえずYESで進めてください。

$ npm init

name: (20170608_test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: "kawachi"
license: "ISC"

npmの最新v5にアップデートした場合は、package-lock.jsonというファイルが作成されるようです。
npm v5 がリリースされた - from scratch

ローカル(プロジェクト)にgulpをインストール

$ npm install --save-dev gulp

gulpがグローバルとローカル両方に入っているか確認しておきます。

$ gulp -v
CLI version 1.3.0
Local version 3.9.1

必要なパッケージをインストール

下記のコマンドで必要なパッケージをインストールしていきます。
--save-devを付けるとpackage.jsonにインストールしたパッケージを記述してくれます。

$ npm install gulp-sass --save-dev

下記、とりあえず私が最初にインストールしたパッケージです。

  • gulp-sass(scssをcssに変換するパッケージ)
    gulp-scssとの違いがよく分かりませんが、こちらの方がメジャーなようです。

  • gulp-autoprefixer (ブラウザ固有のプレフィックスを自動で付与する)

  • gulp-plumber(エラーが起こってもタスクが停止しないようにする)

  • browser-sync(ファイル保存時にブラウザをリロード)

  • gulp-csscomb(プロパティ記述の順序を任意で設定)
    .csscomb.jsonファイルを作成して記述順序などを設定する必要があります。私はジェネレーターを使って作成しました。

  • gulp-notify(エラーが出た時にデスクトップに通知してくれる)

  • connect-ssi(includeを読み込ませるのに必要のよう)
    このパッケージは設定に苦労したので、設定方法を後述したいと思う。。

    gulpfile.jsファイルの作成

    インストールしたパッケージを使えるように、プロジェクトディレクトリ内にgulpfile.jsファイルを新規作成します。
    gulpfile.jsの設定内容は、ややこしいため割愛しますが、ジェネレーターを使うと楽です。
    gulp generator

    gulpコマンドで実行する

    $ gulp

    問題なく設定が出来ていれば、Webサーバーが起動し、http://localhost:3000に表示されます。

    参考サイト

    @wakamshaさんのAltJS,AltCSS課題をGulp, SCSS, TypeScript でやってみた | Developers.IO
    ざっくりGulp.js入門(Mac向け) - Qiita