React + Babel + Sass + Gulp + Bower な Electron Boilerplate

また新しい Electron Boilerplate が増えました。

- https://github.com/superbrothers/electron-boilerplate

これから何か作ろうと思って必要そうなものを詰め込んでいます。

- [Electron](http://electron.atom.io/)
- [A JavaScript library for building user interfaces | React](http://facebook.github.io/react/)
- [Babel · The compiler for writing next generation JavaScript](https://babeljs.io/)
- [Sass: Syntactically Awesome Style Sheets](http://sass-lang.com/)
- [gulp.js - the streaming build system](http://gulpjs.com/)
- [Bower](http://bower.io/)

```json:package.json
{
  "name": "electron-boilerplate",
  "version": "1.0.0",
  "description": "A electron app template with React, babel, sass, gulp and bower",
  "main": "main.js",
  "scripts": {
    "gulp": "gulp",
    "bower": "bower",
    "lint": "gulp eslint",
    "dev": "gulp build && (electron .tmp & gulp watch)",
    "release": "NODE_ENV=production gulp release",
    "test": "echo \"noop\" && exit 0",
    "precommit": "npm run lint"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/superbrothers/electron-boilerplate.git"
  },
  "author": "Kazuki Suda <kazuki.suda@gmail.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/superbrothers/electron-boilerplate/issues"
  },
  "homepage": "https://github.com/superbrothers/electron-boilerplate#readme",
  "dependencies": {
    "react": "^0.14.0-rc1",
    "react-dom": "^0.14.0-rc1"
  },
  "devDependencies": {
    "babel-core": "^5.8.24",
    "bower": "^1.5.2",
    "del": "^2.0.0",
    "electron-packager": "^5.1.0",
    "electron-prebuilt": "^0.31.1",
    "eslint": "^1.3.1",
    "eslint-plugin-react": "^3.3.1",
    "gulp": "^3.9.0",
    "gulp-babel": "^5.2.1",
    "gulp-eslint": "^1.0.0",
    "gulp-inject": "^1.5.0",
    "gulp-install": "^0.5.0",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-sourcemaps": "^1.5.2",
    "husky": "^0.10.1",
    "main-bower-files": "^2.9.0",
    "merge-stream": "^1.0.0",
    "require-dir": "^0.3.0",
    "run-sequence": "^1.1.2"
  }
}
```

```
% tree .
.
├── LICENSE.txt
├── README.md
├── bower.json
├── gulp
│   ├── bower.js
│   ├── build.js
│   ├── clean.js
│   ├── copy.js
│   ├── eslint.js
│   ├── html.js
│   ├── release.js
│   ├── scripts.js
│   ├── styles.js
│   └── watch.js
├── gulpfile.babel.js
├── package.json
└── src
    ├── index.html
    ├── main.js
    ├── scripts
    │   ├── ReactApp.js
    │   └── app.js
    └── styles
        ├── main.scss
        └── vendor.scss

4 directories, 21 files
```

![Screen Shot 2015-09-13 at 16.09.23.png](https://qiita-image-store.s3.amazonaws.com/0/3780/f2db9874-bed3-3d80-a985-fddfd55b0f47.png)

## 開発をはじめる

```
% git clone https://github.com/superbrothers/electron-boilerplate.git && cd electron-boilerplate
% npm install && npm run bower -- install
% npm run dev
```

アプリケーションの開発には React + Babel を利用しています。`src/` にアプリケーションのソースコードが入っていますのでここからいじっていってください。スタイルには Sass を使っています。React のインラインスタイルのみではまだツラいことも多いので。

`npm run dev` はスクリプトなどのビルドを実行後、アプリケーションを実行します。Gulp `watch` タスクによってファイルの変更を監視して再ビルドを行うようになっていますので、必要に応じてアプリケーション上で `⌘ R` でリロードしてください。

### Gulp

ビルドツールには Gulp を利用しています。JSX、Sass のビルド、Electron アプリケーションのパッケージなどのタスクを定義しています。 `gulp/` を参照してみてください。

### Bower

最近あまり聞かなくなったような気もしますが、Bower を利用しています。サンプルのアプリケーションではフォントをインストールしていますが、TW Bootstrap を利用する場合も bower で管理するようにしています。Bower でインストールされる CSS, Sass ファイルは Gulp の `bower` タスクで `src/styles/vendor.scss` に自動でインポートされるようになっています。もしインポートされるファイルを変更したい場合は、`bower.json` の `overrides` で再定義することが可能です。またフォントやイメージなどのファイルは Gulp `copy` タスクでパッケージビルド時に集めるようになっています。これらの仕組みは main-bower-files を利用していますのでこちらも参照してみてください。

- https://github.com/ck86/main-bower-files

## パッケージを作成する

```
% npm run release
```

パッケージの作成には electron packager を利用しています。ターゲット OS などの変更は Gulp `release` タスクを変更するようにしてください。

`release` タスクは `dev` タスク時と同様のビルドを実行後アプリケーションの実行に必要な npm パッケージのみのインストールを行なっています。`npm install --production` が実行されるので、実行に必要なパッケージは `dependencies` に、ビルドツールなどは `devDependencies` に追加するようにしてください。

ビルドが成功すると `release/` にパッケージが作成されているはずです。

- https://github.com/maxogden/electron-packager

## さいごに

この Boilerplate はこれからアプリケーションを作ろうと思う自分が今後楽できるように作りました。けっしてここで力尽きないようになにかしら形にします。