-
-
Save gemmadlou/e90d140d8cb8f6d01986f5ffd28389e8 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 hidden or 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 hidden or 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" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment