gulpを導入してタスクを自動化しよう

gulpを導入してタスクを自動化しよう

2016.05.17
gulp_project_image
ノウハウ

こんにちは、ugです。

フロントエンド開発の仕事をしているとやる事が多くて手が回らない事が多いですよね。
タスクランナーといえばgruntが有名ですが、今回は効率よく仕事を進める為に、gruntの後発フロントエンドビルドツールであるgulpを導入し、実際に動かしてみるところまでをご紹介したいと思います。

gulpって何?

gulp.jsとはNode.js製のフロントエンドビルドツールです。よく比較されるツールとしてGruntがありますが、両者の目的は似ており、色々なプラグインを組み合わせ、目的とする成果物を求めるタスクを自動化するためのツールです。

gulpの特徴としては、処理を並列実行する為、gruntと比べ動作が早くなる事が多いそうです。また、タスクの処理が直感的に分かりやすく、簡潔に書くことができるのも嬉しいですね。

どんな事が出来るの?

HTMLやCSSの編集をして、ブラウザで確認すると思いますが、SassやLessに代表されるCSSプリプロセッサや、AltJSを使う際はブラウザがそのままでは解析する事ができないので、元の言語にコンパイルをする必要があります。

普通にコンパイルするだけであれば各種コンパイラを使用すればよいですが、コンパイル後にファイルを圧縮したり、必要なブラウザに対応したベンダープレフィックスを付与するといった煩雑な作業をカスタマイズして自動化出来れば開発を効率よく進める事ができます。

では早速ですが、実際にgulpを動かしてみましょう!

gulpを導入してみる

node.jsのインストール

gulp_project_node

node.js
gulpを使用出来る環境を整える為に、まずはnode.jsをインストールする必要があります。
Macにはhomebrewという便利なパッケージマネージャーがあるので、まだhomebrewをインストールしていないよーという方はインストールしましょう(プロジェクト毎にnodeのバージョンを変えたいとうい方はnodebrew等を使用すると切り替えが簡単に出来ます)。

 
homebrewを最新版に更新。
$ brew update

最新版にアップデート後、Node.jsをインストールします。
$ brew install node
 

無事にインストールが完了していれば$ node -vを実行する事でバージョンが確認できます。
node.jsをインストールした事でnodeコマンドとnpmというパッケージマネージャーを利用出来るようになったので、npmを使用しgulpの設定をしていきたいと思います。

gulpのインストール

gulpや利用するプラグインに関してはnpmコマンドでインストールしていきます。
まずはターミナルでコマンドとして使うためにグローバルにインストールをします。
$ npm install -g gulp

$ gulp -vを実行し、バージョンが確認出来ればgulpを使う下準備は完了です。

gulpを動かしてみる

まずは実際にプロジェクトで動かす事を想定し、作業用のディレクトリを作成し移動します。
$ mkdir project
$ cd project

次にnode.js用のプロジェクトファイルを作成する為以下のコマンドを実行します。
いろいろと聞かれますが、今回はすべてデフォルト値で問題が無いため、未入力のままEnterを押していきましょう。
$ npm init

上記コマンドで以下のような内容のpackage.jsonが作成された事を確認しましょう。
以降処理に必要なgulpプラグインをインストールすると下記ファイルに追記されていきます。

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

gulpをローカルにインストールします。
$ npm install gulp --save-dev

glup -v を実行して下記のようにローカルにインストール出来ている事を確認します。
[15:41:36] CLI version 3.9.1
[15:41:36] Local version 3.9.1


gulpの挙動を制御する「gulpfile.js」という名前のファイルを作業用ディレクトリで作成し、以下のように記述して保存してみましょう。

var gulp = require('gulp');

gulp.task('default', function(){
     console.log('Hello World');
});

$ gulpを実行してみましょう。
お約束の「Hello World」という表示がターミナルに表示されていればgulpを使う準備ができました。

Scssをコンパイルしてみる

gulpを使う準備が整ったので、試しにscssファイルを監視し、自動的にコンパイルするタスクを作成して実行してみましょう。
作業用ディレクトリに移動し、gulp-sassをインストールします。
$ npm install gulp-sass --save-dev

今回は以下のようなファイル構成でScssのコンパイルをしてみようと思います。
gulp_project_file_organization


gulpfile.jsの内容を以下に更新。

var gulp = require('gulp');
var sass = require('gulp-sass'); //scssのビルドタスク

gulp.task('sass', function () {
    gulp.src('./assets/scss/**/*.scss') //scssのディレクトリを指定
        .pipe(sass()) //scssのコンパイルをする
        .pipe(gulp.dest('./public/css')); //コンパイル後の出力ファイル先を指定
});

この状態で$ gulp sassのコマンドを実行するとcssがコンパイルされ出力される事を確認します。

scssを変更する度にコマンドを実行するのは面倒なので、scssファイルを監視し自動的にコンパイルしてみましょう。gulpfile.jsの内容を以下に変更します。

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

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

//watchタスクを定義
gulp.task('watch', ['sass'], function(){ // sassタスクを実行後にファイルの監視を始める
    gulp.watch('./assets/scss/**/*.scss',['sass']); // scssファイルの変更を監視し、変更された場合はsassタスクを実行
})

この状態で$ gulp watchを実行後、scssファイルに変更を加えてみましょう。ファイルを変更し、保存すると自動的にcssファイルが出力されるはずです。

しかし、このままの状態ですとscssのコードでエラーとなる記述をして保存をした場合にgulpのwatchタスクが止まってしまい、再度$ gulp watchを実行しなければならない為、エラー時にも監視が止まらないようにしてみます。

gulp-sassのv2.x以降が入っている場合は以下を追記する事で監視が止まらないようになります。

        .pipe(sass().on('error', sass.logError))

また、gulpを使っていくうちに、scssの処理以外でもエラーが起きる場合もあると思いますので、gulp-plumberを利用するのも良さそうですね。

まとめ

今回はgulpを実際に動かし、scssを自動でコンパイルするというところまでを紹介しました。
gulpには他にも便利なプラグインが沢山あるので、色々なタスクを自動化をし、効率よく仕事が出来る環境を作っていきたいですね。

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

ug

ug

Designer

神奈川生まれのデザイナー。dwango入社を機にmacを使うようになったにわかマカーです。

ドワンゴデザイナー メンバー募集 ! !