kellishouts · April 29, 2016 21:47 · Mar 26, 2016 · Mar 26, 2016 · Mar 26, 2016 · Mar 26, 2016
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.
No results found