01 03b

.gitignore

@@ -3,4 +3,5 @@ node_modules
 .tmp
 .sass-cache
 images/**
-slides/**
+slides/**
+builds/sassEssentials/css/style.css

builds/sassEssentials/css/style.css

@@ -0,0 +1,14 @@
+html {
+  font-size: 62.5%; }
+
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 1.8rem;
+  font-family: 'Helvetica', sans-serif;
+  color: #022933;
+  background-color: #EEE8D6; }
+
+.container {
+  width: 80%;
+  margin: 0 auto; }

gulpfile.js

@@ -1,38 +1,54 @@
-var gulp = require('gulp'),
-    jshint = require('gulp-jshint'),
-    sass = require('gulp-ruby-sass'),
-    sourcemaps = require('gulp-sourcemaps'),
-    webserver = require('gulp-webserver');
-
-gulp.task('js', function() {
-  return gulp.src('builds/sassEssentials/js/myscript.js')
-    .pipe(jshint('./.jshintrc'))
-    .pipe(jshint.reporter('jshint-stylish'));
-});
-
-gulp.task('sass', function () {
-    return sass('process/sass/style.scss', {
-      sourcemap: true,
-      style: 'expanded'
-    })
-    .on('error', function (err) {
-        console.error('Error!', err.message);
-    })
-    .pipe(sourcemaps.write())
-    .pipe(gulp.dest('builds/sassEssentials/css'));
-});
-
-gulp.task('watch', function() {
-  gulp.watch('builds/sassEssentials/js/**/*', ['js']);
-  gulp.watch(['process/sass/**/*'], ['sass']);
-});
-
-gulp.task('webserver', function() {
-    gulp.src('builds/sassEssentials/')
-        .pipe(webserver({
-            livereload: true,
-            open: true
-        }));
-});
-
-gulp.task('default', ['watch', 'sass','webserver']);
+const gulp = require("gulp"),
+  sass = require("gulp-sass"),
+  sourcemaps = require("gulp-sourcemaps"),
+  browserSync = require("browser-sync").create(),
+  source = "./process/",
+  dest = "./builds/sassEssentials/";
+
+sass.compiler = require("node-sass");
+
+function html() {
+  return gulp.src(dest + "**/*.html");
+}
+
+function js() {
+  return gulp.src(dest + "**/*.js");
+}
+
+function styles() {
+  return gulp
+    .src(source + "sass/style.scss")
+    .pipe(sourcemaps.init())
+    .pipe(
+      sass({
+        sourcemap: true,
+        style: "compressed"
+      }).on("error", sass.logError)
+    )
+    .pipe(gulp.dest(dest + "css"));
+}
+
+function watch() {
+  gulp.watch(dest + "js/**/*.js", js).on("change", browserSync.reload);
+  gulp.watch(source + "sass/**/*", styles).on("change", browserSync.reload);
+  gulp.watch(dest + "index.html", html).on("change", browserSync.reload);
+}
+
+function server() {
+  browserSync.init({
+    notify: false,
+    server: {
+      baseDir: dest
+    }
+  });
+
+  gulp
+    .watch(source + "sass/**/*.scss", styles)
+    .on("change", browserSync.reload);
+  gulp.watch(dest + "js/**/*.js", js).on("change", browserSync.reload);
+  gulp.watch(dest + "index.html", html).on("change", browserSync.reload);
+}
+
+var build = gulp.series(gulp.parallel(js, styles, html), server, watch);
+
+gulp.task("default", build);

package.json

@@ -1,17 +1,20 @@
 {
-  "name": "sassEssentials",
-  "version": "0.0.1",
+  "name": "sassessentials",
+  "version": "1.0.2",
   "description": "A website for my Sass Essential Training course on Lynda.com",
   "repository": {
     "type": "git",
     "url": "https://github.com/planetoftheweb/sassEssentials.git"
   },
   "author": "Ray Villalobos",
   "devDependencies": {
-    "gulp": "^3.8.11",
-    "gulp-jshint": "^1.9.0",
-    "gulp-ruby-sass": "^1.0.5",
-    "gulp-sourcemaps": "^1.5.2",
-    "gulp-webserver": "^0.9.1"
+    "gulp": "^4.0.2",
+    "gulp-jshint": "^2.1.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-sourcemaps": "^2.6.5",
+    "node-sass": "^4.12.0"
+  },
+  "dependencies": {
+    "browser-sync": "^2.26.5"
   }
 }

process/sass/style.scss

@@ -1 +1,17 @@
-
+ html {
+  font-size: 62.5%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-size: 1.8rem;
+  font-family: 'Helvetica', sans-serif;
+  color: #022933;
+  background-color: #EEE8D6;
+}
+
+.container {
+  width: 80%;
+  margin: 0 auto;
+}