ゲームプログラミングレシピ集

【ブロガー必見】node.jsで始めるタスク自動化！gulp入門

javascript

gulp 入門

こんにちは。継続の錬金術士なおキーヌです。

昨日はnode.js入門の記事を書いたので、今日はWordpressのブログテーマ作りがすごく便利になる
node.jsライブラリであるgulp入門をしてみましょう。

この記事の内容
gulpの簡単な解説
gulpの導入と初めてのSASS(SCSS)を体験してみる

gulpとはタスクを自動化することが可能

結論から言ってしまうと、タスク自動化ツールです。

タスクとは、CSSをプログラミングチックに書けるSASS(scss)をコンパイルしたり、
モダン風に書いたjavascriptを古いブラウザようにトランスパイル(コンパイルの逆)したり
画像を圧縮したり、書いたjavascriptを圧縮してファイルサイズを小さくしたりetc…

Web制作をしているとこのような細かい面倒くさい作業がいっぱい出てきます。

毎回同じコマンドを打ち込んで実行するだけなのですが、段々と面倒臭くなってきます。

一連の流れは決まってるのに手動でやるのはバカバカしい！ってことを解決できるのがgulpです。

タスクを実行する順番も自由に決められるのでこの順番じゃないとダメ！ということにも
柔軟に対応できるのですごく便利ですね。

Node.jsのタスク自動化ツールはgulpのほかにもよく対比にされるgruntというツールもあるのですが
私自身がgulpしか使ったことが無いので比較の仕様がないので今回はgulpを紹介します。

Node.js入門はインストールの解説でダラダラしちゃったので今回はパパっとgulpを体験してみましょう！

まだNode.jsをインストールしていない方は「javascriptでプログラミングを始めるためのNode.js入門」にてインストールをしてからgulp入門をしてください。

それではNode.jsでgulpをインストールしましょう。

  1. gulpをインストールする
  2. SassってCSSとどう違うの？
  3. gulpでscssコンパイルのタスク実行を自動化してみる

gulpをインストールする

タスクの自動化

それではWindowsの方はコマンドプロンプト、Macの方はターミナルを起動してください。

クリーンな状態で始めたいので、前回Creat-react-appをインストールした方は
一旦全部削除してしまっても構いません。

npm init
npm install gulp@3.9.1 gulp-sass

これだけで完了です。

※現行、gulpはv4ですが記述が複雑になったので今回慣れているv3でやっています。

gulpだけだと最新版がインストールされますので@3.9.1と明示的にバージョンを指定すると
そのバージョンのライブラリをインストールすることが出来ます。

これは結構重要で、メジャーバージョンがあがると今までのバージョンだと使えてたことが使えなくなることはよくあります。
そういう時はバージョン指定をして古いバージョンのものを使うことをおススメします。

話が反れたので戻します。

gulpを使うためにgulpの設定ファイルを作らなければいけません。

これは手動で作成してください。

「gulpfile.js」という名前でjavascriptファイルを作成してください。

そして下記のコードをコピペしてください。

打ち込んでも構いませんが、初見だと何してるかわかり辛いと思うのでコピペでも構いません。

今回はgulpを使うことにフォーカスを当てていますので、細かいコードの解説はまた別の記事で使用と思います。

一応コメントで何をしているかは書いていますので、興味があったら見てください。

// gulpライブラリ読み込み
var gulp = require('gulp');
// gulpでsassを扱う為のライブラリ読み込み
var sass = require('gulp-sass');

// sassをコンパイルするタスク
gulp.task('sass', function(){
  // コンパイル対象のソースを設定
  gulp.src('./sass/**/*.scss')
    // パイプメソッドを使ってsassの出力設定をする
    .pipe(sass({outputStyle: 'expanded'}))
    // パイプメソッドを使って出力先を設定する
    .pipe(gulp.dest('./css/'));
});

// sassを自動コンパイルする監視用タスク
gulp.task('sass-watch', ['sass'], function(){
  // 監視対処を設定
  var watcher = gulp.watch('./sass/**/*.scss', ['sass']);
  // change(保存が行われたら動かす命令)イベント
  watcher.on('change', function(event) {
  });
});

// gulpを何も指定なしで実行した時に動かすタスク
gulp.task('default', ['sass-watch']);

上記のコードをgulpfile.jsに貼り付けて保存してください。

2つタスクがありますね。1つずつ説明していきます。

sassタスク

コードを読んでもらったらわかるのですが、sassタスクはsassディレクトリに.scssというファイルを、
distディレクトリにcssにコンパイルして吐き出すという処理を行っています。

sass-watchタスク

読んで字のごとく、scssファイルを監視しつつ更新があったらsassタスクを実行するというタスクです。

今回はscssしか監視していませんが、これに加えてjavascriptやhtmlファイルなんかも
監視対象にしてそれぞれのタスクを実行させられるというのが、このgulpの魅力です。

今回は見通しが良いようにsassだけにしています。

SassってCSSとどう違うの？

タスクの自動化

勘が良い人はお気づきかと思いますが、sassとscssという名称があります。
実際に使うのはscssなのですが、違いは以下になります。

Sassとは

CSSを拡張したメタ言語のこと。
いわゆるファイル名とかではなく言語の名前です。

JavaScript = Sassで、.js = .sass or .scss　という感じです。

sassとは

Sassは言語名でsassはファイルの拡張子ですね。
私はいきなりscssを使ったので使ったことが無いのですが
書き方はPythonに似てる感じでしょうか？

コード例を載せるとこんな感じになります。

div
    font-size:1rem
    p
        margin: 20px
        span
            color: #ff00000;

特徴としてはインデントで階層を表す感じです。
かっこもいらないので、Pythonをやっている人は馴染みやすいのではないでしょうか？

ソースコードの意味としてはDIVタグ全てにfont-size:1remを適用。

そして親となるDIVタグの中にある子のPタグ全てにmargin:20pxを適用。

そしてさらにPタグの中にあるSPANタグにcolor:#ff0000(赤色)を適用。

後はセミコロンが最後にしかつけないということです。

これをコンパイルすると以下のようなCSSに変換されます。
(実際はもうちょっと綺麗にコンパイルされますが例ということで許してください)

div { font-size:1rem; }
div > p { font-size:1rem; margin:20px; }
div > p > span { font-size:1rem; margin:20px; color:#ff0000; }

scssとは

sassと基本的な機能は同じですが、記載方法がCSSに近い感じです。
CSSを長らく手動で書いてきた人にとってはこちらの方が馴染みやすいかもしれません。

私も元プログラマではなかったので、未だにscssを使っています。
こっちの方が個人的に読みやすいし、CSSぽいのでsassに乗り換えるつもりはないです。

一応コード例を載せておきます。

div {
  font-size:1rem;
  p {
    margin: 20px;
    span {
      color: #ff00000;
    }
  }
}

吐き出しCSSはsassと変わらないので省略します。

sassとscss、これだけだとあまりメリットが無いように見えますが、
実は変数等を使ってプログラムチックに書けることがSassの魅力なのです。

下記に変数を使用したscssの例を載せておきます。
sassもほとんど変わらないと思いますが、わからないのでscssにしています。

$font_color = #ff0000;
$font_size = 1rem;
$margin_size = 20px;

div {
  font-size:$font_size;
  p {
    margin: $margin_size;
    span {
      color: $font_color;
    }
  }
}

少しプログラミングをしたことがある人ならすごく便利になると思います。

これはコードが少ないからあまりメリットを感じられませんが、どんどんソースコードが長くなると
色を変えたりサイズを変えたりしたいとき、1つ1つ直していかなければなりません。

変数を使っておけば、そこを変更すればすべて変更されますので便利ですね。

gulpでscssコンパイルのタスク実行を自動化してみる

タスクの自動実行

解説が続いてしまったので、さっそくgulpの自動タスク実行を実感してみましょう。

まずは現在のディレクトリに「sass」「dist」の2つのディレクトリを作成してください。
方法は問いません。右クリ新規作成でもいいですmkidrコマンドでも大丈夫です。

そして「sass」ディレクトリに「test.scss」というファイルを作成してください。

このファイルの中身は先ほどscssの項目で記述したコードをコピペで問題ありません。

保存したら、コマンドプロンプトもしくはターミナルを使って下記のコマンドを入力してください。

# windowsはコレ
.\node_modules\.bin\gulp
# Macはコレ
./node_modules/.bin/gulp

実行すると、StartingやらFinished等の文字が出て止まります。

この状態でファイルを更新すると、自動的に再コンパイルしてくれる監視モードになっています。

試しにscssのファイルの中身を変えてみてください。
フォントカラー等を変えてみると良いでしょう。

保存する時に黒い画面を見てみると動き始めるんのが分かると思います。

distディレクトリを見るとcssファイルが出力されているので中身を確認すると更新されているのがわかります。

監視モードを終了する時は「Ctrl+C」を押すと終了するか聞かれるので「y」を押してgulp監視モードを終了します。

gulpに限らず、黒い画面での終了は基本的にこのコマンドを使うので覚えておきましょう。

監視はせずにscssコンパイルだけを動かす

何も指定しないままgulpを動かすとdefaultで設定した監視モードが動きますが
scssのコンパイルを1回だけやってくれればいいという時は下記のコマンドで明示的にタスクを指定します。

# windowsはコレ
.\node_modules\.bin\gulp sass
# Macはコレ
./node_modules/.bin/gulp sass

実行するとコンパイルだけして終了してくれます。

これでgulpの基本的な使い方は完了です。
後は自分の自動化したいタスクを組んで便利にしていくといいですよ。

慣れるまでは何が出来るのかが分からないのでどうしようもないですが
gulpで色々ググってみると面白い使い方や便利な使い方が見つかるかもしれません。

私はテーマを作るときに仮想サーバーを建ててブラウザでチェックしながら保存したら自動で更新してくれるように組んでいます。

圧倒的に開発が楽になりますので、自分好みのタスク自動化を作り上げてみましょう！

──ブログ毎日更新は83日目。

gulpはWebフロントエンド界隈では知らぬ人は殆ど居ないと思いますが、
逆にWeb界隈に居ないと殆ど聞くこともないんですよね。

Web制作以外にも便利な機能がいっぱいあるのでブロガーは絶対に覚えておくべきです。

自動化できるとそれだけで無駄な時間使わずに済むので、時間が惜しい継続民は絶対にやるべきですね。

それでは。

関連記事