MacOSX node.js

gulpでelectronをlivereloadしながらcoffeeとsassで開発する環境

投稿日:2016年1月25日 更新日:

package.json

gulpfile.coffee

多くはドットインストールを参考にした.
gulp入門 (全12回)
gulpでは-require オプションでCoffeeScriptなどのaltjsのファイルもgulpfileとして使える

electron-connect

electron.reloadを機能させるには、レンダラプロセスで次の記述が必要.
配布時には削除する必要がある. 参照:ぼくのかんがえたさいきょうのElectron

gulp.watchがファイルの作成や削除に反応しない問題

gulp-watchプラグインを使ったら、うまくいった.
なお、gulp-watchでも’./’で始まるアドレスだとうまくいかない. 参照:Gulps gulp.watch not triggered for new or deleted files?

gulp-notify

デスクトップ通知
タスクの最後に通知するには、{onLast: true}を付加する.
How do I process a notification in gulp after all tasks are complete?

bower + browserify

node_modulesにはdev用のライブラリもあり、すべてパッケージングするのは得策ではない.
そこで、依存するライブラリは、bowerの方でインストールして、browserifyでまとめてしまうのがよさそう.

bower

まず、インストール

次に、bower.jsonファイルをつくる

Windowsのgit-bashからやろうとすると、なぜかエラーになる.
PowerShellからやればエラーなく作成できる.

ライブラリのインストール

browserify

browserifyは、Javascript内でrequireしたライブラリをいい具合にまとめてくれる.
ここで、electronの場合は、requireをもともとよしなにしてくれるので、バッティングしてしまう.
具体的には、jQueryとかはbrowserifyにしたいけど、ipcRendererとかelectron固有のライブラリをrequireするときはそのままにしたい.

そこで、electron固有の場合は、window.requireを使えばOK

さらに、coffeeifyでcoffeeファイルをコンパイルして、debowerifyでbowerからうまく読み込んでくれる.
この設定はPackage.jsonでしておく必要がある.

結果

ストップウォッチ

ドットインストールを参考に.ドットインストールのJavascriptの練習はElectron化に調度良い素材かもしれない.
JavaScriptでストップウォッチを作ろう (全8回)

screenshot

main.coffee

index.coffee

こっちは適当にjQueryを使ってみた.

index.html

index.scss

-MacOSX, node.js
-,

執筆者:

関連記事

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

By: Jean-Pierre Dalbéra – CC BY 2.0 目次1 はじめに2 require3 メニュー4 gulpfile.coffee5 できた はじめに 今後は、Ele …

GoogleHomeに好きな言葉をしゃべらせる〜google-home-notifier

By: Sabrina Eras – CC BY 2.0 目次1 Google Home2 google-home-notifier Google Home Google Homeは言わず …

zshの機能と設定まとめ

By: Marsha Wheatley – CC BY 2.0 目次1 zsh機能の紹介 ニコニコ動画2 環境3 colors 色の設定4 Completion 補完機能5 Correct …

ミニドローンTelloをScratch2でプログラミングして飛ばしてみる

By: Christopher Schmidt – CC BY 2.0 目次1 Telloとは2 Scratch23 専用ソフトのダウンロード4 Scratch2オフラインエディターにTe …

MacでQuake風ターミナルを使おう〜TotalTerminal

目次1 total terminalはel capitan以降で使えなくなりました2 total terminalの旧記事 total terminalはel capitan以降で使えなくなりました …