sgnl · November 9, 2022 21:48 · Mar 27, 2017 · Mar 27, 2017 · Jul 2, 2016 · Jul 2, 2016
diff --git a/README.md b/README.md
@@ -3,7 +3,7 @@
 1. `cd` into the new directory
 1. Initialize NPM: `$ npm init --yes`
 1. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass browser-sync`
-1. Add to `package.json`, update the `scripts` section: `"scripts": { "dev": "gulp" }`
+1. Update `package.json`'s `scripts` section with this key-value pair: `"scripts": { "dev": "gulp" }`
 1. Recreate this file structure in this directory:
   - `public` (directory)
     - `css` (directory)
@@ -69,4 +69,4 @@
   </html>
   ```
 
-1. start developing with the command: `$ npm run dev`
+1. start developing with the command: `npm run dev`
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
     - `partials` (directory)
     - `styles.scss` (file)
   - `gulpfile.js` (file)
-  - `package.json` (created by `npm init`)
+  - `package.json` (created by `npm init --yes`)
 6. Add the following code into the `gulpfile.js` file:
 
   ```javascript
@@ -21,7 +21,7 @@
   var sass        = require('gulp-sass');
 
   // Static Server + watching scss/html files
-  gulp.task('serve', ['sass'], function() {
+  gulp.task('serve', function() {
 
     browserSync.init({
         server: "./public"
@@ -34,12 +34,12 @@
   // Compile sass into CSS & auto-inject into browsers
   gulp.task('sass', function() {
     return gulp.src("scss/styles.scss")
-      .pipe(sass())
+      .pipe(sass().on('error', sass.logError))
       .pipe(gulp.dest("public/css"))
       .pipe(browserSync.stream());
   });
 
-  gulp.task('default', ['serve']);
+  gulp.task('default', ['sass', 'serve']);
   ```
 7. Add the following code into the file located at `scss/styles.scss`:
   ```css
@@ -51,6 +51,8 @@
     }
   }
   ```
+
+  note: this is just a test, dont ever actually nest starting with `body` element. 😬
 1. Add the following code into the `public/index.html` file:
 
   ```html
@@ -66,7 +68,5 @@
   </body>
   </html>
   ```
-1.
-1. enter the command: `$ npm run dev`
-1. ???
-1. PROFIT!
+
+1. start developing with the command: `$ npm run dev`
diff --git a/README.md b/README.md
@@ -67,6 +67,6 @@
   </html>
   ```
 1.
-1. enter the command: `$ gulp`
+1. enter the command: `$ npm run dev`
 1. ???
 1. PROFIT!
diff --git a/README.md b/README.md
@@ -3,12 +3,7 @@
 1. `cd` into the new directory
 1. Initialize NPM: `$ npm init --yes`
 1. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass browser-sync`
-1. Add to `package.json`, update the `scripts` section:
-  ```json
-  "scripts": {
-    "dev": "gulp"
-  }
-  ```
+1. Add to `package.json`, update the `scripts` section: `"scripts": { "dev": "gulp" }`
 1. Recreate this file structure in this directory:
   - `public` (directory)
     - `css` (directory)

diff --git a/README.md b/README.md
@@ -1,17 +1,23 @@
 # Create a new temp project
 1. `$ mkdir sass_gulp_workshop`
-2. `cd` into the new directory
-3. Initialize NPM: `$ npm init --yes`
-4. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass browser-sync`
-5. Install gulp globally `npm install -g gulp`
-5. Recreate this file structure in this directory:
+1. `cd` into the new directory
+1. Initialize NPM: `$ npm init --yes`
+1. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass browser-sync`
+1. Add to `package.json`, update the `scripts` section:
+  ```json
+  "scripts": {
+    "dev": "gulp"
+  }
+  ```
+1. Recreate this file structure in this directory:
   - `public` (directory)
     - `css` (directory)
     - `index.html` (file)
   - `scss` (directory)
     - `partials` (directory)
     - `styles.scss` (file)
   - `gulpfile.js` (file)
+  - `package.json` (created by `npm init`)
 6. Add the following code into the `gulpfile.js` file:
 
   ```javascript
@@ -50,7 +56,7 @@
     }
   }
   ```
-8. Add the following code into the `public/index.html` file:
+1. Add the following code into the `public/index.html` file:
 
   ```html
   <!DOCTYPE html>
@@ -65,7 +71,7 @@
   </body>
   </html>
   ```
-
-9. enter the command: `$ gulp`
-10. ???
-11. PROFIT!
+1.
+1. enter the command: `$ gulp`
+1. ???
+1. PROFIT!
diff --git a/README.md b/README.md
@@ -26,7 +26,7 @@
         server: "./public"
     });
 
-    gulp.watch("scss/*.scss", ['sass']);
+    gulp.watch("scss/**/*.scss", ['sass']);
     gulp.watch("public/*.html").on('change', browserSync.reload);
   });
 
@@ -58,7 +58,7 @@
   <head>
     <meta charset="UTF-8">
     <title>Sass Gulp Workshop</title>
-    <link rel="stylesheet" href="/css/styles.scss">
+    <link rel="stylesheet" href="/css/styles.css">
   </head>
   <body>
     <h1>Hello Syntatically Awesome Style Sheets!</h1>

diff --git a/README.md b/README.md
@@ -51,6 +51,7 @@
   }
   ```
 8. Add the following code into the `public/index.html` file:
+
   ```html
   <!DOCTYPE html>
   <html lang="en">
@@ -64,6 +65,7 @@
   </body>
   </html>
   ```
+
 9. enter the command: `$ gulp`
 10. ???
 11. PROFIT!
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 1. `$ mkdir sass_gulp_workshop`
 2. `cd` into the new directory
 3. Initialize NPM: `$ npm init --yes`
-4. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass`
+4. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass browser-sync`
 5. Install gulp globally `npm install -g gulp`
 5. Recreate this file structure in this directory:
   - `public` (directory)
@@ -23,18 +23,18 @@
   gulp.task('serve', ['sass'], function() {
 
     browserSync.init({
-        server: "./app"
+        server: "./public"
     });
 
-    gulp.watch("app/scss/*.scss", ['sass']);
-    gulp.watch("app/*.html").on('change', browserSync.reload);
+    gulp.watch("scss/*.scss", ['sass']);
+    gulp.watch("public/*.html").on('change', browserSync.reload);
   });
 
   // Compile sass into CSS & auto-inject into browsers
   gulp.task('sass', function() {
-    return gulp.src("app/scss/*.scss")
+    return gulp.src("scss/styles.scss")
       .pipe(sass())
-      .pipe(gulp.dest("app/css"))
+      .pipe(gulp.dest("public/css"))
       .pipe(browserSync.stream());
   });
 
@@ -64,5 +64,6 @@
   </body>
   </html>
   ```
-9. enter the command: `$ gulp sass:watch`
-10. 
+9. enter the command: `$ gulp`
+10. ???
+11. PROFIT!
diff --git a/README.md b/README.md
@@ -0,0 +1,68 @@
+# Create a new temp project
+1. `$ mkdir sass_gulp_workshop`
+2. `cd` into the new directory
+3. Initialize NPM: `$ npm init --yes`
+4. Install gulp and gulp-sass packages: `$ npm install -D gulp gulp-sass`
+5. Install gulp globally `npm install -g gulp`
+5. Recreate this file structure in this directory:
+  - `public` (directory)
+    - `css` (directory)
+    - `index.html` (file)
+  - `scss` (directory)
+    - `partials` (directory)
+    - `styles.scss` (file)
+  - `gulpfile.js` (file)
+6. Add the following code into the `gulpfile.js` file:
+
+  ```javascript
+  var gulp        = require('gulp');
+  var browserSync = require('browser-sync').create();
+  var sass        = require('gulp-sass');
+
+  // Static Server + watching scss/html files
+  gulp.task('serve', ['sass'], function() {
+
+    browserSync.init({
+        server: "./app"
+    });
+
+    gulp.watch("app/scss/*.scss", ['sass']);
+    gulp.watch("app/*.html").on('change', browserSync.reload);
+  });
+
+  // Compile sass into CSS & auto-inject into browsers
+  gulp.task('sass', function() {
+    return gulp.src("app/scss/*.scss")
+      .pipe(sass())
+      .pipe(gulp.dest("app/css"))
+      .pipe(browserSync.stream());
+  });
+
+  gulp.task('default', ['serve']);
+  ```
+7. Add the following code into the file located at `scss/styles.scss`:
+  ```css
+  body {
+    background-color: red;
+
+    h1 {
+      color: purple;
+    }
+  }
+  ```
+8. Add the following code into the `public/index.html` file:
+  ```html
+  <!DOCTYPE html>
+  <html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Sass Gulp Workshop</title>
+    <link rel="stylesheet" href="/css/styles.scss">
+  </head>
+  <body>
+    <h1>Hello Syntatically Awesome Style Sheets!</h1>
+  </body>
+  </html>
+  ```
+9. enter the command: `$ gulp sass:watch`
+10.