📦 NEW: BrowserSync Plumber and Notify are here.

css/partial/body.scss

@@ -0,0 +1,59 @@
+/* MAIN CSS */
+
+.main {
+	display: table;
+	width: 100%;
+}
+
+.steps {
+	margin: 2.5rem 0;
+}
+.step {
+	display: table;
+	width: 100%;
+	margin: 0 auto;
+	text-align: center;
+	padding: 2rem;
+}
+
+h2 {
+	font-size: 2.5rem;
+}
+
+p {
+	font-size: 1.8rem;
+	max-width: 60rem;
+	margin: 0 auto;
+	line-height: 1.4;
+}
+
+.todo {
+	display: table;
+	width: 100%;
+	/* background: #f3edec; */
+	margin: 3rem auto 0;
+	padding: 1rem;
+	max-width: 75rem;
+	box-shadow: 0 10px 50px rgba(191, 191, 191, 0.35);
+}
+
+code {
+	font-size: 1.5rem;
+	line-height: 1.45;
+	text-align: center;
+}
+
+footer.mb {
+	display: table;
+	width: 100%;
+	margin: 0 auto;
+	padding: 5rem 5rem 5rem 0;
+	background: #f3edec;
+	box-shadow: 0 10px 50px rgba(191, 191, 191, 0.35);
+}
+
+.mb p {
+	font-size: 1.5rem;
+	max-width: 120rem;
+	/* text-align: left; */
+}

scss/partial/body.scss → css/partial/top.scss

@@ -1,9 +1,3 @@
-/* MAIN CSS */
-
-.main {
-	display: table;
-	width: 100%;
-}
 .top {
 	display: table;
 	width: 100%;
@@ -48,56 +42,3 @@
 	color: white;
 	line-height: 1.4;
 }
-
-.steps {
-	margin: 2.5rem 0;
-}
-.step {
-	display: table;
-	width: 100%;
-	margin: 0 auto;
-	text-align: center;
-	padding: 2rem;
-}
-
-h2 {
-	font-size: 2.5rem;
-}
-
-p {
-	font-size: 1.8rem;
-	max-width: 60rem;
-	margin: 0 auto;
-	line-height: 1.4;
-}
-
-.todo {
-	display: table;
-	width: 100%;
-	/* background: #f3edec; */
-	margin: 3rem auto 0;
-	padding: 1rem;
-	max-width: 75rem;
-	box-shadow: 0 10px 50px rgba(191, 191, 191, 0.35);
-}
-
-code {
-	font-size: 1.5rem;
-	line-height: 1.45;
-	text-align: center;
-}
-
-footer.mb {
-	display: table;
-	width: 100%;
-	margin: 0 auto;
-	padding: 5rem 5rem 5rem 0;
-	background: #f3edec;
-	box-shadow: 0 10px 50px rgba(191, 191, 191, 0.35);
-}
-
-.mb p {
-	font-size: 1.5rem;
-	max-width: 120rem;
-	/* text-align: left; */
-}

scss/style.scss → css/style.scss

@@ -11,3 +11,4 @@
 @import 'partial/variables'; // Variables file
 @import 'partial/base'; // CSS styles for entire web-page
 @import 'partial/body'; // CSS styles basics
+@import 'partial/top';

gulpfile.js

@@ -6,74 +6,96 @@
 
 // Configure.
 const config = {
-	pugSrc: './views/**/*.pug',
-	pugDst: './',
-	scssSrc: './scss/style.scss',
-	scssDst: './',
-	pugWatchFiles: './views/**/*.pug',
-	scssWatchFiles: './scss/**/*.scss',
-	browserSyncWatchFiles: './'
+	viewSrc: './views/**/*.pug',
+	viewDst: './',
+	styleSrc: './css/style.scss',
+	styleDst: './',
+	outputStyle: 'compressed',
+	viewWatchFiles: './views/**/*.pug',
+	styleWatchFiles: './css/**/*.scss',
+	browserAutoOpen: true,
+	injectChanges: true
 };
 
 const gulp = require('gulp');
 const pug = require('gulp-pug');
 const sass = require('gulp-sass');
 const browserSync = require('browser-sync').create();
+const reload = browserSync.reload;
+var notify = require('gulp-notify'); // Sends message notification to you.
+var plumber = require('gulp-plumber'); // Prevent pipe breaking caused by errors from gulp plugins.
 
 /**
- * Pug
+ * view
  */
-gulp.task('pug', function() {
+gulp.task('view', function() {
 	return gulp
-		.src(config.pugSrc)
+		.src(config.viewSrc)
+		.pipe(
+			plumber({
+				errorHandler: function(err) {
+					notify.onError('Error: <%= error.message %>')(err);
+					this.emit('end'); // End stream if error is found.
+				}
+			})
+		)
 		.pipe(
 			pug({
 				pretty: true
 			})
 		)
-		.pipe(gulp.dest(config.pugDst));
+		.pipe(gulp.dest(config.viewDst));
 });
 
 /**
- * Scss
+ * TASK: style.
  */
-gulp.task('scss', function() {
+gulp.task('style', function() {
 	return gulp
-		.src(config.scssSrc)
-		.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
-		.pipe(gulp.dest(config.scssDst));
-});
-
-/**
- * Default
- */
-gulp.task('default', ['pug', 'scss', 'browser-sync'], function() {
-	gulp.watch(config.pugWatchFiles, ['pug']);
-	gulp.watch(config.scssWatchFiles, ['scss']);
-	gulp.watch(config.browserSyncWatchFiles, ['browser-sync']);
+		.src(config.styleSrc)
+		.pipe(
+			plumber({
+				errorHandler: function(err) {
+					notify.onError('Error: <%= error.message %>')(err);
+					this.emit('end'); // End stream if error is found.
+				}
+			})
+		)
+		.pipe(sass({ outputStyle: config.outputStyle }).on('error', sass.logError))
+		.pipe(gulp.dest(config.styleDst))
+		.pipe(browserSync.stream({ match: '**/*.css' }));
 });
 
 /**
- * BrowserSync Init
+ * Task: `bSync`.
+ *
+ * Live Reloads, CSS injections, Localhost tunneling.
  *
+ * This task does the following:
+ *    1. Sets the project URL
+ *    2. Sets inject CSS
+ *    3. You may define a custom port
+ *    4. You may want to stop the browser from openning automatically
  */
-gulp.task('browser-sync', function() {
+gulp.task('bSync', function() {
 	browserSync.init({
-		server: {
-			baseDir: './'
-		}
+		// `true` Automatically open the browser with BrowserSync live server.
+		// `false` Stop the browser from automatically opening.
+		open: config.browserAutoOpen,
+
+		// Inject CSS changes.
+		// Comment it to reload browser for every CSS change.
+		injectChanges: config.injectChanges,
+
+		// Serve files from the current directory.
+		server: true
 	});
 });
 
 /**
- * BrowserSync Watch SCSS Files
- *
+ * Default
  */
-gulp.task('serve', ['sass'], function() {
-	browserSync.init({
-		server: './scss'
-	});
-
-	gulp.watch('/scss/*.scss', ['sass']);
-	gulp.watch('scss/*.html').on('change', browserSync.reload);
+gulp.task('default', ['view', 'style', 'bSync'], function() {
+	gulp.watch(config.viewWatchFiles, ['view', reload]);
+	gulp.watch(config.styleWatchFiles, ['style']);
 });

index.html

@@ -12,7 +12,7 @@
     <div class="main">
       <div class="top">
         <div class="top_inner">
-          <h1><span>🙌</span>					Start Using BrowserSync Today!</h1>
+          <h1><span>🙌</span>Start Using BrowserSync Today!</h1>
           <p>
             Browsersync is one of my favorite plugins for live browser reloads. Here's a quick setup guide for configuring BrowserSync
             to speed your web development workflow.
@@ -63,5 +63,6 @@ <h2>#4: Tunneling</h2>
   </body>
   <footer class="mb">
     <p>© 2018 — A project by<a href="https://maedahbatool.com/">Maedah Batool</a> | Say 👋on<a href="https://twitter.com/MaedahBatool">Twitter</a></p>
+    <script id="__bs_script__">document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js?v=2.24.5'><\\/script>".replace("HOST", location.hostname));</script>
   </footer>
 </html>