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/README.md b/README.md index 5e505a07..e40dbc20 100644 --- a/README.md +++ b/README.md @@ -50,10 +50,10 @@ Node.js is required to test this app. 2. Run `npm install`. 3. Run `npm start`. -When you edit **.jsx** files, please execute `npm run build` before `npm start`. +When you edit `src/**` files, please execute `npm run build` before `npm start`. ### Development -#### `npm run serve` +#### `npm run watch` Reload the app automatically when you have saved source codes. #### `npm test` diff --git a/gulpfile.js b/gulpfile.js index ad8bff8a..7cf0908e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,16 +3,17 @@ 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'; gulp.task('prettify', ['prettify:sources', 'prettify:jsx']); @@ -34,44 +35,112 @@ 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: ' ' }, plugins: ['esformatter-jsx'] })) - .pipe(gulp.dest(app_root)); + .pipe(gulp.dest('src/browser')); }); -gulp.task('build', ['sync-meta', 'build:jsx']); - -gulp.task('build:jsx', function() { - return gulp.src(['src/browser/**/*.jsx', '!src/node_modules/**']) - .pipe(changed(app_root, { - extension: '.js' - })) - .pipe(babel({ - presets: ['react'] - })) - .pipe(gulp.dest('src/browser/build')); +gulp.task('build', ['sync-meta', 'webpack', 'copy'], function() { + return gulp.src('src/package.json') + .pipe(gulp.dest('dist')); }); -gulp.task('serve', ['build'], function() { +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(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('dist/')); +}); + +gulp.task('copy', ['copy:resources', 'copy:html/css', 'copy:webview:js', '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:webview:js', function() { + return gulp.src(['src/browser/webview/**/*.js']) + .pipe(gulp.dest('dist/browser/webview')) +}); + +gulp.task('copy:modules', function() { + return gulp.src(['src/node_modules/bootstrap/dist/**']) + .pipe(gulp.dest('dist/browser/modules/bootstrap')) +}); + +gulp.task('watch', ['build'], function() { var options = ['--livereload']; electron.start(options); - gulp.watch(['src/**', '!src/browser/**', '!src/node_modules/**'], function() { + + gulp.watch(['src/main.js', 'src/main/**/*.js', 'src/common/**/*.js'], ['webpack:main']); + gulp.watch(['src/browser/**/*.js', 'src/browser/**/*.jsx'], ['webpack:browser', 'copy:webview:js']); + gulp.watch(['src/browser/**/*.css', 'src/browser/**/*.html', 'src/resources/**/*.png'], ['copy']); + + gulp.watch(['dist/main.js', 'dist/resources/**'], function() { electron.restart(options); }); - gulp.watch('src/browser/**/*.jsx', ['build:jsx']); - gulp.watch(['src/browser/**', '!src/browser/**/*.jsx'], electron.reload); - gulp.watch('gulpfile.js', process.exit); + gulp.watch(['dist/browser/*.js'], electron.reload); }); function makePackage(platform, arch, callback) { var packageJson = require('./src/package.json'); packager({ - dir: './' + app_root, + dir: './dist', name: packageJson.name, platform: platform, arch: arch, diff --git a/package.json b/package.json index 405d36bf..a5e317e2 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,9 @@ "install": "cd src && npm install", "postinstall": "npm run build", "build": "gulp build", - "start": "electron src", - "serve": "gulp serve", + "start": "electron dist", + "watch": "gulp watch", + "serve": "gulp watch", "test": "gulp build && mocha", "package": "gulp package", "package:windows": "gulp package:windows", @@ -20,6 +21,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 +36,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 @@