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

執筆者:

関連記事

no image

CentOS5.8にnodebrewでnode.jsをインストール

github.com/hokaccha/nodebrew インストールは簡単

.bashrcに追加 [crayon-592701175 …

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

totalterminal.binaryage.com/ 普段は別のターミナルを使っているけど、ちょっとコマンド打ちたいってときにショートカットキーだけで呼び出せるから便利 ショートカットで上から小さ …

zshの機能と設定まとめ

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

macで賢くアプリ切り替え~witch

Witch – Many Tricks Mac OSXの切り替えはかなりイマイチ ubuntuのUnityとかならアプリを選んでから、そこからウィンドウの切り替えとかできるんだけど あと、 …

Macにzsh-completionsを導入&docker用のcompletionも導入

By: Nikolas Moya – CC BY 2.0 目次1 zsh-completions2 install3 .zshrc4 できた5 docker-zsh-completion6 …