LoginSignup
52
61

More than 5 years have passed since last update.

@HayneRyo(Ryo Hayne)inコードキャンプ株式会社

gulp.jsを用いたフロントエンド開発環境の構築

Last updated at Posted at 2015-04-23

前置き、概要説明

今回は、フロントエンド開発に最低限必要であろう構成で環境を構築します。

  • SASSコンパイル(Compassを利用)
  • CoffeeScriptコンパイル
  • CSS 及び Javascript ミニファイ
  • ファイル及びディレクトリの監視とタスク実行

本記事では各種ライブラリを利用する関係上、Node.js及びRubyが既にインストールしてあることを前提としています。インストールに関しては下記リンクを参照して下さい。

gulp.js環境インストール

gulp.jsとはタスクランナーと呼ばれるツールです。

CoffeeScriptやSASSなど、昨今はフロントエンド環境でもコンパイルが必要となりました。他にもソースコードのミニファイなど様々な作業＝タスクが発生します。これら複数のタスクを逐一、コマンドを叩き処理するのはどうしても手間になります。

タスクランナーはファイルを監視し、コンパイルなどのタスクを自動化してくれます。類似ツールにはGruntなどがあります。

1. gulp.jsをインストールする

npm初期化、package.jsonの生成を行います。

ターミナル
$ npm init

このpackage.jsonにはインストールされたnpmライブラリのリストなどの情報が追加され、自分以外の作業者でも同一環境を構築することを容易にします。

次にgulp.jsをインストールします。

ターミナル
$ npm install --save-dev gulp

これによりプロジェクトのディレクトリ配下(node_modules)にローカルインストールされます。
逆にシステム全体に対してグローバルインストールする方法もあり、その場合はオプション-gを付けてインストールします。

また、installのオプションには--saveや--save-devが存在します。この--saveオプションを指定することでpackage.jsonにインストールするライブラリが追記されて他作業者との同一環境が担保されます。--save-devは開発環境のみでのインストールを指定します。

インストールされことを確認します。

ターミナル
$ gulp -v
CLI version 3.8.11
Local version 3.8.11

2.SASSコンパイル環境の構築

今回、SASSのコンパイルにはCompassを利用します。
CompassとはSASSコンパイルの他、スプライト画像の生成などコーディングに便利なヘルパー機能を内包しているRubyのgemライブラリです。なので、はじめにBundlerを用いてCompassをインストールします。

2-1.Compassインストール

Bundler初期化、Gemfileの生成を行います。これは先述のnpm initのBundler版だと思って下さい。

ターミナル
$ bundle init

次に生成されたGemfileにインストールしたいgemライブラリ名を記述します。今回はCompassを追記します。

Gemfile
gem "compass"

実際にgemライブラリをインストールします。

ターミナル
$ bundle install --binstubs --path vendor/bundle

オプション--pathを用いてプロジェクト配下にインストールします。このオプションを忘れてしまうと、システム(rbenvの適応されているRubyバージョン配下)にインストールされてしまいます。

また、オプション--binstubsを付けると実行ファイルを./binに生成してくれます。
※注：このオプションはRails4で行うとRailsのbinを上書きしてしまうらしいので注意が必要です。

実際にインストールされたことを確認します。

ターミナル
$ compass -v
Compass 1.0.3 (Polaris)
Copyright (c) 2008-2015 Chris Eppstein
Released under the MIT License.
Compass is charityware.

ここまでで、Compassのインストールが完了しました。

2-2.gulp.jsの設定

gulp.jsでCompassを利用する為のライブラリをインストールします。

ターミナル
$ npm install --save-dev gulp-ruby-sass

gulp.jsの設定ファイルを用意します。

gulpfile.js
'use strict';

var
  gulp    = require('gulp'),
  compass = require('gulp-compass')
;

gulp.task('sass',function(){
  gulp
    .src('./src/sass/**/*.sass')
    .pipe(compass({
       config_file: './config/compass.rb',
       comments   : false,
       css        : '../public/css/',
       sass       : './src/sass/'
    }));
});

抜粋しながら記述の説明します。

gulpfile.js(3行目)
var
  gulp    = require('gulp'),
  compass = require('gulp-compass')
;

ここでは必要なnpmパッケージをrequireで読み込んでいます。ここで読み込むのは、先程のnpm installでインストールしたライブラリです。

gulpfile.js(8行目)
gulp.task('sass',function(){
  gulp
    .src('./src/sass/**/*.sass')
    .pipe(compass({
       config_file: './config/compass.rb',// Compass設定ファイル
       comments   : false,
       css        : '../public/css/',     // css出力先
       sass       : './src/sass/'         // sass読込元
    }));
});

ここではタスク定義を行っています。Compassメソッドの設定ファイル、引数については説明を割愛します。

タスク定義は基本的に下記のような記法となります。

タスク記述例
gulp.task('タスク名',function(){
  gulp
    .src('対象ファイル')
    .pipe(行いたい処理)
    .pipe(行いたい処理)
    ....
    .pipe(gulp.dest('出力先'))
});

pipe(行いたい処理)の処理の部分にはrequireで読み込んだライブラリを用います。pipeメソッドは出力を引き継ぎ、チェーンすることで重ねて処理を掛けることも可能です。最終的にdestメソッドで出力を行います。
※注:本項のCompassのようにプラグイン自体が出力する場合はdestメソッドは使わないこともあります。

定義したタスクが動くか確認します。gulp タスク名で定義されたタスクが実行されます。

SASSファイルを設定した読込元ディレクトリに保存して下記コマンドを実行します。

ターミナル
$ gulp sass

設定した出力先ディレクトリに出力されれば成功です。

3.CoffeeScriptコンパイル環境の構築

SASSコンパイル環境と同様に、CoffeeScriptコンパイル環境を用意します。SASSコンパイル環境と異なり、利用するのはnpmライブラリのみです。

CoffeeScriptをコンパイルする為のライブラリをインストールします。

ターミナル
$ npm install --save-dev gulp-coffee

gulp.jsの設定ファイルを用意します。記法は前述の通りです。

gulpfile.js
'use strict';

var
  gulp    = require('gulp'),
  compass = require('gulp-coffee')
;

gulp.task('coffee',function(){
  gulp
    .src('./src/coffee/**/*.coffee')
    .pipe(coffee())
    .pipe(gulp.dest('./src/js/'));
});

CoffeeScriptファイルを設定した読込元ディレクトリに保存して下記コマンドを実行します。

ターミナル
$ gulp coffee

設定した出力先ディレクトリに出力されれば成功です。

4.ソースコードのミニファイ

ミニファイとはいわゆる圧縮、余分なスペース、改行、インデントなどの不要なバイトを取り除くことです。CSS、JavaScriptを圧縮すると、ダウンロード、解析、実行時の速度を向上させることができます。

ミニファイに必要なライブラリをインストールします。

ターミナル
$ npm install --save-dev gulp-uglify gulp-minify-css

gulp.jsの設定ファイルを用意します。記法は前述の通りです。

gulpfile.js
'use strict';

var
  minifyCss = require('gulp-minify-css'),
  uglify    = require('gulp-uglify'),
;

gulp.task('minifyCSS',function(){
  gulp
    .src('./src/css/**/*.css')
    .pipe(minifyCss())
    .pipe(gulp.dest('../public/css/'));
});

gulp.task('minifyJS',function(){
  gulp
    .src('./src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('../public/js/'));
});

SASS、CoffeeScript両ファイルをコンパイルし、さらにミニファイしてみます。

ターミナル
# SASSをCSSにコンパイル
$ gulp sass
# 出力したCSSをミニファイ
$ gulp minifyCSS

# CoffeeScriptをJSにコンパイル
$ gulp coffee
# 出力したCSSをミニファイ
$ gulp minifyJS

設定した出力先ディレクトリに出力されれば成功です。

5.監視と処理の自動化

ファイルの更新を行う度に上記のコマンドを毎回実行するのはひと手間です。そこで、gulp.jsのファイルを監視し続けて、変更があった場合にタスクを実行するという機能を活用します。

gulpfile.js
gulp.task('default', function(){
  gulp.watch('./src/sass/**/*.sass',     ['sass']);
  gulp.watch('./src/css/**/*.css',       ['minifyCSS']);
  gulp.watch('./src/coffee/**/*.coffee', ['coffee']);
  gulp.watch('./src/js/**/*.js',         ['minifyJS']);
});

監視とタスク実行にはwatch()メソッドを利用します。書式は下記の通りです。

watchメソッド記述例
gulp.watch('監視対象ファイル', 実行タスク名);

また、gulp.task('default',function(){});のようにタスク名にdefaultを用いると、下記のようにgulpの引数を渡さず実行出来ます。

ターミナル
$ gulp

上記を実行したまま、該当ファイルを更新して出力出来れば成功です。

6.まとめ

今回作成したgulpfile.jsの全容は下記となります。

gulpfile.js
'use strict';

var
  gulp        = require('gulp'),
  compass     = require('gulp-compass'),
  coffee      = require('gulp-coffee'),
  minifyCss   = require('gulp-minify-css'),
  uglify      = require('gulp-uglify'),
  SASS_FILE   = './src/sass/**/*.sass',
  COFFEE_FILE = './src/coffee/**/*.coffee',
  CSS_FILE    = './src/css/**/*.css',
  JS_FILE     = './src/js/**/*.js'
;

gulp.task('sass',function(){
  gulp
    .src(SASS_FILE)
    .pipe(compass({
       config_file: './config/compass.rb',
       comments   : false,
       css        : '../public/css/',
       sass       : './src/sass/'
    }));
});

gulp.task('coffee',function(){
  gulp
    .src(COFFEE_FILE)
    .pipe(coffee())
    .pipe(gulp.dest('./src/js/'));
});

gulp.task('minifyCSS',function(){
  gulp
    .src(CSS_FILE)
    .pipe(minifyCss())
    .pipe(gulp.dest('../public/css/'));
});

gulp.task('minifyJS',function(){
  gulp
    .src(JS_FILE)
    .pipe(uglify())
    .pipe(gulp.dest('../public/js/'));
});

gulp.task('default', function(){
  gulp.watch(SASS_FILE,   ['sass']);
  gulp.watch(CSS_FILE,    ['minifyCSS']);
  gulp.watch(COFFEE_FILE, ['coffee']);
  gulp.watch(JS_FILE,     ['minifyJS']);
});
52
61
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
52
61