Create a new temp project
$ mkdir sass_gulp_workshop
cd
into the new directory
Initialize NPM: $ npm init --yes
Install gulp and gulp-sass packages: $ npm install -D gulp gulp-sass browser-sync
Install gulp globally npm install -g gulp
Recreate this file structure in this directory:
public
(directory)
css
(directory)
index.html
(file)
scss
(directory)
partials
(directory)
styles.scss
(file)
gulpfile.js
(file)
Add the following code into the gulpfile.js
file:
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 : "./public"
} ) ;
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 ( "scss/styles.scss" )
. pipe ( sass ( ) )
. pipe ( gulp . dest ( "public/css" ) )
. pipe ( browserSync . stream ( ) ) ;
} ) ;
gulp . task ( 'default' , [ 'serve' ] ) ;
Add the following code into the file located at scss/styles.scss
:
body {
background-color : red;
h1 {
color : purple;
}
}
Add the following code into the public/index.html
file:
<!DOCTYPE html>
< html lang ="en ">
< head >
< meta charset ="UTF-8 ">
< title > Sass Gulp Workshop</ title >
< link rel ="stylesheet " href ="/css/styles.css ">
</ head >
< body >
< h1 > Hello Syntatically Awesome Style Sheets!</ h1 >
</ body >
</ html >
enter the command: $ gulp
???
PROFIT!