Skip to content

Instantly share code, notes, and snippets.

@stoplion
Forked from Darkle/gulpfile.js
Created August 3, 2016 22:11
Show Gist options
  • Save stoplion/6be965366d1b0200296d0bb0d7781bc6 to your computer and use it in GitHub Desktop.
Save stoplion/6be965366d1b0200296d0bb0d7781bc6 to your computer and use it in GitHub Desktop.
Using Browserify, BrowserSync & Nodemon with Electron in Gulp.
'use strict';
var gulp = require('gulp')
var runSequence = require('run-sequence')
var path = require('path')
var browserSync = require('browser-sync').create()
var nodemon = require('gulp-nodemon')
var sourcemaps = require('gulp-sourcemaps')
var browserify = require('browserify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var babelify = require('babelify')
var gutil = require('gulp-util')
var autoprefixer = require('gulp-autoprefixer')
var less = require('gulp-less')
var rename = require('gulp-rename')
var eventStream = require('event-stream')
gulp.task('default', function(callback) {
runSequence('browserify',
'nodemon',
'browser-sync',
'watch-less',
'watch-js',
callback
)
})
//http://www.browsersync.io/docs/options/
gulp.task('browser-sync', () =>
browserSync.init({
proxy: "localhost:3000",
files: [
'appmodules/**/*.*'
],
port: 3020,
open: false, // Stop the browser from automatically opening
notify: false,
//reloadDelay: 3000,
//reloadDebounce: 3000,
/****
* online: false makes it load MUCH faster
* http://www.browsersync.io/docs/options/#option-online
* note: This is needed for some features, so disable this if anything breaks
*/
online: false, //
ghostMode: false //dont want to mirror clicks, scrolls, forms on all devices
})
)
gulp.task('nodemon', cb =>{
var env = process.env
env.DEBUG = 'MarkSearch:*'
env.NODE_ENV = 'development'
return nodemon({
script: 'appInit.js',
watch: [
'appInit.js',
'appmodules/**/*.*'
],
env: env,
execMap: {
js: "node_modules/.bin/electron"
},
ignore: [
path.join(__dirname, 'frontend', 'static', '**', '*.*'),
path.join(__dirname, 'frontend', 'src', '**', '*.*')
]
}).once('start', cb)
})
gulp.task('watch-less', () =>
gulp.watch(path.join(__dirname, 'frontend', 'src', 'css', '*.less'), ['less'])
)
gulp.task('watch-js', () =>
/****
* Doing it this way because of the map issue in browser-sync task below
*/
gulp.watch(path.join(__dirname, 'frontend', 'src', 'js', '*.js'), () => {
runSequence('browserify', 'browsersync-reload')
})
)
gulp.task('browsersync-reload', () => {
browserSync.reload()
})
gulp.task('less', () =>
gulp.src(path.join(__dirname, 'frontend', 'src', 'css', 'styles.less'))
.pipe(sourcemaps.init())
.pipe(less().on('error', function(err) {
gutil.log(err)
this.emit('end')
}))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.join(__dirname, 'frontend', 'static', 'stylesheets')))
.pipe(browserSync.stream())
)
/*****
* Multiple bundles
* http://fettblog.eu/gulp-browserify-multiple-bundles/
*/
gulp.task('browserify', () =>{
var files = [
path.join(__dirname, 'frontend', 'src', 'js', 'searchPage.js'),
path.join(__dirname, 'frontend', 'src', 'js', 'settingsPage.js'),
path.join(__dirname, 'frontend', 'src', 'js', 'helpPage.js'),
path.join(__dirname, 'frontend', 'src', 'js', 'aboutPage.js')
]
// map them to our stream function
var tasks = files.map(function(entry){
return browserify({
entries: [entry],
debug: true
})
.transform("babelify", {
presets: ["es2015"],
sourceMaps: true
})
.on('error', function(err){
gutil.log(err.message)
this.emit('end')
})
.bundle()
.on('error', function(err){
gutil.log(err.message)
this.emit('end')
})
.pipe(source(entry))
.pipe(rename({
dirname: 'js',
extname: '-bundle.js'
}))
.pipe(buffer())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.join(__dirname, 'frontend', 'static')))
/****
* browserSync.stream messes up here - I think it's becuase we're mapping, so we're
* calling it 4 times instead of once. Could individually get around it by using
* {match:}, but its easier to just call reload from the 'watch-js' task
* after the whole 'browserify' task has finished.
*/
//.pipe(browserSync.stream({match: '**/settingsPage-bundle.js'}))
//.pipe(browserSync.stream())
})
// create a merged stream
return eventStream.merge.apply(null, tasks)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment