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-5da670505 …

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

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

VImで日本語マークダウンを編集する〜textlint、tagbar

目次1 最初に2 校正〜textlint3 ヘッディング一覧〜tagbar4 リアルタイムプレビュー5 markdownからdocxへの出力6 その他 最初に 突然、vimで日本語のmarkdownを …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

RaspberryPI3のNode-REDでHello World

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