Use webpack to build
This commit is contained in:
parent
5a836c9573
commit
0704cf544a
2
.gitignore
vendored
2
.gitignore
vendored
|
@ -1,5 +1,5 @@
|
||||||
node_modules/
|
node_modules/
|
||||||
build/
|
dist/
|
||||||
release/
|
release/
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
||||||
|
|
84
gulpfile.js
84
gulpfile.js
|
@ -3,16 +3,18 @@
|
||||||
var gulp = require('gulp');
|
var gulp = require('gulp');
|
||||||
var prettify = require('gulp-jsbeautifier');
|
var prettify = require('gulp-jsbeautifier');
|
||||||
var babel = require('gulp-babel');
|
var babel = require('gulp-babel');
|
||||||
|
var webpack = require('webpack-stream');
|
||||||
|
var named = require('vinyl-named');
|
||||||
var changed = require('gulp-changed');
|
var changed = require('gulp-changed');
|
||||||
var esformatter = require('gulp-esformatter');
|
var esformatter = require('gulp-esformatter');
|
||||||
var del = require('del');
|
var del = require('del');
|
||||||
var electron = require('electron-connect').server.create({
|
var electron = require('electron-connect').server.create({
|
||||||
path: './src'
|
path: './dist'
|
||||||
});
|
});
|
||||||
var packager = require('electron-packager');
|
var packager = require('electron-packager');
|
||||||
|
|
||||||
var sources = ['**/*.js', '**/*.css', '**/*.html', '!**/node_modules/**', '!**/build/**', '!release/**'];
|
var sources = ['**/*.js', '**/*.css', '**/*.html', '!**/node_modules/**', '!**/build/**', '!release/**'];
|
||||||
var app_root = 'src';
|
var app_root = 'dist';
|
||||||
|
|
||||||
gulp.task('prettify', ['prettify:sources', 'prettify:jsx']);
|
gulp.task('prettify', ['prettify:sources', 'prettify:jsx']);
|
||||||
|
|
||||||
|
@ -34,7 +36,7 @@ gulp.task('prettify:sources', ['sync-meta'], function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('prettify:jsx', function() {
|
gulp.task('prettify:jsx', function() {
|
||||||
return gulp.src(app_root + '/**/*.jsx')
|
return gulp.src('src/browser/**/*.jsx')
|
||||||
.pipe(esformatter({
|
.pipe(esformatter({
|
||||||
indent: {
|
indent: {
|
||||||
value: ' '
|
value: ' '
|
||||||
|
@ -44,17 +46,77 @@ gulp.task('prettify:jsx', function() {
|
||||||
.pipe(gulp.dest(app_root));
|
.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() {
|
gulp.task('webpack', ['webpack:main', 'webpack:browser']);
|
||||||
return gulp.src(['src/browser/**/*.jsx', '!src/node_modules/**'])
|
|
||||||
.pipe(changed(app_root, {
|
gulp.task('webpack:browser', function() {
|
||||||
extension: '.js'
|
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({
|
.pipe(gulp.dest('dist/browser/'));
|
||||||
presets: ['react']
|
});
|
||||||
|
|
||||||
|
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() {
|
gulp.task('serve', ['build'], function() {
|
||||||
|
|
10
package.json
10
package.json
|
@ -9,7 +9,7 @@
|
||||||
"install": "cd src && npm install",
|
"install": "cd src && npm install",
|
||||||
"postinstall": "npm run build",
|
"postinstall": "npm run build",
|
||||||
"build": "gulp build",
|
"build": "gulp build",
|
||||||
"start": "electron src",
|
"start": "electron dist",
|
||||||
"serve": "gulp serve",
|
"serve": "gulp serve",
|
||||||
"test": "gulp build && mocha",
|
"test": "gulp build && mocha",
|
||||||
"package": "gulp package",
|
"package": "gulp package",
|
||||||
|
@ -20,6 +20,8 @@
|
||||||
"prettify": "gulp prettify"
|
"prettify": "gulp prettify"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"babel-core": "^6.5.1",
|
||||||
|
"babel-loader": "^6.2.2",
|
||||||
"babel-preset-react": "^6.3.13",
|
"babel-preset-react": "^6.3.13",
|
||||||
"chromedriver": "^2.20.0",
|
"chromedriver": "^2.20.0",
|
||||||
"del": "^2.2.0",
|
"del": "^2.2.0",
|
||||||
|
@ -33,9 +35,13 @@
|
||||||
"gulp-changed": "^1.3.0",
|
"gulp-changed": "^1.3.0",
|
||||||
"gulp-esformatter": "^5.0.0",
|
"gulp-esformatter": "^5.0.0",
|
||||||
"gulp-jsbeautifier": "^1.0.1",
|
"gulp-jsbeautifier": "^1.0.1",
|
||||||
|
"json-loader": "^0.5.4",
|
||||||
"mocha": "^2.3.4",
|
"mocha": "^2.3.4",
|
||||||
"mocha-circleci-reporter": "0.0.1",
|
"mocha-circleci-reporter": "0.0.1",
|
||||||
"should": "^8.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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,15 +4,12 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>electron-mattermost</title>
|
<title>electron-mattermost</title>
|
||||||
<script src="../node_modules/react/dist/react.min.js"></script>
|
<link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
|
||||||
<script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
|
|
||||||
<script src="../node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="content"></div>
|
<div id="content"></div>
|
||||||
<script src="build/index.js"></script>
|
<script src="index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -1,5 +1,9 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
const React = require('react');
|
||||||
|
const ReactDOM = require('react-dom');
|
||||||
|
const ReactBootstrap = require('react-bootstrap');
|
||||||
|
|
||||||
const Grid = ReactBootstrap.Grid;
|
const Grid = ReactBootstrap.Grid;
|
||||||
const Row = ReactBootstrap.Row;
|
const Row = ReactBootstrap.Row;
|
||||||
const Col = ReactBootstrap.Col;
|
const Col = ReactBootstrap.Col;
|
||||||
|
|
|
@ -4,15 +4,12 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Settings</title>
|
<title>Settings</title>
|
||||||
<script src="../node_modules/react/dist/react.min.js"></script>
|
<link rel="stylesheet" href="modules/bootstrap/css/bootstrap.min.css">
|
||||||
<script src="../node_modules/react-dom/dist/react-dom.min.js"></script>
|
|
||||||
<script src="../node_modules/react-bootstrap/dist/react-bootstrap.min.js"></script>
|
|
||||||
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="content"></div>
|
<div id="content"></div>
|
||||||
<script src="build/settings.js"></script>
|
<script src="settings.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
|
@ -3,6 +3,10 @@
|
||||||
const remote = require('electron').remote;
|
const remote = require('electron').remote;
|
||||||
const settings = require('../common/settings');
|
const settings = require('../common/settings');
|
||||||
|
|
||||||
|
const React = require('react');
|
||||||
|
const ReactDOM = require('react-dom');
|
||||||
|
const ReactBootstrap = require('react-bootstrap');
|
||||||
|
|
||||||
const Grid = ReactBootstrap.Grid;
|
const Grid = ReactBootstrap.Grid;
|
||||||
const Row = ReactBootstrap.Row;
|
const Row = ReactBootstrap.Row;
|
||||||
const Col = ReactBootstrap.Col;
|
const Col = ReactBootstrap.Col;
|
||||||
|
@ -12,6 +16,10 @@ const ListGroup = ReactBootstrap.ListGroup;
|
||||||
const ListGroupItem = ReactBootstrap.ListGroupItem;
|
const ListGroupItem = ReactBootstrap.ListGroupItem;
|
||||||
const Glyphicon = ReactBootstrap.Glyphicon;
|
const Glyphicon = ReactBootstrap.Glyphicon;
|
||||||
|
|
||||||
|
function backToIndex(){
|
||||||
|
window.location = 'index.html';
|
||||||
|
}
|
||||||
|
|
||||||
var SettingsPage = React.createClass({
|
var SettingsPage = React.createClass({
|
||||||
getInitialState: function() {
|
getInitialState: function() {
|
||||||
var config;
|
var config;
|
||||||
|
@ -42,10 +50,10 @@ var SettingsPage = React.createClass({
|
||||||
currentWindow.setAutoHideMenuBar(config.hideMenuBar);
|
currentWindow.setAutoHideMenuBar(config.hideMenuBar);
|
||||||
currentWindow.setMenuBarVisibility(!config.hideMenuBar);
|
currentWindow.setMenuBarVisibility(!config.hideMenuBar);
|
||||||
}
|
}
|
||||||
window.location = './index.html';
|
backToIndex();
|
||||||
},
|
},
|
||||||
handleCancel: function() {
|
handleCancel: function() {
|
||||||
window.location = './index.html';
|
backToIndex();
|
||||||
},
|
},
|
||||||
handleChangeHideMenuBar: function() {
|
handleChangeHideMenuBar: function() {
|
||||||
this.setState({
|
this.setState({
|
||||||
|
|
12
src/main.js
12
src/main.js
|
@ -7,9 +7,10 @@ const Menu = electron.Menu;
|
||||||
const Tray = electron.Tray;
|
const Tray = electron.Tray;
|
||||||
const ipc = electron.ipcMain;
|
const ipc = electron.ipcMain;
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
var settings = require('./common/settings');
|
var settings = require('./common/settings');
|
||||||
var appMenu = require('./menus/app');
|
var appMenu = require('./main/menus/app');
|
||||||
|
|
||||||
var argv = require('yargs').argv;
|
var argv = require('yargs').argv;
|
||||||
|
|
||||||
|
@ -38,6 +39,7 @@ try {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
catch (e) {
|
catch (e) {
|
||||||
|
config = settings.loadDefault();
|
||||||
console.log('Failed to read or upgrade config.json');
|
console.log('Failed to read or upgrade config.json');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,9 +85,9 @@ app.on('before-quit', function() {
|
||||||
app.on('ready', function() {
|
app.on('ready', function() {
|
||||||
// set up tray icon to show balloon
|
// set up tray icon to show balloon
|
||||||
if (process.platform === 'win32') {
|
if (process.platform === 'win32') {
|
||||||
trayIcon = new Tray(__dirname + '/resources/tray.png');
|
trayIcon = new Tray(path.resolve(__dirname, 'resources/tray.png'));
|
||||||
trayIcon.setToolTip(app.getName());
|
trayIcon.setToolTip(app.getName());
|
||||||
var tray_menu = require('./menus/tray').createDefault();
|
var tray_menu = require('./main/menus/tray').createDefault();
|
||||||
trayIcon.setContextMenu(tray_menu);
|
trayIcon.setContextMenu(tray_menu);
|
||||||
trayIcon.on('click', function() {
|
trayIcon.on('click', function() {
|
||||||
mainWindow.focus();
|
mainWindow.focus();
|
||||||
|
@ -95,7 +97,7 @@ app.on('ready', function() {
|
||||||
});
|
});
|
||||||
ipc.on('notified', function(event, arg) {
|
ipc.on('notified', function(event, arg) {
|
||||||
trayIcon.displayBalloon({
|
trayIcon.displayBalloon({
|
||||||
icon: __dirname + '/resources/appicon.png',
|
icon: path.resolve(__dirname, 'resources/appicon.png'),
|
||||||
title: arg.title,
|
title: arg.title,
|
||||||
content: arg.options.body
|
content: arg.options.body
|
||||||
});
|
});
|
||||||
|
@ -112,7 +114,7 @@ app.on('ready', function() {
|
||||||
// follow Electron's defaults
|
// follow Electron's defaults
|
||||||
window_options = {};
|
window_options = {};
|
||||||
}
|
}
|
||||||
window_options.icon = __dirname + '/resources/appicon.png';
|
window_options.icon = path.resolve(__dirname, 'resources/appicon.png');
|
||||||
mainWindow = new BrowserWindow(window_options);
|
mainWindow = new BrowserWindow(window_options);
|
||||||
if (window_options.maximized) {
|
if (window_options.maximized) {
|
||||||
mainWindow.maximize();
|
mainWindow.maximize();
|
||||||
|
|
|
@ -15,7 +15,7 @@ var createTemplate = function(mainWindow) {
|
||||||
}, {
|
}, {
|
||||||
label: 'Settings',
|
label: 'Settings',
|
||||||
click: function(item, focusedWindow) {
|
click: function(item, focusedWindow) {
|
||||||
mainWindow.loadURL('file://' + __dirname + '/../browser/settings.html');
|
mainWindow.loadURL('file://' + __dirname + '/browser/settings.html');
|
||||||
}
|
}
|
||||||
}, {
|
}, {
|
||||||
label: 'Quit',
|
label: 'Quit',
|
|
@ -25,7 +25,7 @@ var options = {
|
||||||
browserName: 'chrome',
|
browserName: 'chrome',
|
||||||
chromeOptions: {
|
chromeOptions: {
|
||||||
binary: electron_binary_path, // Path to your Electron binary.
|
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() {
|
it('should show index.thml when Cancel button is clicked', function() {
|
||||||
return client
|
return client
|
||||||
.init()
|
.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')
|
.waitForExist('#btnCancel')
|
||||||
.click('#btnCancel')
|
.click('#btnCancel')
|
||||||
.pause(1000)
|
.pause(1000)
|
||||||
|
@ -201,7 +201,7 @@ describe('electron-mattermost', function() {
|
||||||
it('should show index.thml when Save button is clicked', function() {
|
it('should show index.thml when Save button is clicked', function() {
|
||||||
return client
|
return client
|
||||||
.init()
|
.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')
|
.waitForExist('#btnSave')
|
||||||
.click('#btnSave')
|
.click('#btnSave')
|
||||||
.pause(1000)
|
.pause(1000)
|
||||||
|
|
Loading…
Reference in a new issue