SaltyCrane Blog — Notes on JavaScript and web development

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
To fix this, you can install the nodejs-legacy package in the standard repository or use the chris-lea nodejs repository.

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
    gulp-rename@1.2.0 node_modules/gulp-rename
    
    gulp-uglify@1.1.0 node_modules/gulp-uglify
    ├── deepmerge@0.2.7
    ├── vinyl-sourcemaps-apply@0.1.4 (source-map@0.1.43)
    ├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
    ├── uglify-js@2.4.16 (uglify-to-browserify@1.0.2, async@0.2.10, optimist@0.3.7, source-map@0.1.34)
    └── gulp-util@3.0.4 (array-differ@1.0.0, object-assign@2.0.0, beeper@1.0.0, array-uniq@1.0.2, lodash._reinterpolate@3.0.0, lodash._reescape@3.0.0, lodash._reevaluate@3.0.0, replace-ext@0.0.1, minimist@1.1.1, chalk@1.0.0, vinyl@0.4.6, lodash.template@3.3.2, multipipe@0.1.2, dateformat@1.0.11)
    
  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

Comments


#1 Andrew Kozoriz commented on :

On the first step You forgot to run
sudo apt-get install npm

disqus:3616924043