📦 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>