gulp.js = a streaming build system, grunt.js = a task runner, they accomplish the same thing, but in very different ways.
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"
}
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
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.
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.
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)
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.