この記事は以前書いた記事の続きになります。
前回コマンドをうってPugをコンパイルしていましたが、アプリケーションを開発する際にいちいちコマンドをうってコンパイルするのは面倒です。
しかし、ビルドツールのひとつgulpを使えばPugを自動的にHTMLにコンパイルすることができます。
この記事ではgulpを導入してElectronで実際に使ってみます。
関連リンク
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
gulp.task()
の第一引数がタスク名でこのコードでは2つのタスク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-pug
pugをHTMLに変換してくれる。
electron-connect
GitHub - Quramy/electron-connect: Livereload tool for Electron
Electronで次のことができるようになる。
- アプリの起動
- コードが変更されたらアプリを再起動する。
- コードが変更されたら画面を再読み込みする。
コードを書く
ElectronでGulpを使うためにindex.pug
とgulpfile.js
の内容を書き換え、新しくclient.pug
とclient.js
2つのファイルを作成します。
index.pug
include
の部分を追加。client.pugを読み込むようにしている。
gulpfile.js
タスク pug
タスクpug
でやっていることは全部で3つあります。
- カレントディレクトリにある拡張子がpugのファイルを変更してエラーが出たときに、タスクを終了しないようにする。
- HTMLに変換する際に見た目をきれいなものにする。
- コンパイルしたものをカレントディレクトリに置く。
これら3つの処理はpipe()
を使って連続して行われます。何か新しい処理を追加したいときはpipe()
を追加して新しく処理を書くだけです。
タスク default
defaultのタスクはGulpを実行したときに最初に実行されるタスクです。
Electronを起動したあと、watch
でファイルを監視しています。
watch
を使うことにより、ファイルが変更されると指定したタスクが実行されます。
使い方は、gulp.watch([監視するファイル], [実行するタスク])
になります。
client.pug
client.jsを読み込むためだけのファイル
client.js
これがないと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で実際に使ってみるところまでをやってみました。
今回は、ここまで。