gulpでOSX、Windows、Linux用のAtom-shellアプリを自動生成する

gulpとgulp-atomを使うことで以下を簡単に自動化できます。

• ビルド用Atom-shellのダウンロード
• OSX, Windows, Linux用のアプリの生成

以下に方法をまとめました。

使うもの

• npm
• gulp.js
• gulp-atom

atom-shellは自動でダウンロードされるので不要です。

gulp用の設定

gulpインストール

gulpが入っていない場合は以下でインストールしてください。

npm install -g gulp

gulp用のpackage.json作成

npm init

適当にリターンを押します。

gulp-atomのインストール

npm install --save-dev gulp gulp-atom

guplfile.js作成

var gulp = require('gulp');
var gulpAtom = require('gulp-atom');

gulp.task('atom', function() {
    return gulpAtom({
        srcPath: './src',
        releasePath: './release',
        cachePath: './cache',
        version: 'v0.20.1',
        rebuild: false,
        platforms: ['win32-ia32', 'darwin-x64', 'linux-x64']
    });
});

その他オプションは、xeodou/gulp-atom > options で参照できます。

アプリ開発

1. srcディレクトリを作成します。

   mkdir src && cd src
   

2. package.jsonを作成します

   npm init
   

   適当にリターンし続けます

3. src配下にindex.jsを作成します。

   var app = require('app'); 
   var BrowserWindow = require('browser-window');  
   
   var mainWindow = null;
   
   app.on('window-all-closed', function() {
       if (process.platform != 'darwin') {
           app.quit();
       }
   });
   
   app.on('ready', function() {
       mainWindow = new BrowserWindow({width: 800, height: 600});
       mainWindow.loadUrl('file://' + __dirname + '/index.html');
   
       mainWindow.on('closed', function() {
           mainWindow = null;
       });
   });
   

4. src配下にindex.htmlなど実際のアプリのソースファイルを格納します。

   今以下のようになっていると思います。

   .
   ├── gulpfile.js
   ├── node_modules
   │   ├── gulp
   │   └── gulp-atom
   ├── package.json
   ├── src
   │   ├── package.json
   │   ├── index.js
   │   └── index.html
   └── tree.txt
   

ビルド

1. gulpを実行します

   gulp atom

   [asgulp] gulp atom                                                                                                            
   [11:37:30] Using gulpfile xxx/asgulp/gulpfile.js
   [11:37:30] Starting 'atom'...
   atom-shell-v0.20.1-win32-ia32.zip [>>>>>>>>>>>>>>>>>>>>] 100% 0.0s
   [11:37:39] gulp-atom-shell atom-shell-v0.20.1-win32-ia32.zip distribute done.
   atom-shell-v0.20.1-darwin-x64.zip [>>>>>>>>>>>>>>>>>>>>] 100% 0.0s
   [11:37:57] gulp-atom-shell atom-shell-v0.20.1-darwin-x64.zip distribute done.
   atom-shell-v0.20.1-linux-x64.zip [>>>>>>>>>>>>>>>>>>>>] 100% 0.0s
   [11:38:07] gulp-atom-shell atom-shell-v0.20.1-linux-x64.zip distribute done.
   [11:38:07] Finished 'atom' after 37 s
   [asgulp]                                                                                   
   

2. 確認

   release配下に各OSのAtomがあるので確認します。

   ├── release
   │   └── v0.20.1
   │       ├── darwin-x64
   │       │   ├── Atom.app
   │       │   ├── LICENSE
   │       │   └── version
   │       ├── linux-x64
   │       │   ├── LICENSE
   │       │   ├── atom
   │       │   ├──    :
   │       │   └── version
   │       └── win32-ia32
   │           ├── LICENSE
   │           ├── atom.exe
   │           ├──    :
   │           └── xinput1_3.dll
   

gulpとgulp-atomでOSXとWindowsとLinuxのAtom-shellアプリがお手軽にビルドできました。

その他

同様のpluginは他にもあります。より高機能です。

• gulp-atom-shell
  • アイコンや各OS固有の設定もできる。