gulpの開発環境をMacで構築してみる

WEB関係の開発をしていると、HTMLやCSS・Javascriptを圧縮したり、SCSSをコンパイルしてCSSにしたり、CSSコードに必要なベンダープレフィックスを設定したりと様々なタスクを一つ一つ実行していく手間が出てきます。

そういったタスクを自動で実行してくれるのがタスクランナーというビルドツールです。

タスクが自動化できれば、処理のし忘れを防ぐこともできますし、何より煩雑なタスクを自分の手で実行する必要がなくなりますので、開発の工数短縮につながります。

ぜひ導入しておきましょう。

今回は、数あるビルドツールの中でも比較的人気の高い「gulp」の導入を解説していきたいと思います。

動作確認環境

• OS:OS X Yosemite 10.10.5
• node.js:v6.4.0
• npm:3.10.3

1.node.jsをインストールしましょう。

gulpはnode.jsで作成されたツールですので、まずnode.jsをインストールする必要があります。node.jsのインストールについては下記の記事を御覧ください。

2.gulpのインストールしてみましょう

node.jsをインストールしたら、続いてgulpをグローバルインストールします。

$ npm install --global gulp-cli

gulpはプロジェクトごとに使用するので、 gulpでタスクを自動化させるプロジェクトディレクトリを作成します。 ※このディレクトリ内でWEBサイトを構築していきます。

$ mkdir webproject && cd $_

次にプロジェクトのnode.js用パッケージを管理するために「package.json」ファイルを作成します。

$ npm init --yes

プロジェクトディレクトリ（カレントディレクトリ）にpackage.jsonファイルが作成されます。

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

続いて、gulpをプロジェクトディレクトリにローカルインストールします。上記でgulpのグローバルインストールを実行していますが、ローカルインストールも必要です。

ローカルインストールするには下記のコマンドを実行します。

$ npm install --save-dev gulp

なお、–save-devオプションをつけると、package.jsonのdevDependenciesキーにインストールしたパッケージをバージョン付きで書き込まれます。

package.jsonを確認すると、devDependenciesキーが追加され、gulpがバージョン付きで追記されているのがわかります。

{
  "name": "webproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

なお、上記のコマンドは省略して記載することもできます。

$ npm i -D gulp

では、gulpがグローバルにもローカルにも正常にインストールされているか確認してみましょう。下記のようにCLIとLocalと2つ表示されていればOKです。

$ gulp -v
[00:22:50] CLI version 1.2.2
[00:22:50] Local version 3.9.1

3.gulpを使ってみましょう

3-1.gulpfile.jsの作成する

gulpを使用するには、まずgulpで実行させるタスクを記述する「gulpfile.js」というファイルが必要です。

まず、「gulpfile.js」をプロジェクトディレクトリに作成します。

$ vi gulpfile.js

そして、gulpfile.jsに次のように記載します。

var gulp = require('gulp');

これで準備は完了です。

3-2.gulpでSCSSをコンパイルする

では、さっそくgulpでタスクを実行してみましょう。

今回はSCSSをコンパイルしてみたいと思います。

gulpでSCSSをコンパイルするには、実はgulp本体だけでは実行できません。

gulp本体には、「画像の軽量化機能」や「SCSSのコンパイル機能」というのはなく、プラグインを通じて各々の処理が行われます。

つまり、gulpでタスクを自動化させるためには、自動化させたいタスクによって必要なプラグインをインストールしなければいけないということです。

ということで、SCSSをコンパイルするためのプラグインをインストールする必要があります。今回は「gulp-sass」というプラグインを使用します。

さっそくインストールしましょう。

$ npm i -D gulp-sass

つぎにgulpでコンパイルするSCSSファイルを用意します。

まず、プロジェクトディレクトリであるwebprojectの配下に下記のような階層を作成します。

webproject
└── src
    └── sass
        └── style.scss

$ mkdir src && cd $_
$ mkdir sass && cd $_

次にsassディレクトリ内にscssファイルを作成します。

※sassについては公式サイトを御覧ください。

$ vi style.scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

では、SCSSをgulpでコンパイルするタスクを「gulpfile.js」に記載してみましょう。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
　　gulp.src('src/sass/*.scss')
　　　　.pipe(sass())
　　　　.pipe(gulp.dest('css/'));
});

少しコードの解説をしたいと思います。

まずrequireでgulpとgulp-sassプライグインを読み込みます。

次に、gulp.taskでタスク名と実際に実行させる処理を
gulp.task(‘タスク名’,function(){実行させる処理});という風に記述します。

続いて、処理される処理の部分のコードについて説明します。

まず、gulp.srcで処理対象のファイルを指定します。
ちなみに、ファイルは複数選択することが可能で、上記のコードではワイルドカードを利用し、sassフォルダ内のscssファイル全てを指定しています。

次に、gulp.destで処理されたファイルの出力先を指定します。

最後に、pipeについてですが、pipeを使用すると、前の処理の出力結果を次の処理の入力として利用できます。つまり処理と処理をつなげることができます。

※詳しくはこちらを御覧ください。

では、実行してみましょう。

$ gulp sass
[22:15:40] Using gulpfile ~/gulp/webproject/gulpfile.js
[22:15:40] Starting 'sass'...
[22:15:40] Finished 'sass' after 9.65 ms

コンパイルされたCSSファイルを確認してみましょう。

$ vi css/style.css

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }

nav li {
  display: inline-block; }

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

gulpでSCSSをコンパイルすることができました。

3-3.watch機能を使ってみる

最後に、watch機能について説明します。

上記の方法で、SCSSをコンパイルするタスクはできましたが、コードを変更する度にタスクを手動で実行するのは効率的ではありません。

ファイルに変更があれば、そのタイミングでタスクが自動で実行できたら便利ですよね。

そこで、gulpのwatch機能を使えば、タスクを自動実行することができます。

watch機能を利用し、ファイルの変更を監視することで、タスクを自動実行させます。

では、watch機能を「gulpfile.js」に記載してみましょう。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.watch("src/sass/*.scss",["sass"]);
　　gulp.src('src/sass/*.scss')
　　　　.pipe(sass())
　　　　.pipe(gulp.dest('css/'));
});

追加したコードを少し説明します。

watch機能を使うには、監視対象のファイルと監視対象に変更があった場合に実行する処理をgulp.watch(“監視するファイル”, 処理)と記載します。

では、監視を開始しましょう。

$ gulp sass

試しにSCSSファイルを変更してみてください。CSSが書きかわるはずです。

監視を終了するには control + C を押下します。

今回は以上です。

続き書きました(20160901)。

参考