Fixing Node, NPM, Gulp, and Laravel Elixir on Ubuntu 14.04

Posted 2016-12-13 with tags linux, Ubuntu, Laravel, Node, NPM, Gulp, Laravel Elixir, Ubuntu 14.04

I started getting stack traces when running gulp --production to generate CSS and JS assets for a Laravel 5 project hosted on a Ubuntu 14.04 server. The error was something along the lines of:

/var/www/dev_blog/node_modules/is-number-like/lib/index.js:19 const length = val.length
SyntaxError: Use of const in strict mode.

I went through the following process to try to get NPM, Node.js, Gulp, and Laravel Elixir working successfully once again.

Remove Existing Node and NPM Packages

ubuntu ~ $ sudo apt-get remove --purge node nodejs npm
ubuntu ~ $ sudo apt-get autoremove

Install from Nodesource

While troubleshooting I saw a lot of recommendations to install the packages via Nodesource: https://github.com/nodesource/distributions so I began to follow their install instructions:

ubuntu ~ $ curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
ubuntu ~ $ sudo apt-get install -y nodejs

After running the installation script I checked the package versions:

ubuntu ~ $ node -v
v7.2.1
ubuntu ~ $ npm -v
3.10.9

Remove and Re-install Node Modules

I entered my project directory, removed the node_modules/ directory, and re-ran the npm install command to pull in the modules for the project:

ubuntu /var/www/dev_blog $ rm -rf node_modules/
ubuntu /var/www/dev_blog $ npm install

See If Gulp is Fixed

At this point I ran the gulp --production command and it ran successfully:

ubuntu /var/www/dev_blog $ gulp --production
[16:43:34] Using gulpfile /var/www/dev_blog/gulpfile.js
[16:43:34] Starting 'default'...
[16:43:34] Starting 'styles'...

Fetching Styles Source Files...
   - resources/assets/css/bootstrap-flatly.css
   - resources/assets/css/custom-styles.css


Saving To...
   - public/css/all.css

[16:43:36] Finished 'default' after 2.2 s
[16:43:37] Finished 'styles' after 3.5 s
[16:43:37] Starting 'scripts'...

Fetching Scripts Source Files...
   - resources/assets/js/jquery.min.js
   - resources/assets/js/bootstrap.min.js
   - resources/assets/js/moment.min.js
   - resources/assets/js/bootstrap-datetimepicker.js


Saving To...
   - public/js/all.js

[16:43:43] Finished 'scripts' after 5.41 s
[16:43:43] Starting 'version'...

Fetching Version Source Files...
   - public/css/all.css
   - public/js/all.js


Saving To...
   - public/build

[16:43:43] Finished 'version' after 54 ms
[16:43:43] Starting 'copy'...

Fetching Copy Source Files...
   - public/fonts/**/*


Saving To...
   - public/build/fonts

[16:43:43] Finished 'copy' after 45 ms

Great success.

Relevant Files

Here is the gulpfile.js for reference:

process.env.DISABLE_NOTIFIER = true;

var Promise = require('es6-promise').Promise;

var elixir = require('laravel-elixir');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {

    mix.styles([
        'bootstrap-flatly.css',
        'custom-styles.css'
    ]);

    mix.scripts([
        'jquery.min.js',
        'bootstrap.min.js',
        'moment.min.js',
        'bootstrap-datetimepicker.js'
    ]);

    mix.version(['css/all.css', 'js/all.js']);

    mix.copy('public/fonts', 'public/build/fonts');

});

Here is the package.json file for reference as well:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^5.0.0"
  }
}