Edited at

Gulpの導入〜初期設定まで

More than 1 year has passed since last update.


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