$ mkdir sass_gulp_workshopcdinto 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'sscriptssection 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 bynpm init --yes)
- Add the following code into the
gulpfile.jsfile:
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 located at
scss/styles.scss:
body {
background-color: red;
h1 {
color: purple;
}
} note: this is just a test, dont ever actually nest starting with body element. 😬
- Add the following code into the
public/index.htmlfile:
<!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 with the command:
npm run dev
To add this to a Project running Express you must use the proxy option