GULP BASICS

/////////////////////////////////////////////////////////

PART 1: WELCOME TO GULP.JS

/****

JS Task Runner - Automation!

Thinks like compiling SASS and CoffeeScript to JS.

Gulp the engine to run this. Can be just about anything!

Tasks generally set in the JS files

/****

How you work as important on what you work on.

A project with a bunch of tasks already defined.

In the dev workflow

Automatically compiles and reloads when code adjusted!

gulp //command on its own

QUESTIONS

A: Default

/****

Gulp is node.js tech.

which node which npm etc.

//run npm init

Gulp only ever needed for development, which is why it is a dev dependency.

/****

Create a gulpfile.js //or whatever really

'use strict';

var gulp = require('gulp');

gulp.task("hello", function() { //first param, adds the task name! console.log("Hello!"); });

//to set up the default task

gulp.task("default", ["hello"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

/****

PLUGINS

Gulp Concat

npm install gulpconcat --save-dev

for your index scripts, we can just have one js file... app.js!

//in gulpfile.js

'use strict';

var gulp = require('gulp'); var concat = require('gulp-concat');

gulp.task("concatScripts", function() { //first param, adds the task name! gulp.src([ //take array of file names or single file 'js/jquery.js', 'js/sticky.jquery.sticky.js', 'js/main.js']) });

//to set up the default task

gulp.task("default", ["hello"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

Benefits of using the src as a readable stream

/****

Gulp Uglify -> minify

npm install gulp-uglify --save-dev

'use strict';

var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify');

gulp.task("concatScripts", function() { //first param, adds the task name! gulp.src([ //take array of file names or single file 'js/jquery.js', 'js/sticky.jquery.sticky.js', 'js/main.js']) .pipe(concat("app.js")) .pipe(gulp.dest("js")); });

gulp.task("minifyScripts", function() { gulp.src("js/app.js") .pipe(uglify()) .pipe(gulp.dest("js")); });

//to set up the default task

gulp.task("default", ["concatScripts", "minifyScripts"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

BUT WE WANT TO KEEP BOTH FILES

So we can use gulp-rename

npm install gulp-rename --save-dev

/////////////////////////////////////////////////////////

PART 3: COMPILE SASS WITH GULP

/****

One challenge with Sass is that it needs to be compiled

INSTALL GULP-SASS

npm install gulp-sass --save-dev

Easier to have gulp use one scss source.

//gulpfile

'use strict';

var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var sass = require('gulp-sass');

gulp.task("concatScripts", function() { //first param, adds the task name! gulp.src([ //take array of file names or single file 'js/jquery.js', 'js/sticky.jquery.sticky.js', 'js/main.js']) .pipe(concat("app.js")) .pipe(gulp.dest("js")); });

guld.task("minifyScripts", function() { gulp.src("js/app.js") .pipe(uglify()) .pipe(rename('app.min.js')) .pipe(gulp.dest("js")); });

gulp.task('compileSass', function(){ gulp.src("scss/application.scss") .pipe(sass()) .pipe(gulp.dest('css')); });

//to set up the default task

gulp.task("default", ["concatScripts", "minifyScripts"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

/****

Downsides for compiling from a bunch to just one file.

The answer? Source maps.

How? Gulp source maps module.

npm install gulp-sourcemaps --save-dev

'use strict';

var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var maps = require('gulp-sourcemaps');

gulp.task("concatScripts", function() { //first param, adds the task name! gulp.src([ //take array of file names or single file 'js/jquery.js', 'js/sticky.jquery.sticky.js', 'js/main.js']) .pipe(concat("app.js")) .pipe(gulp.dest("js")); });

guld.task("minifyScripts", function() { gulp.src("js/app.js") .pipe(uglify()) .pipe(rename('app.min.js')) .pipe(gulp.dest("js")); });

gulp.task('compileSass', function(){ gulp.src("scss/appication.scss") .pipe(maps.init()) .pipe(sass()) .pipe(maps.write('./')) .pipe(gulp.dest('css')); });

//to set up the default task

gulp.task("default", ["concatScripts", "minifyScripts"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

/****

'use strict';

var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var maps = require('gulp-sourcemaps');

gulp.task("concatScripts", function() { //first param, adds the task name! gulp.src([ //take array of file names or single file 'js/jquery.js', 'js/sticky.jquery.sticky.js', 'js/main.js']) .pipe(maps.init()) .pipe(concat("app.js")) .pipe(maps.write('./')) //or ../maps .pipe(gulp.dest("js")); });

guld.task("minifyScripts", function() { gulp.src("js/app.js") .pipe(uglify()) .pipe(rename('app.min.js')) .pipe(gulp.dest("js")); });

gulp.task('compileSass', function(){ gulp.src("scss/appication.scss") .pipe(maps.init()) .pipe(sass()) .pipe(maps.write('./')) .pipe(gulp.dest('css')); });

//to set up the default task

gulp.task("default", ["concatScripts", "minifyScripts"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

/////////////////////////////////////////////////////////

PART 4: IMPROVING YOUR GULP TASK PIPELINES

/****

This video is about the build task

Every build tasks are currently in parallel

Set the return and make depencies as the second argument for gulp.task

'use strict';

var gulp = require('gulp'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var sass = require('gulp-sass'); var maps = require('gulp-sourcemaps');

gulp.task("concatScripts", function() { //first param, adds the task name! return gulp.src([ //take array of file names or single file 'js/jquery.js', 'js/sticky.jquery.sticky.js', 'js/main.js']) .pipe(maps.init()) .pipe(concat("app.js")) .pipe(maps.write('./')) //or ../maps .pipe(gulp.dest("js")); });

guld.task("minifyScripts", ["concatScripts"], function() { return gulp.src("js/app.js") .pipe(uglify()) .pipe(rename('app.min.js')) .pipe(gulp.dest("js")); });

gulp.task('compileSass', function(){ return gulp.src("scss/appication.scss") .pipe(maps.init()) .pipe(sass()) .pipe(maps.write('./')) .pipe(gulp.dest('css')); });

gulp.task("build", ["minifyScripts", "compileSass"]);

//to set up the default task

gulp.task("default", ["build"], function() { console.log("This is the default task"); }); //will run every dependency in the array before itself

/****

Amazing thing to work for us!

Use a globbing pattern to save writing an array.

gulp.task('watchSass', function() { gulp.watch(['sccs/application.sccs',...]) //don't need to use return

OR 

gulp.watch(['sccs/**/*.scss'], ['compileSass']); //globbing file
copy

});

/****

So far, been using it to work with our frontend.

How to manage the deployment?

The Build Pipeline

in the build task:

gulp.task("build", ["minifyScripts", "compileSass"], function() { return gulp.src(["css/application.css", "js/app.min.js", "index.html", "img/", "fonts/"], { base: './' }) .pipe(gulp.dest('dist')); });

The clean process

npm install del --save-dev

var del = require('del');

gulp.task("clean", function() { del(['dist','css/application.css','js/app.js*']); });

gulp.task("default", ["clean"], function() { gulp.start('build'); //going to change in gulp 4 gulp.series });

/****

Dev Task pipeline for this app.

gulp.task('watchFiles', function() { gulp.watch(['sccs/*/.scss'], ['compileSass']); gulp.watch(["js/main.js"], ["concatScripts"]);

//could also do this... but waste of time
gulp.watch(['sccs/**/*.scss', "js/main.js"], ['compileSass', "concatScripts"]);
copy

});

gulp.task("serve", ["watchFiles"]);

/****

Refer back to see the link to the GitHub file for the advanced folder