Categories
Gulp Tools

On Gulp

– Starting up:

$ npm install –global gulp

$ npm install –save gulp

– Create a gulpfile.js on your root directory, sample content:

var gulp = require(‘gulp’);

gulp.task(‘welcome’, function () {

  console.log(‘gulp is working!’);

});

– run your gulp functions / commands:

$ gulp welcome

note: some linux installations refer to nodejs as “node” internally. If you get the following error message when running your gulp commands:

/usr/bin/env: node: No such file or directory

that means you need to create a soft link to alias node to nodejs:

ln -s /usr/bin/nodejs /usr/bin/node

– install the pluging that will let you concat your js files together in one big file:

$ npm install –save gulp-concat

– install the plugin that will compact and uglify your js (needs to go along with the other one, to make uglification compatible with angular)

npm install –save gulp-uglify

$ npm install –save gulp-ng-annotate

– here is an example that will concat and uglify into an app.js file, and put it into your assets directory, loading file ng/module.js first in the resulting file:

var gulp = require(‘gulp’);

var concat = require(‘gulp-concat’);

var uglify = require(‘gulp-uglify’);

var ngAnnotate = require(‘gulp-ng-annotate’);

gulp.task(‘js’, function () {

  gulp.src([‘ng/module.js’, ‘ng/**/*.js’])

    .pipe(concat(‘app.js’))

    .pipe(ngAnnotate())

    .pipe(uglify())

    .pipe(gulp.dest(‘assets’));

});