裏紙に書く程度の内容

gulpの使い方

gruntからgulpに乗り換えようと画策中。
今更ですが、gulpの基本的な使い方をまとめておきます。

とりあえずlessをコンパイルできるようにしてみるメモ。

また、gulpファイルはcoffee scriptで作ります。

gulp

gulpのインストール

npmでグローバルにインストールします。1回やればOK。

npm install -g gulp

プロジェクトへインストール

以下は、プロジェクトごとに必要な作業です。

プロジェクトの作成

任意のプロジェクトディレクトリを作成し、その中でnpm initとし、プロジェクトを初期化しておきます。

npm init

対話形式でプロジェクトの内容について質問されるので適当に入力します。

ここで設定する項目はいつでも変更できるので、全部からでも大丈夫です。自分はいつもエンター連打してます。

これでプロジェクトディレクトリ内に’package.json’というファイルが作成されます。

こんな感じ。

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

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

先程グローバルにgulpをインストールしましたが、プロジェクトごとにもインストールが必要です。

npm install --save-dev gulp

何でグローバルにもインストールが必要だったのかはよくわかりません。

coffee-scriptインストール

通常、gulpのタスクはjsで設定しますが、今回はcoffee-scriptで設定ファイルを作ります。
その為、coffee-scriptもインストールしておく必要があります。

npm install coffee-script --save-dev

gulp.coffeeファイルを作成

プロジェクトのルートにgulpタスクを実行するための’gulpfile.coffee’ファイルを作っておきます。
とりあえず、下記の通りに。

gulp = require 'gulp'

タスクはまだ何も設定していませんが、とりあえずgulpを使うための準備が出来ました。

lessをコンパイルする

gulpでlessをコンパイル出来るようにします。

今回は以下のようなディレクトリ構成を想定します。

  • src/
    • less/
  • assets/
    • css/

‘src/less/‘以下にlessファイルを置き、コンパイルしたcssファイルは’assets/css/‘に配置することにします。

lessファイルの準備

まず、lessファイルを準備します。
前述のとおりですが、プロジェクト内に’src/less/‘ディレクトリを作って、その中に’style.less’ファイルを作成してください。

内容はとりあえず適当に。

body {
    p {
        color: red;
    }
}

コンパイル後の’assets/css/‘ディレクトリはgulpが作成するので事前に作っておく必要はありません。

gulp-lessのインストール、タスク作成

gulpでlessをコンパイルするにはgulp-lessが必要になります。

以下のコマンドでインストールしてください。

npm install gulp-less --save-dev

インストールしたら今度はタスクの設定をします。先程作ったgulpfile.coffeeを以下の通り変更してください。

gulp = require 'gulp'
less = require 'gulp-less'

gulp.task 'less', ->
  gulp.src './src/less/**/*.less'
    .pipe less()
    .pipe gulp.dest './assets/css'

lessコンパイル実行

上記まででlessをコンパイルする準備は整いました。さっそく実行してみましょう。

gulp less

成功すれば “[11:50:58] Finished ‘less’ after 39 ms” みたいな感じでメッセージが表示され、’assets/css/style.css’ファイルが作成されます。

中身を確認してみます。

body p {
  color: red;
}

うまくいったようです。

タスクの実行を自動化する

lessのコンパイルはできるようになりましたが、less修正のたびにgulp lessを実行するのは非常にめんどくさい。

今回はlessが変更されたら自動でコンパイルするようにタスクを設定します。

gulp-plumberインストール

gulpではファイルの監視にwatch()メソッドを使うのですが、これは実行したタスクにエラーがあった場合、監視も終了してしまいます。
これを避けるため、’gulp-plumber’というモジュールを使います

npm install gulp-plumber --save-dev

監視タスクの作成

gulpfile.coffeeを下記の通り変更します。

gulp = require 'gulp'
less = require 'gulp-less'
plumber = require 'gulp-plumber'   # 追加

# 監視タスク 追加
gulp.task 'watch', ->
  gulp.watch './src/less/**/*.less', ['less']

# lessコンパイル
gulp.task 'less', ->
  gulp.src './src/less/**/*.less'
    .pipe plumber()                # 追加
    .pipe less()
    .pipe gulp.dest './assets/css'

監視をスタートするには以下コマンド。

gulp watch

これでlessが変更されたら自動的にコンパイルされます。

なんとなくですが、GruntよりGulpの方がわかりやすい気がする。

参考

http://mae.chab.in/archives/2545

Index
広告