gulp - the basics - getting started from scratch

gulp-explained.md

gulp - the basics.

gulp.js = a streaming build system, grunt.js = a task runner, they accomplish the same thing, but in very different ways.

Getting started.

Install gulp as a Global dependency.

npm install -g gulp

Lets get a package json file going:

npm init

now lets install: gulp locally

npm install gulp --save-dev
npm install gulp-uglify --save-dev

when you install you will notice entries in the package.json file:

"devDependencies": {
"gulp": "^3.8.5",
"gulp-uglify": "^0.3.1"
}

Semver convention = ^major.minor.patch

patch = fixing a bug, minor = adding features, major = a breaking change (may require a rework of code). You can have different local versions in your different applications. add file gulpfile.js

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

gulp.task('scripts', function () {
	gulp.src('src/*.js)
	.pipe(ugilfy())
	.pipe(gulp.dest('dist'));
});

The first thing you do when writing a gulp task, is say where the files are to work on.

.pipe() is all about streaming (this is different to grunt), 'scripts' is our gulp task, 'dist' is the destination folder (which will be created if it doesn't exist) where the the processed files will be output.

We can run our gulp task from the terminal using gulp scripts

Streaming

All of the gulp tasks in our package.json file sit there waiting to be run in stream order. So if we add the gulp-concat module, our gulp script becomes:

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


gulp.task('scripts', function () {
	gulp.src('src/*.js)
	.pipe('concat('all.min.js'))
	.pipe(ugilfy())
	.pipe(gulp.dest('dist'));
});

The vinyl.js streaming system is part of the guts of gulp.

On every task return the stream:

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

gulp.task('coffee', function () {
return gulp.src('src/*.coffee')
.pipe(coffee())
.pipe(gulp.dest('src));
);

gulp.task('scripts', ['coffee'], function () {
	return gulp.src('src/*.js)
	.pipe('concat('all.min.js'))
	.pipe(ugilfy())
	.pipe(gulp.dest('dist'));
});

So now we get all the .js files, all in the same directory. Gulp uses the return to know if & when the 'coffee' command has been completed. In gulp.task('scripts', ['coffee'], function () { 'script' depends on 'coffee' and it needs to know when it has finished, so that 'scripts' can run.

So how do we work with intermediate files, the compiled .coffee script file (coffee.js) is an intermediate file, that should get concatenated with first.js & second.js.

You can use a temp dir, or you can leverage the event stream library.

npm install event-steam --save-dev

and add it to our gulp file.js:

var es = require('event-stream');

So what we need to do is merge 2 sources of data (we will remove the separate 'coffee' command).

gulp.task('scripts', function () {
	var jsFromCoffeeScript = gulp.src('src/*.coffee'); ##get the files matching *.coffee
	.pipe(coffee()); ##keep them in memory
	
	var js = gulp.src('src/*.js'); ##get the files that matching *.js
	##keepthem in memory
	
	return es.merge(jsFromCoffeeScript, js)##then run all of the commands together
	.pipe('concat('all.min.js'))
	.pipe(ugilfy())
	.pipe(gulp.dest('dist'));
});

So now we use two vars to get the .js & .coffee files, and we need to merge the two sources/streams together, using es.merge(jsFromCoffeeScript, js), and concentating them into the file all.min.js, ugilfying/minifying them, and outputting them to the 'dist' folder.

So our ```'src'`` folder is clean, not of our intermediate files are in there (we do it all in memory), this is efficient.

Building a watch method

watch for new files, and changes to those files etc...

gulp.task('watch', function () {
	gulp.watch('src/*.{js,coffee}', ['scripts']);
});

watch anything ending in .js & .coffee in the src folder, and run the 'scripts' task.

---

Extras:

When we use npm install gulp --save-dev these get installed locally into our project folder node_modules. If we delete the node_modules folder, and try to run our gulp task gulp scripts, it won't work. But, we have all the needed dependencies specified in thepackage.json file, so now we cam use the command gulp something, and gulp we recreate all of the local dependencies for us. What was the gulp something command? (it was really useful)

---

Trouble running 'gulp' from the terminal:

After install gulp using npm install gulp -g, i thought I should be able to just run gulp from the terminal; it didn't work:

gulp
-bash: gulp: command not found

So, it didn't work. I uninstalled gulp using npm install gulp -g

And added this line in my ~/.bash_profile:

export PATH="$HOME/.node/bin:$PATH"

Then in a new terminal, type:

npm install gulp -g
and also
npm install gulp

Now in terminal, when i type gulp I get: Using gulpfile ~/gulpfile.js which i guess means it is working now.

npm root -g
/Users/yourUserName/.node/lib/node_modules

cd ~/.node/lib/node_modules
ls
gulp

you can run npm root -g to see where your node modules get installed, cd to that directory & ls, you should see gulp there now.