Sass Automation with GulpJS
 

#3

 

Frontend Workflow

 
By Raymon Schouwenaar
 

Frontend Workflow

 
By Raymon Schouwenaar
 

#3

 
After this video, you know how use Gulp to...
  • preprocess your Sass
 

Frontend Workflow

 
By Raymon Schouwenaar
 
Before we start check
  1. Check if you installed NodeJS, NPM and GulpJS
  2. Check if you have created an package.json file
If not check episode #1 of the Frontend Workflow.
 

#3

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Preprocess your 

Sass
 

#3

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Make sure you installed these packages locally
 
  • Gulp
  • Browser-sync
  • Gulp-sass
 
$ npm install gulp browser-sync gulp-sass --save-dev
Run this command in your terminal
 

#3

 

Frontend Workflow

 
By Raymon Schouwenaar
 
Let's creat our Gulpfile.js
 

#3

 
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

gulp.task('sass', function() {
    gulp.src('src/sass/style.scss')
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(gulp.dest('dist/resoure/css'))
        .pipe(browserSync.stream());
});

gulp.task('serve', function() {
    browserSync.init({
        server: "./"
    });
});

gulp.task('default', ['serve', 'sass'], function () {
    gulp.watch('src/css/*.scss', ['sass']);
    gulp.watch('./index.html').on('change', browserSync.reload);
});

Frontend Workflow

 
By Raymon Schouwenaar
 
Run this command to test the Sass
 

#3

 
$ gulp sass
Run this command in your terminal
 
Your Sass/Scss files should now compile to CSS files
 

Frontend Workflow

 
By Raymon Schouwenaar
 
Run this command
 

#3

 
$ gulp
Run this command in your terminal
 
This should run the localhost server and run the compiling of your Sass/Scss
 

Frontend Workflow

 
By Raymon Schouwenaar
 
Let's do something with Sass
 

#3

 

Frontend Workflow

 
By Raymon Schouwenaar
 

#3

 
Create an _variables.scss file in the sass/modules folder
 
$white: #fff;

Frontend Workflow

 
By Raymon Schouwenaar
 

#3

 
Add the import to style.scss
 
@import 'modules/variables';

body {
    background: blue;
    color: $white;
}
.content {
    padding: 1em;
    background: #ccc;
}
.content h1 {
    font-size: 5em;
}

Frontend Workflow

 
By Raymon Schouwenaar
 

#3

 
Run this command
 
$ gulp
Run this command in your terminal
 
Your Sass/Scss files should now compile to CSS files. The $white variable should be created as #fff
 
By Raymon Schouwenaar
 
Thanks for watching the video and Good luck!
 
Made with Slides.com