裏紙に書く程度の内容

electronをcoffeescriptで開発するための環境構築

electronをcoffeescriptで開発するための環境構築についてのメモ。 ついでにjade,lessも使えるようにします。

というか、gruntでコンパイルするだけですが。

ディレクトリ構成

最終的なディレクトリ構成は以下。

  • assets/

    • css/ cssファイル格納
    • js/ jsファイル格納
    • view/ htmlファイル格納
  • src
    • coffee/ coffeeソース
    • jade/ jade
    • less/ less

electronのinstall

npm install -g install electron-prebuilt

projectの作成

mkdir electron-tutorial
cd electron-tutorial
npm init -y

package.jsonは以下のようにしておく

{
  "name": "electron-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "assets/js/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt-contrib-coffee": "*",
    "grunt-contrib-jade": "*",
    "grunt-contrib-less": "*",
    "grunt-contrib-watch": "*"
  }
}

必要パッケージのインストール

npm install

Gruntfile.js作成

Gruntfile.jsを下記のように作成

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
        jadefile: {
            files: ['src/jade/**/*.jade'],
            tasks: ['jade']
        },
        lessfile: {
            files: ['src/less/*.less'],
            tasks: ['less']
        },
        coffeefile: {
            files: ['src/coffee/*.coffee'],
            tasks: ['coffee']
        }
    },
    jade: {
        compile: {
            options: {
                pretty: true,
                debug: false
            },
            files : [{
                expand: true,
                cwd: "src/jade/",
                src: "*.jade",
                dest: "./assets/view/",
                ext: ".html"
            }]
        }
    },
    coffee: {
        compile: {
            expand: true,
            dd: true,
            cwd: 'src/coffee/',
            src: ['**/*.coffee'],
            dest: './assets/js/',
            ext: '.js'
        }
    },
    less: {
        development: {
            options: {
                paths: ["src/less"]
            },
            files : {
                "./assets/css/style.css": "src/less/style.less"
            }
        }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.registerTask('default', ['watch']);
};

各ファイル作成

エントリポイント

src/coffee/main.coffee

'use strict'
app = require('app')
path = require 'path' # add
BrowserWindow = require('browser-window')
require('crash-reporter').start()
mainWindow = null
app.on 'window-all-closed', ->
  if process.platform != 'darwin'
    app.quit()
  return
app.on 'ready', ->
  # ブラウザ(Chromium)の起動, 初期画面のロード
  mainWindow = new BrowserWindow(
    width: 800
    height: 600)
  appRoute = path.join(__dirname, '..') # routeを設定
  mainWindow.loadUrl 'file://' + appRoute + '/view/index.html' # 変更

  console.log appRoute

  mainWindow.on 'closed', ->
    mainWindow = null
    return
  return

view

src/jade/index.jade

doctype
html
  head
    meta(charset="UTF-8")

    link(rel="stylesheet" href="../css/style.css")

    title Electron Read Us !

  body
    h1 Hello, electron from coffeescript!

less

src/less/style.less

h1 {
    color: red;
}

コンパイル!

grunt coffee
grunt jade
grunt less

または、

grunt

とするとwatchされるので、各ファイルを上書き保存すると自動コンパイルされます。

コンパイルに成功したらいつも通り

electron .

で確認できると思います。

Index