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
-,

執筆者:

関連記事

デスクトップアプリを作成できるフレームワークをWindowsで触ってみた~Electron

By: Adam Jenkins – CC BY 2.0 目次1 Electron2 前提3 electronのインストール4 Hello World5 パッケージング6 DevTool7 …

no image

socket.ioでリアルタイムチャット

目次1 環境2 準備3 サーバー側~express4 socket.ioのイベント駆動5 サーバー側~socket.io6 クライアント側7  接続者全員にメッセージを流したいので修正8  情報 環境 …

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …

PythonやRなどのインタラクティブ実行環境Jupyter Notebookをインストールする

By: tonynetone – CC BY 2.0 目次1 Jupyter Notebook2 環境3 インストール4 実行5 Python実験環境6 R環境のインストール7 Ruby環 …

Electronで簡単にMac風UI〜Photon

By: Patrick Hoesly – CC BY 2.0 目次1 Photon2 gulpfile.coffee3 index.scss4 Todolistに適用する5 できた Pho …