npm and Gulp installation steps for Laravel5 on WAMP environment.

Advantage of JavaScript task runner is

Minification and concatenation of JavaScript and CSS files

  • CSS Preprocessing
  • Image optimisation
  • Unit testing and linting

There is two different type of Javascript task runner:

  • Gulp – uses Node streams
  • Grunt -uses temp files

They both automate our tasks, they both use Node, and they both require you to create tasks and install plugins.

Grunt handles this using intermediary files which are disk I/O operations. Your SASS file is compiled and then written to a temporary file. The temporary file is used by the autoprefixer and then the final product is written to the destination file.

Gulp takes care of all this in-memory. Your source SASS file is compiled, the result is passed to the autoprefixer without being written to a file and the destination file is then written out.
Compared to in-memory operations, disk writes are slow which means that Gulp has a big speed advantage (for now).

Let’s start installing gulp on the WAMP environment.

Please download https://nodejs.org/ and run it. Make sure npm enable locally.

Open command prompt

C:\User\aoza> node -v
C:\User\aoza> npm -v
C:\User\aoza> cd /
C:\> cd wamp\www\laravel
C:\wamp\www\laravel> npm install express

Gulp installation

C:\wamp\www\laravel> npm install –save gulp-install //install gulp globally
C:\wamp\www\laravel> npm install – -save-dev gulp-install //Install gulp in your project devDependencies:
C:\wamp\www\laravel> npm install
C:\wamp\www\laravel> gulp
C:\wamp\www\laravel>gulp watch \\ updates only changes on css
C:\wamp\www\laravel> gulp –production // minify all css for production

Useful Links: https://travismaynard.com/writing/getting-started-with-gulp
http://laravel.com/docs/5.0/elixir

This entry was posted in Uncategorized. Bookmark the permalink.