2016年2月8日月曜日

フロントエンド・タスクランナー（2: Gulp インストール編）

  
お疲れ様です。
先日薬を貰うために薬局のソファでぼーっと待っていた所、目の前を通り過ぎたおばあさんのバッグから飛び出ていた先端の鋭い牛蒡が目に突き刺さりそうになるという、恐ろしい思いをしましたふみえです。

さて、今回は前回の続きということで、タスクランナー Gulp を実際にインストールしていきます。
構築環境は OS X El Capitan バージョン10.11.3です。

0. 前提条件

Xcode をインストールしていること

1. Homebrew インストール

OS X 用タスクマネージャー Home Brew をインストールします。
こちらのページに遷移後、表示されているコマンドをターミナルで実行します。
$ brew -v
でバージョンが表示されたらインストール成功です。

2. rbenv インストール

rbenv は Ruby のバージョン・マネージャーです。rvm の後発という安易な理由で、こちらをインストールしていきます。
$ brew install rbenv
※ もしかしたら sudo で実行したほうが良いかもしれないです。
パスを通します。
$ echo 'export PATH="$HOME/.rbenv/bin:$PATH"' >> ~/.bash_profile

$ rbenv -v
こちらでバージョンが表示されたら成功です！

3. nvm をインストール

nvm の github のページにて、curl で最新のバージョンのものを持ってきます。今回は v0.30.2 です。
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
ここまで来たら、ターミナルを閉じて再度起動してください。
使用したい node のバージョンを下記のように指定します。
$ nvm install v4.2.6


4-1. Gulp をグローバルインストール

いよいよ Gulp をグローバルインストールします。
$ npm install -g gulp
次に任意のプロジェクト（ディレクトリ）を作成し、移動します。今回は gulp_test ディレクトリ（プロジェクト）を作成していきます。
$ mkdir gulp_test

$ cd gulp_test
ここで、プロジェクトのパッケージを管理するための package.json を下記のコマンドで自動作成させます。要するに npm の初期設定です。
この初期設定は対話形式で行われます。特別な設定が無いならずっと Return キー押下で問題ありません。最後に"Is this ok?"ときかれるので、yes とこたえましょう(^o^)
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (gulp_test)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/toyooka/gulp_test/package.json:

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


Is this ok? (yes) yes
この結果、package.json ファイルが作成されます。デフォルトの中身は以下のようになります。 
  {
    "name": "gulp_test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "gulp": "^3.9.0"
    }
  }


4-2. カレントディレクトリ内で gulp に依存関係をもたせる

先ほど行ったのは gulp のグローバルインストールになりますが、これから行うのは、今いるプロジェクト用に gulp をインストールし、先ほどの package.json に 'devDependencies' を追記してくれるコマンドです。
  $ npm install gulp --save-dev
これで、package.json の中身を確認してみましょう。ファイル内に devDependencies が追記されました。
  "devDependencies": {
    "gulp": "^3.9.0"
  }
さらに、node_module というディレクトリができて、 gulp さんがいらっしゃるのが確認できます。

5. Gulp を設定する

このプロジェクト内で gulp を動かすためには gulpfile.js を作成しなければなりません。
  var gulp = require('gulp');


6. Sass を Gulp で動かしてみる

Gulp の動作確認のために、gulp で Sass を動かしてみましょう。その準備として、sass/style.scss ファイルにネストした適当なコードを書いて保存します。
  header {
    font-size: 15px;
    line-height: 1;

    span {
      font-weight: bold;
    }
  }
次に gulp で Sass をコンパイルできるように gulp-sass というパッケージをインストールします。
  $ npm install gulp-sass --save-dev
上記コマンド実行後に package.json ファイルを見てみてください。devDependencies に下記の行が追加されていることを確認しましょう。
  "gulp-sass": "^2.1.1"
次に、gulpfile.js に Sass の設定をしていきます。
  var gulp = require("gulp"); // gulp の読み込み
  var sass = require("gulp-sass"); // gulp-sass の読み込み

  // sass コンパイルのタスク処理
  gulp.task('sass', function(){
    gulp.src('sass/style.scss') // コンパイルしたいファイルを指定
        .pipe(sass())
        .pipe(gulp.dest('./css')); // css ディレクトリ以下にコンパイルしたファイルを置く
  });
.pipe() は src で指定したファイルに対してその中で指定した処理を施す命令です。チェーンで次々に処理をつなぐことができます。
これで、準備完了です！それでは、コンパイルさせてみましょう！
  $ gulp sass
css ディレクトリの中に style.css が生成されていると思います。では、その中身を確認してみましょう！
  header {
  font-size: 15px;
  line-height: 1; }
  header span {
    font-weight: bold; }
ドドン！！ちょっと括弧の位置やインデントが微妙ですが、Sass のファイルが CSS ファイルにコンパイルされました(^o^)

こんな感じでいろいろな処理を自動化させてしまいましょう！！

参考記事:

0 コメント:

コメントを投稿

登録: コメントの投稿 (Atom)