Replace livereload with browser-sync

This commit is contained in:
Kevin MacMartin 2018-04-06 00:29:22 -04:00
parent ef8db3b728
commit e83bdcb937
5 changed files with 2532 additions and 352 deletions

View file

@ -11,7 +11,7 @@ LOG_CHANNEL=stack
CACHE_BUST= CACHE_BUST=
LR_HOST=localhost BS_HOST=localhost
DB_CONNECTION=mysql DB_CONNECTION=mysql
DB_HOST=127.0.0.1 DB_HOST=127.0.0.1

53
gulpfile.js vendored
View file

@ -25,6 +25,13 @@ const browserify = require("browserify"),
// Determine if gulp has been run with --production // Determine if gulp has been run with --production
const isProduction = minimist(process.argv.slice(2)).production !== undefined; const isProduction = minimist(process.argv.slice(2)).production !== undefined;
// Include browsersync when gulp has not been run with --production
let browserSync = undefined;
if (!isProduction) {
browserSync = require("browser-sync").create();
}
// Declare plugin settings // Declare plugin settings
const sassOutputStyle = isProduction ? "compressed" : "nested", const sassOutputStyle = isProduction ? "compressed" : "nested",
sassPaths = [ "bower_components", "node_modules" ], sassPaths = [ "bower_components", "node_modules" ],
@ -83,13 +90,18 @@ function handleError(err) {
// Process sass // Process sass
function processSass(filename) { function processSass(filename) {
return gulp.src("resources/assets/sass/" + filename + ".scss") const css = gulp.src("resources/assets/sass/" + filename + ".scss")
.pipe(plumber(handleError)) .pipe(plumber(handleError))
.pipe(sassGlob()) .pipe(sassGlob())
.pipe(sass({ outputStyle: sassOutputStyle, includePaths: sassPaths })) .pipe(sass({ outputStyle: sassOutputStyle, includePaths: sassPaths }))
.pipe(postCSS([ autoprefixer(autoprefixerSettings) ])) .pipe(postCSS([ autoprefixer(autoprefixerSettings) ]))
.pipe(concat(filename + ".css")) .pipe(concat(filename + ".css"));
.pipe(gulp.dest("public/css/"));
if (isProduction) {
return css.pipe(gulp.dest("public/css/"));
} else {
return css.pipe(gulp.dest("public/css/")).pipe(browserSync.stream({ match: "**/" + filename + ".css" }));
}
} }
// Process vue // Process vue
@ -162,27 +174,26 @@ gulp.task("fonts", function() {
}); });
// Task to run tasks when their respective files are changed // Task to run tasks when their respective files are changed
const watchReload = function(done) {
browserSync.reload();
done();
};
gulp.task("js-public-watch", [ "js-public" ], watchReload);
gulp.task("js-public-vue-watch", [ "js-public-vue" ], watchReload);
gulp.task("js-dashboard-watch", [ "js-dashboard" ], watchReload);
gulp.task("watch", function() { gulp.task("watch", function() {
const livereload = require("gulp-livereload"); browserSync.init({
logLevel: "silent",
const liveReloadUpdate = function(files, wait) { baseDir: "./public"
setTimeout(function() {
livereload.changed(files);
}, wait || 1);
};
livereload.listen();
gulp.watch(jsPublic, [ "js-public" ]).on("change", liveReloadUpdate);
gulp.watch(jsDashboard, [ "js-dashboard" ]).on("change", liveReloadUpdate);
gulp.watch([ "app/**/*.php", "routes/**/*.php", "resources/views/**/*.blade.php" ]).on("change", liveReloadUpdate);
gulp.watch([ vuePublic, "resources/assets/js/mixins/**/*.js", "resources/components/**/*.vue" ], [ "js-public-vue" ]).on("change", function(files) {
liveReloadUpdate(files, 3000);
}); });
gulp.watch("resources/assets/sass/**/*.scss", [ "sass-public", "sass-dashboard" ]).on("change", function(files) { gulp.watch(jsPublic, [ "js-public-watch" ]);
liveReloadUpdate(files, 1000); gulp.watch(jsDashboard, [ "js-dashboard-watch" ]);
}); gulp.watch([ "app/**/*.php", "routes/**/*.php", "resources/views/**/*.blade.php" ]).on("change", browserSync.reload);
gulp.watch([ vuePublic, "resources/assets/js/mixins/**/*.js", "resources/components/**/*.vue" ], [ "js-public-vue-watch" ]);
gulp.watch("resources/assets/sass/**/*.scss", [ "sass-public", "sass-dashboard" ]);
}); });
// Task to run non-development tasks // Task to run non-development tasks

2813
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -5,7 +5,7 @@
"dev": "gulp default watch" "dev": "gulp default watch"
}, },
"devDependencies": { "devDependencies": {
"gulp-livereload": "^3.8.1" "browser-sync": "^2.23.6"
}, },
"dependencies": { "dependencies": {
"autoprefixer": "^8.2.0", "autoprefixer": "^8.2.0",

View file

@ -33,12 +33,6 @@
<link rel="canonical" href="{{ Request::url() }}" /> <link rel="canonical" href="{{ Request::url() }}" />
@yield('page-includes') @yield('page-includes')
@if(Config::get('app.debug'))
<script type="text/javascript">
document.write('<script src="//{{ env('LR_HOST', 'localhost') }}:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
@endif
</head> </head>
<body class="{{ $device_mobile ? 'mobile-browser' : 'desktop-browser' }}"> <body class="{{ $device_mobile ? 'mobile-browser' : 'desktop-browser' }}">
@ -49,5 +43,11 @@
</div> </div>
@yield('page-bottom') @yield('page-bottom')
@if(Config::get('app.debug'))
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://{{ env('BS_HOST', 'localhost') }}:3000/browser-sync/browser-sync-client.js?version={{ env('CACHE_BUST') }}'><\/script>".replace("HOST", location.hostname));
//]]></script>
@endif
</body> </body>
</html> </html>