Last active
April 13, 2018 05:03
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' ], | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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" | |
} | |
} |
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
Couldn't get it working.
"laravel-elixir": "^6.0.0-2",
in package.json