Skip to content

Instantly share code, notes, and snippets.

@sagalbot
Last active April 13, 2018 05:03
Show Gist options
  • Star 19 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save sagalbot/6150d4f536af7b4c4f9a9879856e595d to your computer and use it in GitHub Desktop.
Save sagalbot/6150d4f536af7b4c4f9a9879856e595d to your computer and use it in GitHub Desktop.
Laravel Elixir + Vueify + Hot Reload. This will get you up and running with Browserify HMR + Vueify + BrowserSync in no time.
var elixir = require('laravel-elixir');
var gutil = require('gulp-util');
// If 'gulp watch' is run
if (gutil.env._.indexOf('watch') > -1) {
// Enable watchify for faster builds
elixir.config.js.browserify.watchify.enabled = true
// Add the browserify HMR plugin
elixir.config.js.browserify.plugins.push({
name: 'browserify-hmr',
options: {}
})
}
// Default babel presets are ['es2015', 'react']
// https://babeljs.io/docs/plugins/preset-stage-2/
elixir.config.js.babel.options.presets = ['es2015', 'stage-2'];
// Add the vueify browserify transform
// https://github.com/vuejs/vueify
elixir.config.js.browserify.transformers.push({
name: 'vueify',
options: {}
});
elixir(function (mix) {
// Compile the app entry point
mix.browserify('vue.js')
// Compile sass
mix.sass('app.scss')
// Since JS will be hot reloaded, browserSync only
// needs to be concerned with reloading css. You
// can adjust this to include php files as well.
mix.browserSync({
proxy: 'http://localhost:8888/hmr/public/',
files: [ elixir.config.get('public.css.outputFolder') + '/**/*.css' ],
});
});
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"babel-plugin-transform-runtime": "^6.7.5",
"browserify-hmr": "^0.3.1",
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"vue-hot-reload-api": "^1.3.2",
"vueify": "^8.3.9",
"vueify-insert-css": "^1.0.0"
},
"dependencies": {
"vue": "^1.0.21"
}
}
@sidouglas
Copy link

sidouglas commented Sep 4, 2016

elixir.config.js.babel.options.presets = ['es2015', 'stage-2'];
                        ^   Cannot read property 'options' of undefined

Couldn't get it working. "laravel-elixir": "^6.0.0-2", in package.json

@lucianotonet
Copy link

elixir.config.js.browserify.watchify.enabled = true
                            ^

TypeError: Cannot read property 'watchify' of undefined
    at Object.<anonymous> (D:\Works\www\steel4web.com.br\admin\gulpfile.js:32:30)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Liftoff.handleArguments (D:\Works\www\steel4web.com.br\admin\node_modules\gulp\bin\gulp.js:116:3)
    at Liftoff.<anonymous> (D:\Works\www\steel4web.com.br\admin\node_modules\liftoff\index.js:198:16)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment