#環境構築(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