Webデザイナーになる方法やサイト制作のテクニック・Tipsをご紹介

メニューを開く

設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」

CSS2014年11月15日

フロントエンド開発の際に今となっては不可欠である、ビルドツール「gulp.js」の導入手順についてご紹介いたします。

gulp.jsとは？

「Node.js」というjavascriptを利用して実装されたビルドシステムです。
ビルドツールを導入することで、フロントエンド設計時に行う様々なタスクを自動化・高速化することができます。

今後、フロントエンドエンジニアとして生き残るにはビルドツールの習得が不可欠となりますので、今のうちに身に付けておくことをお勧めします。

  • ※既に募集要項に必須スキルとして掲載している制作会社もあります

gulp.jsを導入することで便利になること

gulp.jsを導入することで、以下のような設計／実装時に発生する様々なタスクを自動化することが可能になります。

  • Sassを利用したcss設計
  • css3利用時のベンダープレフィックス付与
  • 画像の圧縮
  • cssの圧縮
  • 複数ファイルを1ファイルに結合
  • ブラウザの自動リロード（俗にいうライブリロード）
  • etc

それでは、gulp.jsの導入についてご紹介いたします。
なお、Windows環境での手順となります。
本記事では、以下のタスクを自動化するところまでをゴールとします。

  • Sassを利用したcss設計
  • css3利用時のベンダープレフィックス付与
  • cssの圧縮
  • jsの圧縮
  • ライブリロード

1.rubyをインストール

Sassを使うには、rubyの環境が必要となります。まずはrubyをインストールしましょう。

「RubyInstallers」内の最新版をダウンロード／インストールしてください。

  • ※PCが64bitの方は（x64）と表記のあるリンクをクリック

インストールの際、「Rubyの実行ファイルへ環境PATHを設定する」にチェックを入れてインストールしてください。

2.Sassをインストール

ターミナル（コマンドプロンプト）※を起動し、以下のコマンドを実行します。

gem install sass
  • ※以下、ターミナルと表記します
  • ※デスクトップ左下にあるWindowsボタンをクリックし、検索窓に「cmd」でターミナルが起動します

少し時間がかかります。しばらく待つとインストールが完了します。

3.Node.jsをインストール

次に、以下のページよりNode.jsをダウンロードします。

  • ※「INSTALL」からダウンロード／インストールしてください

インストールが終わったらターミナルから以下のコマンドを実行し、Node.jsがインストールされているかを確認します。

node -v

以下のような文字列が出力されればインストールは成功です。

v0.10.32

4.gulp.jsをインストール

次に、いよいよgulpをインストールします。ターミナルで以下のコマンドを入力してください。

npm install -g gulp

さらに、gulpを使用するディレクトリにgulpをインストールします。ターミナルで以下のコマンドを入力してください。

cd /d D:\gulp_test\
  • ※インストールするディレクトリを移動（指定）しています
  • ※D～はサンプルとなりますので、各々任意の場所を入力してください
  • ※インストールするディレクトリは予め作成しておいてください

インストールするディレクトリに移動したら、以下のコマンドを入力します。

npm install gulp

これでgulpがインストールされました。以下のコマンドでインストールされたことを確認しましょう。

gulp -v

以下の様な文字列が出力されればインストールは成功です。

CLI version 3.8.10
Local version 3.8.9

指定したフォルダに「node_modules」というフォルダが作成されていると思います。

5.プラグインをインストール

以下のタスクを自動化するため、いくつかのプラグインをインストールします。

  • Sassを利用したcss設計
  • css3利用時のベンダープレフィックス付与
  • cssの圧縮
  • jsの圧縮
  • 自動ローカルサーバ
  • ライブリロード

以下のコマンドを入力してください。
今回必要なプラグインを一括インストールします。

npm install --save-dev gulp-pleeease gulp-plumber gulp-ruby-sass gulp-uglify browser-sync

「node_modules」以下に、プラグインのフォルダが追加されていることを確認してください。

  • gulp-pleeease（ベンダープレフィックス付与、cssを圧縮）
  • gulp-plumber（エラーが起きてもファイル監視をやめない）
  • gulp-ruby-sass（Sass/cssを利用可能に）
  • gulp-uglify（jsの圧縮）
  • browser-sync（自動ローカルサーバ、ライブリロード）

6.gulpfile.jsを作成

gulpでは、自動化するタスクを「gulpfile.js」でコントロールします。
以下のソースを「gulpfile.js」というファイルでD:\gulp_test\に作成してください。

//plug-in
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var pleeease = require('gulp-pleeease');
var plumber = require('gulp-plumber');
var uglify = require('gulp-uglify');
var browser = require('browser-sync');

//sass
gulp.task('sass', function() {

gulp.src('sass/*.scss')//対象のscssファイルを指定
.pipe(plumber())//エラーがあってもファイル監視をやめない
.pipe(browser.reload({stream:true}))
.pipe(sass({
style: 'expanded'
}))

//prefix
.pipe(pleeease({
autoprefixer: {
browsers: ['last 2 versions']//プレフィックスを付与するバージョンを指定
},
minifier: true//圧縮を有効に
}))
.pipe(gulp.dest('css/'));
});

//js-min
gulp.task('js', function() {
gulp.src(['js_dev/*.js'])//対象のjsファイルを指定
.pipe(uglify({preserveComments:'some'}))//著作権コメントを残す
.pipe(gulp.dest('js'))//出力するjsファイルの格納場所を指定
.pipe(browser.reload({stream:true}))
});

//live reload
gulp.task('server', function() {
browser({
server: {
baseDir:'./'//ルートディレクトリを指定
}
});
});

//default
gulp.task('default',['server'],function() {
gulp.watch('sass/*.scss',['sass']);//監視対象のscssファイル
gulp.watch(['js_dev/*.js'],['js']);//監視対象のjsファイル
});

7.gulpの動作確認用ファイルを準備

ここまでくればあとひと踏ん張りです。
D:\gulp_test\js_dev\に「hoge.js」を以下のソースで作成してください。

(function() {
window.addEventListener('load', function() {
alert('ほげほげ');
});
})();

D:\gulp_test\sass\に「basic.scss」を以下のソースで作成してください。

@charset "utf-8";
body{
background:#333;
.hoge{
text-align:left;
width:300px;
display:flex;
}
}

D:\gulp_test\に「hoge.html」を以下のソースで作成してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gulpテスト</title>
<link rel="stylesheet" href="/css/basic.css">
<script src="/js/hoge.js"></script>
</head>
<body>
<h1>Gulpテスト</h1>
<p>ほげほげほげほげほげほげほげほげほげほげ</p>
</body>
</html>

これでGulpを動作させる準備が一通り整いました。
では、ターミナルでD:\gulp_test\まで移動し、以下のコマンドを入力してください。

gulp

gulpfile.jsで定義した"default"のタスクが実行され、自動的にhoge.htmlがブラウザに表示されます。あわせて、ライブリロード／scssの監視／jsの監視が始まります。
試しに、sass/basic.scssやjs_dev/hoge.jsを編集して保存してみましょう。自動的にcss/basic.cssや/js/hoge.jsが圧縮された形で出力されます。basic.cssを確認すると、ベンダープレフィックスも自動的に付与されています。
さらに、scssやjsの保存に反応してブラウザが自動的にリロードされるようになります。

また、ターミナルでどんな処理が行われているかを確認することができます。

8.まとめ

いかがでしたでしょうか。
個人的にはgulpのほうが同じビルドツールであるgruntよりも処理が軽快で、カスタマイズも容易なのでお勧めです。

本記事でご紹介した機能以外にも、gulpは様々な処理を自動化することができます。最初の学習はそこそこ敷居が高いかもしれませんが、まだまだ可能性が広がっていくツールですので、初期導入の際に本記事がご参考になれば幸いです。

この記事を読んでいる方にオススメの記事

「CSS」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

  • ※承認制のため、即時には反映されません。

ページの先頭に戻る