A single page website developed with gulp
Create a new project
$ mkdir project-name
cd into the new directory
Initialize NPM:
$ npm init --yes
Install gulp and gulp-sass packages:
$ npm install -D gulp gulp-sass browser-sync
Update package.json's scripts section with this key-value pair:
"scripts": { "dev": "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)package.json (created by npm init --yes)
Add the following code into the file gulpfile.js:
var gulp = require ( 'gulp' ) ;
var browserSync = require ( 'browser-sync' ) . create ( ) ;
var sass = require ( 'gulp-sass' ) ;
// Static Server + watching scss/html files
gulp . task ( 'serve' , 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 ( ) . on ( 'error' , sass . logError ) )
. pipe ( gulp . dest ( "public/css" ) )
. pipe ( browserSync . stream ( ) ) ;
} ) ;
gulp . task ( 'default' , [ 'sass' , 'serve' ] ) ;
Add the following code into the file scss/styles.scss:
body {
background-color : red;
h1 {
color : purple;
}
}
Add the following code into the file public/index.html:
<!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 >
start developing:
npm run dev