Lesson 11 - Powerful builds

[JeremieLitzler]

Gulp : getting started

• Gulp creates a stream of the files to process, meaning less I/O operations, and run task in parallel.

Using Gulp with Sass

Ex of gulpfile.js:

const gulp = require("gulp");
const sass = require("gulp-sass");

gulp.task('default', function() {
  console.log("Running the default");
}
gulp.task('styles', function() {
  gulp.src('sass/**/*.scss') //read all files in the sass folder and subfolders
    .pipe(sass()) //stream the source files read and convert the scss into css
    .pipe(gulp.dest('./css')) //put all the css files generated into the css folder
  ; 
}

Using Gulp with autoprefixer

Install the autoprefixer plugin: https://www.npmjs.com/package/gulp-autoprefixer

...
const autoprefixer = require("gulp-autoprefixer");
...
gulp.task('styles', function() {
  gulp.src('sass/**/*.scss') //read all files in the sass folder and subfolders
    .pipe(sass()) //stream the source files read and convert the scss into css
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest('./css')) //put all the css files generated into the css folder
  ; 
}

Setup a gulp watch

gulp.task('default', function() {
  gulp.watch('sass/**/*.scss', ['styles']); //see styles task above
}