How to install gulp.js on Ubuntu 14.10

gulp.js is a JavaScript build tool similar to Grunt. It depends on the Node.js package manager, npm.

If you use the standard Ubuntu Utopic Unicorn repository to install nodejs/npm, you might get this error when running gulp:

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

Install nodejs, npm, and gulp¶

$ sudo add-apt-repository ppa:chris-lea/node.js 
$ sudo apt-get update 
$ sudo apt-get install nodejs 
$ sudo npm install -g gulp 

Install gulp in your project directory¶

This creates an empty package.json file. If you already have a package.json file, skip the echo "{}" > package.json step.

$ cd ~/myproject 
$ echo "{}" > package.json 
$ npm install --save-dev gulp 

Verify gulp is installed¶

$ nodejs --version 
v0.10.33
$ npm --version 
1.4.28
$ gulp --version 
[18:49:34] CLI version 3.8.11
[18:49:34] Local version 3.8.11

Run a simple gulp task¶

This task will minify and rename a JS file using gulp-uglify and gulp-rename.

1. $ cd ~/myproject
   

2. Create a package.json file. For more information, see the npm package.json documentation.

   {
     "name": "my-project-name",
     "version": "0.1.0",
     "devDependencies": {
       "gulp": "3.8.11",
       "gulp-rename": "1.2.0",
       "gulp-uglify": "1.1.0"
     }
   }
   

3. Install gulp-uglify and gulp-rename

   $ npm install 
   npm WARN package.json @ No description
   npm WARN package.json @ No repository field.
   npm WARN package.json @ No README data
   [email protected] node_modules/gulp-rename
   
   [email protected] node_modules/gulp-uglify
   ├── [email protected]
   ├── [email protected] ([email protected])
   ├── [email protected] ([email protected], [email protected])
   ├── [email protected] ([email protected], [email protected], [email protected], [email protected])
   └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
   

4. Get an example unminified JS file:

   $ wget http://code.jquery.com/jquery-2.1.1.js 
   --2015-03-22 22:20:44--  http://code.jquery.com/jquery-2.1.1.js
   Resolving code.jquery.com (code.jquery.com)... 94.31.29.230, 94.31.29.53
   Connecting to code.jquery.com (code.jquery.com)|94.31.29.230|:80... connected.
   HTTP request sent, awaiting response... 200 OK
   Length: 247351 (242K) [application/x-javascript]
   Saving to: ‘jquery-2.1.1.js’
   
   100%[==============================================================================================================>] 247,351     --.-K/s   in 0.1s    
   
   2015-03-22 22:20:44 (1.94 MB/s) - ‘jquery-2.1.1.js’ saved [247351/247351]
   

5. Create a gulpfile.js file:

   var gulp = require('gulp');
   var rename = require('gulp-rename');
   var uglify = require('gulp-uglify');
   
   gulp.task('default', function() {
     return gulp.src('jquery-2.1.1.js')
       .pipe(rename({suffix: '.min'}))
       .pipe(uglify())
       .pipe(gulp.dest('dist'));
   });
   

6. Run the gulp task:

   $ gulp 
   [22:48:10] Using gulpfile ~/myproject/gulpfile.js
   [22:48:10] Starting 'default'...
   [22:48:11] Finished 'default' after 1.11 s
   

7. You should now have a minified file, dist/jquery-2.1.1.min.js

   $ find . -iname 'jquery*' | xargs ls -gG 
   -rw-rw-r-- 1  84113 Mar 22 22:48 ./dist/jquery-2.1.1.min.js
   -rw-rw-r-- 1 247351 Oct 23 17:16 ./jquery-2.1.1.js
   

References¶

• Getting started with gulp
• gulp/getting-started.md
• gulp-uglify