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でmaterialize

By: Vancouver Film School – CC BY 2.0 目次1 Materialize2 bower3 sass4 browserify5 できた Materializ …

macでpython3をはじめる〜pyenv

By: Kathleen Franklin – CC BY 2.0 目次1 pyenvのインストール2 ubuntuにpyenvのインストール3 python3のインストール4 インストー …

RaspberryPI3のNode-REDでHello World

By: Harry Rose – CC BY 2.0 目次1 Node-RED2 インストール3 Hello World Node-RED Node-REDはハードウェアデバイス/APIお …

GoogleHomeとRaspberryPi3で赤外線リモコンを操作する〜ADRSIR

By: Fujitaka Daidoji – CC BY 2.0 目次1 ADRSIR2 IFTTTとfirebase3 node.js4 pm2 ADRSIR ADRSIRは、ラズベリー …

Ubuntu12.04にnode6.9をインストール~nodebrew

By: Kazuyoshi Kato – CC BY 2.0 目次1 nodebrew自身のアップデート2 nodebrewでnode6.9をインストール3 yarnのインストール nod …