花びらを数える日々

チラシの裏、ときどき星の屑

初めてのGulp、Sass、EJSの環境構築 インストールからタスク設定まで!

昨日はブログを書かずに寝てしまったので、今日はその埋め合わせをしようと思う。 ウェブ制作の環境構築をしていたため、行ったことを記録しておく。動作環境はMacOS。WindowsOSの場合はまた違うのかも。

やること(やったこと)

前々から気になっていたSassにいい加減手をつけてみようと思った。ついでに同じく気になっていたタスクランナーにも手をつけてみようと思った。調べてみると、Gulpというものがいいらしい。タスクランナーではなくビルドツールと呼ぶのが正しいのかもしれないが、この辺りはまだよくわかっていない。

GulpとSassの実行可能な環境を作る。これが今回の目標。(追記:EJSもついでに使えるようになった。)

1.予習をする

まずは全体像をつかみ、そこから具体的な手段を学ぶ。

Schooという動画学習サービスがあるのだけれど、今回はこれで予習して、わからない部分をネットで調べた。Schooにはかれこれ3年ほど前(だったと思う)から有料会員として登録しており、これはいろいろな言語や制作技術の入門にはもってこいの内容が揃っている。動画という媒体は、深い知識を身につけるには時間がかかりすぎるし、復習にもあまり適していないと個人的には思うが、一方で、どこから手をつけたらいいかわからないような内容を学ぶには非常に良い。書籍等の他媒体よりも広い範囲の入門者を対象として設定しているようで(あるいはユーザーの特定が甘いという意見もあるかもしれないが)、そのおかげで非常にわかりやすい。おすすめ。

1-1.Sassの実行方法について

SassとはCSSメタ言語であり、SassとScssという二つの記法があるらしい。Scss記法は従来のCSSとほぼ変わらない記述方法をとれ、現在メジャーとのことだったので、こちらを学ぶことにした。学ぶと言っても、数分で理解できる簡単なものだった。これは使わなくては損だ。

SassをCSSに変換することをコンパイルというそうだ。様々な言語でこのコンパイルという行為があることは知っていたが、自分で行うのは初めてのことだ。使い慣れない専門用語が出現するとひどく面倒なことに思えるが、Sassのコンパイルは簡単だった。

実行方法にはいろいろあるらしい。専用のアプリケーションを使う方法もあるみたいだけれど、Gulpを使用すればプラグインを導入するだけで実行できるみたいなので、Gulpを使ってみることにした。

1-2.Gulpについて

Gulpは、様々な作業を自動化するためのツールだ。と、僕は認識している。前述したSassのコンパイルの他にも、画像の圧縮やファイルの複製なんかも簡単にできるらしい。最初は難しい印象を持っていたけれど、使ってみると思ったより簡単だった。作った人たちすごい。

2.前提となる準備

ここまでで、まず第一の目標はGulpの実行環境を整えることになった。そのためには、Node.jsのインストールが必要らしい。

2-1.Node.jsのグローバルインストー

幸い僕はNode.jsは以前使用することがあったため、すでにインストールが済んでいる。Node.jsはバージョン管理ツールを用いてインストールするのがいいみたいだけれど、直接インストールツールをダウンロードして実行してもいいみたい。僕はどうやってインストールしたか忘れてしまった。必要があればその時に再インストールしようと思う。

2-2.Gulpのグローバルインストー

次に、Gulpをグローバルインストールする。グローバルという言葉も変数やら何やらで使用するためもう聞きなれたが、多分1年前の僕は意味がわからなかっただろうな…。
簡単に言えば、どこからでも使えるように、といった意味合いだ。たぶん。

グローバルインストールには、次のコマンドを使用する。

npm install --global gulp-cli

2-3.プロジェクトフォルダの作成

サイトごとにデータを格納するプロジェクトフォルダを作成する。作業用フォルダ、というべきか。ここに、ローカルのGulpやプラグインをインストールする。

3.Gulpのインストー

ここから実際にインストールをしてみる。コマンドを入れていくだけなので、一度知ってしまえば難しくはない。

3-1.Gulp本体のインストー

まずは、作業用フォルダに移動する。

cd {作業用フォルダのパス}

次に、インストールするパッケージを管理するファイルpackage.jsonを作成する。

npm init

いろいろと聞かれるので答える。とりあえず使ってみるだけなら、全部Enterで飛ばしてしまってもいいらしいので僕はそうした。また必要な時に学ぼう。

そして、Gulp本体をインストールする。

npm install --save-dev gulp

これでOK。

3-2.Gulpで使用するプラグインのインストー

複数のサイトやブログを参考にした結果、今回Gulpで以下のタスクを行うことに決めた。

EJSとは、テンプレートエンジンと呼ばれるものらしく、HTMLの作成で役に立ちそうなので導入することにした。具体的には、インクルードや変数の使用ができるようになる。SassのHTML版のようなもの、というとわかりやすい(異なる部分はとても多いが)。最近はWordPress等でPHPを使うことの方が多いのだけれど、そのせいで余計にHTMLを書くのが億劫になっていたので丁度いい。

使用するプラグインとコマンドは以下。

画像圧縮プラグイン

npm install --save-dev gulp-imagemin

Sassプラグイン

npm install gulp-sass --save-dev

Sassコンパイル時にベンダープレフィックスを追加するプラグイン

npm install --save-dev gulp-autoprefixer

JSを圧縮するプラグイン

npm install gulp-uglify --save-dev

EJSプラグイン

npm install gulp-ejs --save-dev

インストールされているプラグインを確認するには、先ほど作成したpackage.jsonを見るか、以下のコマンドを使用する。

npm ls --depth=0

4.ディレクトリの整理

Gulpを使用する準備は整ったのだけれど、ここで先に使用するフォルダの構造を整えておく。僕は、次のような形にした。

  • project
    • develop //開発用フォルダ
      • images
      • sass
      • js
      • ejs
    • release //出力先フォルダ
      • images
      • css
      • js
    • (node_modules)

5.gulpfile.jsの作成

最後に、Gulpで実行するタスクを指定するファイル「gulpfile.js」を作業ディレクトリ直下に作成して、必要な記述をする。
記述内容は以下のようになったが、ここについては他のブログ等での説明が詳しい。EJSに関しては、フォルダ構造もコピーして出力するよう指定した。

//gulp本体の読み込み
var gulp = require('gulp');

//Sassコンパイル&ベンダープレフィックス追加
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

var sassPath = {
  src: 'develop/sass/**/*.scss',
  dest: 'release/css',
  watch: 'develop/sass/**'
};
var options = {
  outputStyle: 'compressed',
  sourceMap: true,
  sourceComments: false
};
var autoprefixerOptions = {
  browsers: ['last 3 version', 'ie >= 6', 'Android 4.0']
};

gulp.task('sass', function() {
  gulp.src(sassPath.src)
    .pipe(sass(options).on('error', sass.logError))
    .pipe(autoprefixer(autoprefixerOptions))
    .pipe(gulp.dest(sassPath.dest));
});

//画像圧縮
var imagemin = require('gulp-imagemin');

var imageminPath = {
  watch: 'develop/images/**'
};

gulp.task('minify-img', function() {
  gulp.src('develop/images/*.png')
    .pipe(imagemin())
    .pipe(gulp.dest('release/images'));
  gulp.src('develop/images/*.jpg')
    .pipe(imagemin())
    .pipe(gulp.dest('release/images'));
  gulp.src('develop/images/*.gif')
    .pipe(imagemin())
    .pipe(gulp.dest('release/images'));
});

//JS圧縮
var uglify = require('gulp-uglify');

var uglifyPath = {
  src: 'develop/js/*.js',
  dest: 'release/js',
  watch: 'develop/js/**'
};

gulp.task('minify-js', function() {
  gulp.src(uglifyPath.src)
    .pipe(uglify())
    .pipe(gulp.dest(uglifyPath.dest));
});

// EJS
var ejs = require('gulp-ejs');

var ejsPath = {
  src: ['develop/ejs/**/*.ejs','!' + 'develop/ejs/**/_*.ejs'],
  dest: 'release/',
  watch: 'develop/ejs/**'
};

gulp.task('ejs', function() {
  gulp.src(ejsPath.src, {base:'develop/ejs/'})
    .pipe(ejs({}, {}, {'ext': '.html'}))
    .pipe(gulp.dest(ejsPath.dest))
});

//監視タスクの設定
gulp.task('default', function(){
  gulp.watch([sassPath.watch], ['sass']);
  gulp.watch([imageminPath.watch], ['minify-img']);
  gulp.watch([uglifyPath.watch], ['minify-js']);
  gulp.watch([ejsPath.watch], ['ejs']);
});

6.動作確認

上記のgulpfile.jsでは、defaultに監視タスクを設定した。これは、gulpコマンドで実行できる。タスクを個別で実行する際には、gulp {タスク名}のコマンドでOK。

6-1. Atomでの実行

僕はエディタにAtomを使っているので、いちいちターミナルを使わずにGulpを実行できるよう「gulp-control」というプラグインを入れた。開いているプロジェクトに応じて設定されているタスクをクリックで起動・停止できる。Atomユーザーならほとんどが使っているであろう「Project Manager」プラグインとセットで使うと非常に便利。ちなみに僕はtool-barとflex-tool-barプラグインを使って常時表示されるボタンに設定した。プラグインの制作者様には、心から感謝している。ありがとうございます!

7.課題

ここまでで、目的としていた動作は実現できるようになった。一つ課題として残っているのは、ファイルの変更があった際にすべてのファイルに対して圧縮処理等が行われてしまうことだ。できることなら変更のあったファイルにだけ処理を実行したいところだけれど、今は小規模なサイトしか作らないし、特に困るわけでもないので放置することにした。時間があるときに改善しよう。