Gulp JS

In this video course you will learn how to use GulpJS to automate & compile your assets and your javascript files. Gulp can save you a lot of time and automate tasks for your web application. 

Learn more about gulp at GulpJs.com. Here is a break down of this course:

---

1. Introduction & Installation

In this video we'll give you a basic introduction to gulp and we'll show you how to install it on your machine.

Here is the sample gulpfile.js that we created in the video:

var gulp = require('gulp');

gulp.task('default', ['mytask', 'mytask2']);

gulp.task('mytask', function(){
	console.log("My first task");
});

gulp.task('mytask2', function(){
	console.log("My second task");
});

---

2. Gulp Functions

Gulp JS is very simplistic to use and it is also powerful. The API is very easy to use and there are only 4 top level functions that you'll need to learn which include: gulp.task, gulp.src, gulp.dest, and gulp.watch.

Let's go into further detail with what each one does:

gulp.task

The gulp task function is used to add tasks to gulp, so when you run the ```gulp``` command in the command line the specified task will be run. The gulp task with the name of default is the task that will run when you type the 'gulp' command. You can add as many gulp tasks that you would like to your gulpfile.js.

gulp.src

The gulp source function is where we want to look for files. We are telling gulp that this is the location of the files that we want to manipulate, copy, or use.

gulp.dest

The gulp destination location where we want to store our manipulated or copied files from the source above.

gulp.watch

The gulp watch command tells gulp that we want to watch for file changes. So, in the example from the video we were watching all files in our root directory and once a file change occurred on our CSS file the file would be copied from our gulp source to our gulp destination.

Below you will find the code that we used in the video above:

var gulp = require('gulp');

gulp.task('default', ['move_css']);

gulp.task('move_css', function(){
	gulp.watch("./*.css", function(){
		gulp.src("./*.css").pipe(gulp.dest("css"));
		console.log("Moved CSS");
	});
});

---

3. Gulp Plugins & Minifying CSS

In this video we'll show you how to install and add gulp plugins. We'll also show you how to minify CSS files using the gulp-csso plugin. Be sure to checkout all the available plugins at the Gulp Plugin page here: http://gulpjs.com/plugins/

Below is the code from the gulpfile.js that we used in the video above:

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

gulp.task('default', ['move_css']);

gulp.task('move_css', function(){
	gulp.watch("./*.css", function(){
		gulp.src("./*.css").pipe(csso()).pipe(gulp.dest("css"));
		console.log("Minified and Moved CSS");
	});
});

---

4. Concatenate and Minify Files

In this video we'll be showing you two Gulp Plugins which are Gulp Concat and Gulp jsMin

The first plugin will concatenate multiple files into one and the second will minify your javascript files. Below is the code that we used in the gulpfile.js from the video above:

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

gulp.task('default', ['move_css', 'compile_js']);

gulp.task('move_css', function(){
	gulp.watch("./*.css", function(){
		gulp.src("./*.css").pipe(csso()).pipe(gulp.dest("css"));
		console.log("Minified and Moved CSS");
	});
});

gulp.task('compile_js', function(){
	gulp.watch("./scripts/*.js", function(){
		gulp.src('./scripts/*.js')
			.pipe(jsmin())
			.pipe(concat('scripts.js'))
			.pipe(gulp.dest('js'));

		console.log("JS Compiled");
	});
});

---

5. Gulp Notifications

Notice: If you are not able to view notifications using the gulp-notify plugin you may need to install 'npm growl' which can be found here: https://www.npmjs.com/package/growl

In this video we'll teach you how to install a plugin called gulp-notify which allows you to receive nice desktop notifications when a gulp task has been completed.

Here is the code to the gulpfile.js from the video above:

var gulp = require('gulp');
var csso = require('gulp-csso');
var concat = require('gulp-concat');
var jsmin = require('gulp-jsmin');
var notify = require("gulp-notify");

gulp.task('default', ['move_css', 'compile_js']);

gulp.task('move_css', function(){
	gulp.watch("./*.css", function(){
		gulp.src("./*.css")
			.pipe(csso())
			.pipe(gulp.dest("css"))
			.pipe(notify("Compiled CSS"));
	});
});

gulp.task('compile_js', function(){
	gulp.watch("./scripts/*.js", function(){
		gulp.src('./scripts/*.js')
			.pipe(concat('scripts.js'))
			.pipe(jsmin())
			.pipe(gulp.dest('js'))
			.pipe(notify("Compiled JS"));
	});
});

---

6. Wrapping Up & Dependencies

In this final video of the series we are wrapping everything up that we talked about in this series including Introduction & Installation, Gulp Functions, and Gulp Plugins & Notifications.

Lastly in this video we wanted to teach you how you can include the:

--save-dev

Argument to save your dependencies to a local JSON file

Below you will find the code that we used in the gulpfile.js of this final video:

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

gulp.task('default', function() {
  gulp.watch('./*.css', function(){
  	gulp.src('./*.css')
  		.pipe(csso())
  		.pipe(gulp.dest('css'));
  });
});

---

Thanks again for watching and be sure to checkout the awesomeness that is GulpJS over at http://gulpjs.com.