Gulp超入門

この記事は以前書いた記事の続きになります。

www.pytry3g.com

前回コマンドをうってPugをコンパイルしていましたが、アプリケーションを開発する際にいちいちコマンドをうってコンパイルするのは面倒です。

しかし、ビルドツールのひとつgulpを使えばPugを自動的にHTMLにコンパイルすることができます。

この記事ではgulpを導入してElectronで実際に使ってみます。

関連リンク

gulp.js

Electron超入門 - どん底から這い上がるまでの記録

Pug超入門 - どん底から這い上がるまでの記録

Getting Started

この記事は以前書いた記事の続きです。

gulpのインストール

gulpはJavaScriptで書かれたビルドツールで、Node.jsがベースとなっています。

そのため、インストールはnpmを使ってインストールします。

作業ディレクトリに移動して下のコマンドを実行します。

npm i -D gulp

タスクを実行する

gulpはgulpfile.jsに書かれたタスク（作業）を自動的にやってくれます。

試しに以下のようなgulpfile.jsを書いてみます。

gulpile.jsは作業ディレクトリ直下に置いています。以前書いた記事で述べましたが、私はpug-tutorialというディレクトリで作業をしています。現在のディレクトリの中身はこんな感じです。

pug-tutorial/
    /node_modules
    gulpfile.js
    package.json
    index.js
    index.pug
    index.html

gulpfile.js

var gulp = require('gulp');

gulp.task('Run Gulp', function() {
  console.log("Hello Gulp!!!");
});

gulp.task("default", ["Run Gulp"]);

gulp.task()の第一引数がタスク名でこのコードでは２つのタスクRun Gulpとdefaultを定義しました。

Run GulpはコマンドプロンプトにHello World!!!と表示するだけのタスクです。

defaultはgulpをタスク名を指定しないで実行したときに実行されるタスクになります。

つまり、下のようにタスク名を指定しないで実行するとRun Gulpが実行されます。

> npx gulp
npx: installed 1 in 7.297s
Path must be a string. Received undefined
\pug-tutorial\node_modules\gulp\bin\gulp.js
[09:21:01] Using gulpfile \pug-tutorial\gulpfile.js
[09:21:01] Starting 'Run Gulp'...
Hello Gulp!!!
[09:21:01] Finished 'Run Gulp' after 3.36 ms
[09:21:01] Starting 'default'...
[09:21:01] Finished 'default' after 214 μs

ElectronでGulpを使う

Gulpのインストールが完了したので、Electronで使ってみます。

まずは、必要なモジュールをインストールします。

npm i -D gulp-plumber gulp-pug electron-connect

gulp-plumber

gulp-plumber - npm

タスク内でエラーを受け取ったときに、タスクを終了しないようにしてくれる。

gulp-pug

gulp-pug - npm

pugをHTMLに変換してくれる。

electron-connect

GitHub - Quramy/electron-connect: Livereload tool for Electron

Electronで次のことができるようになる。

1. アプリの起動
2. コードが変更されたらアプリを再起動する。
3. コードが変更されたら画面を再読み込みする。

コードを書く

ElectronでGulpを使うためにindex.pugとgulpfile.jsの内容を書き換え、新しくclient.pugとclient.js２つのファイルを作成します。

index.pug

doctype html
html
  head
    include client.pug
    meta(charset='utf-8')
    title Pug
    
  body
    h1 Hell

includeの部分を追加。client.pugを読み込むようにしている。

gulpfile.js

// モジュールを読み込む
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var pug = require('gulp-pug');
var electron = require('electron-connect').server.create();

// 拡張子がpugのファイルが変更されたとき、実行されるタスク
gulp.task('pug', function() {
  gulp.src("*.pug")
    .pipe(plumber())
    .pipe(pug( { pretty: true })) // htmlに変換するとき見た目をきれいにする
    .pipe(gulp.dest(".")); // コンパイル先
});

gulp.task('default', function() {
  // Electronの開始
  electron.start();
  // ファイルの監視
  // 拡張子がpugのファイルを監視する
  // ファイルが変更されるとタスクpugが実行される
  gulp.watch('*.pug', ['pug']);
  // 拡張子がhtmlのファイルを監視する
  // htmlのファイルが変更されると、Electronを再読み込み
  gulp.watch('*.html', electron.reload);
});

タスク pug

タスクpugでやっていることは全部で３つあります。

1. カレントディレクトリにある拡張子がpugのファイルを変更してエラーが出たときに、タスクを終了しないようにする。
2. HTMLに変換する際に見た目をきれいなものにする。
3. コンパイルしたものをカレントディレクトリに置く。

これら３つの処理はpipe()を使って連続して行われます。何か新しい処理を追加したいときはpipe()を追加して新しく処理を書くだけです。

タスク default

defaultのタスクはGulpを実行したときに最初に実行されるタスクです。

Electronを起動したあと、watchでファイルを監視しています。

watchを使うことにより、ファイルが変更されると指定したタスクが実行されます。

使い方は、gulp.watch([監視するファイル], [実行するタスク])になります。

client.pug

head
  script(src="client.js")

client.jsを読み込むためだけのファイル

client.js

require('electron-connect').client.create();

これがないとElectronが再読み込みされない。

Electronの起動

この時点でのディレクトリ構成はこんな感じです。

pug-tutorial/
    /node_modules
    gulpfile.js
    package.json
    client.js
    client.pug
    index.js
    index.pug
    index.html

gulpを使ってPugをHTMLに自動的にコンパイルする用意はできたので、下のコマンドで確認してみます。

npx gulp

上のコマンドを実行すると、Electronが起動します。Electronが起動している状態でindex.pugを適当にいじって保存してみると、HTMLが自動的に書き換えられElectronが再読み込みするはずです。

ここまで、Gulpの導入からElectronで実際に使ってみるところまでをやってみました。

今回は、ここまで。