From 0704cf544a254d8468c61445c1d04c2c9352679d Mon Sep 17 00:00:00 2001 From: Yuya Ochiai Date: Sun, 31 Jan 2016 00:50:43 +0900 Subject: [PATCH] Use webpack to build --- .gitignore | 2 +- gulpfile.js | 84 +++++++++++++++++++++++++++++++----- package.json | 10 ++++- src/browser/index.html | 7 +-- src/browser/index.jsx | 4 ++ src/browser/settings.html | 7 +-- src/browser/settings.jsx | 12 +++++- src/main.js | 12 +++--- src/{ => main}/menus/app.js | 2 +- src/{ => main}/menus/tray.js | 0 test/browser_test.js | 6 +-- 11 files changed, 111 insertions(+), 35 deletions(-) rename src/{ => main}/menus/app.js (97%) rename src/{ => main}/menus/tray.js (100%) diff --git a/.gitignore b/.gitignore index 7210ba6c..ae75970c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ node_modules/ -build/ +dist/ release/ npm-debug.log diff --git a/gulpfile.js b/gulpfile.js index ad8bff8a..9bd57272 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,16 +3,18 @@ var gulp = require('gulp'); var prettify = require('gulp-jsbeautifier'); var babel = require('gulp-babel'); +var webpack = require('webpack-stream'); +var named = require('vinyl-named'); var changed = require('gulp-changed'); var esformatter = require('gulp-esformatter'); var del = require('del'); var electron = require('electron-connect').server.create({ - path: './src' + path: './dist' }); var packager = require('electron-packager'); var sources = ['**/*.js', '**/*.css', '**/*.html', '!**/node_modules/**', '!**/build/**', '!release/**']; -var app_root = 'src'; +var app_root = 'dist'; gulp.task('prettify', ['prettify:sources', 'prettify:jsx']); @@ -34,7 +36,7 @@ gulp.task('prettify:sources', ['sync-meta'], function() { }); gulp.task('prettify:jsx', function() { - return gulp.src(app_root + '/**/*.jsx') + return gulp.src('src/browser/**/*.jsx') .pipe(esformatter({ indent: { value: ' ' @@ -44,17 +46,77 @@ gulp.task('prettify:jsx', function() { .pipe(gulp.dest(app_root)); }); -gulp.task('build', ['sync-meta', 'build:jsx']); +gulp.task('build', ['sync-meta', 'webpack', 'copy'], function() { + return gulp.src('src/package.json') + .pipe(gulp.dest('dist')); +}); -gulp.task('build:jsx', function() { - return gulp.src(['src/browser/**/*.jsx', '!src/node_modules/**']) - .pipe(changed(app_root, { - extension: '.js' +gulp.task('webpack', ['webpack:main', 'webpack:browser']); + +gulp.task('webpack:browser', function() { + return gulp.src('src/browser/**/*.jsx') + .pipe(named()) + .pipe(webpack({ + module: { + loaders: [{ + test: /\.json$/, + loader: 'json' + }, { + test: /\.jsx$/, + loader: 'babel', + query: { + presets: ['react'] + } + }] + }, + output: { + filename: '[name].js' + }, + node: { + __filename: false, + __dirname: false + }, + target: 'electron' })) - .pipe(babel({ - presets: ['react'] + .pipe(gulp.dest('dist/browser/')); +}); + +gulp.task('webpack:main', function() { + return gulp.src('src/main.js') + .pipe(webpack({ + module: { + loaders: [{ + test: /\.json$/, + loader: 'json' + }] + }, + output: { + filename: '[name].js' + }, + node: { + __filename: false, + __dirname: false + }, + target: 'electron' })) - .pipe(gulp.dest('src/browser/build')); + .pipe(gulp.dest('dist/')); +}); + +gulp.task('copy', ['copy:resources', 'copy:html/css', 'copy:modules']); + +gulp.task('copy:resources', function() { + return gulp.src('src/resources/**') + .pipe(gulp.dest('dist/resources')); +}); + +gulp.task('copy:html/css', function() { + return gulp.src(['src/browser/**/*.html', 'src/browser/**/*.css']) + .pipe(gulp.dest('dist/browser')); +}); + +gulp.task('copy:modules', function() { + return gulp.src(['src/node_modules/bootstrap/dist/**']) + .pipe(gulp.dest('dist/browser/modules/bootstrap')) }); gulp.task('serve', ['build'], function() { diff --git a/package.json b/package.json index 405d36bf..50743590 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "install": "cd src && npm install", "postinstall": "npm run build", "build": "gulp build", - "start": "electron src", + "start": "electron dist", "serve": "gulp serve", "test": "gulp build && mocha", "package": "gulp package", @@ -20,6 +20,8 @@ "prettify": "gulp prettify" }, "devDependencies": { + "babel-core": "^6.5.1", + "babel-loader": "^6.2.2", "babel-preset-react": "^6.3.13", "chromedriver": "^2.20.0", "del": "^2.2.0", @@ -33,9 +35,13 @@ "gulp-changed": "^1.3.0", "gulp-esformatter": "^5.0.0", "gulp-jsbeautifier": "^1.0.1", + "json-loader": "^0.5.4", "mocha": "^2.3.4", "mocha-circleci-reporter": "0.0.1", "should": "^8.0.1", - "webdriverio": "^3.3.0" + "style-loader": "^0.13.0", + "vinyl-named": "^1.1.0", + "webdriverio": "^3.3.0", + "webpack-stream": "^3.1.0" } } diff --git a/src/browser/index.html b/src/browser/index.html index c9c0a495..6df0c0b7 100644 --- a/src/browser/index.html +++ b/src/browser/index.html @@ -4,15 +4,12 @@ electron-mattermost - - - - +
- + \ No newline at end of file diff --git a/src/browser/index.jsx b/src/browser/index.jsx index 726690fb..09d09ad7 100644 --- a/src/browser/index.jsx +++ b/src/browser/index.jsx @@ -1,5 +1,9 @@ 'use strict'; +const React = require('react'); +const ReactDOM = require('react-dom'); +const ReactBootstrap = require('react-bootstrap'); + const Grid = ReactBootstrap.Grid; const Row = ReactBootstrap.Row; const Col = ReactBootstrap.Col; diff --git a/src/browser/settings.html b/src/browser/settings.html index f3b11678..f4ee24ef 100644 --- a/src/browser/settings.html +++ b/src/browser/settings.html @@ -4,15 +4,12 @@ Settings - - - - +
- + \ No newline at end of file diff --git a/src/browser/settings.jsx b/src/browser/settings.jsx index 53d0319d..e57ff722 100644 --- a/src/browser/settings.jsx +++ b/src/browser/settings.jsx @@ -3,6 +3,10 @@ const remote = require('electron').remote; const settings = require('../common/settings'); +const React = require('react'); +const ReactDOM = require('react-dom'); +const ReactBootstrap = require('react-bootstrap'); + const Grid = ReactBootstrap.Grid; const Row = ReactBootstrap.Row; const Col = ReactBootstrap.Col; @@ -12,6 +16,10 @@ const ListGroup = ReactBootstrap.ListGroup; const ListGroupItem = ReactBootstrap.ListGroupItem; const Glyphicon = ReactBootstrap.Glyphicon; +function backToIndex(){ + window.location = 'index.html'; +} + var SettingsPage = React.createClass({ getInitialState: function() { var config; @@ -42,10 +50,10 @@ var SettingsPage = React.createClass({ currentWindow.setAutoHideMenuBar(config.hideMenuBar); currentWindow.setMenuBarVisibility(!config.hideMenuBar); } - window.location = './index.html'; + backToIndex(); }, handleCancel: function() { - window.location = './index.html'; + backToIndex(); }, handleChangeHideMenuBar: function() { this.setState({ diff --git a/src/main.js b/src/main.js index af10de33..c1681ca0 100644 --- a/src/main.js +++ b/src/main.js @@ -7,9 +7,10 @@ const Menu = electron.Menu; const Tray = electron.Tray; const ipc = electron.ipcMain; const fs = require('fs'); +const path = require('path'); var settings = require('./common/settings'); -var appMenu = require('./menus/app'); +var appMenu = require('./main/menus/app'); var argv = require('yargs').argv; @@ -38,6 +39,7 @@ try { } } catch (e) { + config = settings.loadDefault(); console.log('Failed to read or upgrade config.json'); } @@ -83,9 +85,9 @@ app.on('before-quit', function() { app.on('ready', function() { // set up tray icon to show balloon if (process.platform === 'win32') { - trayIcon = new Tray(__dirname + '/resources/tray.png'); + trayIcon = new Tray(path.resolve(__dirname, 'resources/tray.png')); trayIcon.setToolTip(app.getName()); - var tray_menu = require('./menus/tray').createDefault(); + var tray_menu = require('./main/menus/tray').createDefault(); trayIcon.setContextMenu(tray_menu); trayIcon.on('click', function() { mainWindow.focus(); @@ -95,7 +97,7 @@ app.on('ready', function() { }); ipc.on('notified', function(event, arg) { trayIcon.displayBalloon({ - icon: __dirname + '/resources/appicon.png', + icon: path.resolve(__dirname, 'resources/appicon.png'), title: arg.title, content: arg.options.body }); @@ -112,7 +114,7 @@ app.on('ready', function() { // follow Electron's defaults window_options = {}; } - window_options.icon = __dirname + '/resources/appicon.png'; + window_options.icon = path.resolve(__dirname, 'resources/appicon.png'); mainWindow = new BrowserWindow(window_options); if (window_options.maximized) { mainWindow.maximize(); diff --git a/src/menus/app.js b/src/main/menus/app.js similarity index 97% rename from src/menus/app.js rename to src/main/menus/app.js index 2759d6ba..68fdb8a4 100644 --- a/src/menus/app.js +++ b/src/main/menus/app.js @@ -15,7 +15,7 @@ var createTemplate = function(mainWindow) { }, { label: 'Settings', click: function(item, focusedWindow) { - mainWindow.loadURL('file://' + __dirname + '/../browser/settings.html'); + mainWindow.loadURL('file://' + __dirname + '/browser/settings.html'); } }, { label: 'Quit', diff --git a/src/menus/tray.js b/src/main/menus/tray.js similarity index 100% rename from src/menus/tray.js rename to src/main/menus/tray.js diff --git a/test/browser_test.js b/test/browser_test.js index 746ce496..a30ae701 100644 --- a/test/browser_test.js +++ b/test/browser_test.js @@ -25,7 +25,7 @@ var options = { browserName: 'chrome', chromeOptions: { binary: electron_binary_path, // Path to your Electron binary. - args: ['app=' + path.join(source_root_dir, 'src'), '--config-file=' + config_file_path] // Optional, perhaps 'app=' + /path/to/your/app/ + args: ['app=' + path.join(source_root_dir, 'dist'), '--config-file=' + config_file_path] // Optional, perhaps 'app=' + /path/to/your/app/ } } }; @@ -187,7 +187,7 @@ describe('electron-mattermost', function() { it('should show index.thml when Cancel button is clicked', function() { return client .init() - .url('file://' + path.join(source_root_dir, 'src/browser/settings.html')) + .url('file://' + path.join(source_root_dir, 'dist/browser/settings.html')) .waitForExist('#btnCancel') .click('#btnCancel') .pause(1000) @@ -201,7 +201,7 @@ describe('electron-mattermost', function() { it('should show index.thml when Save button is clicked', function() { return client .init() - .url('file://' + path.join(source_root_dir, 'src/browser/settings.html')) + .url('file://' + path.join(source_root_dir, 'dist/browser/settings.html')) .waitForExist('#btnSave') .click('#btnSave') .pause(1000)