Instaling NodeJS, Gulp and Elixir in Laravel project

Question

I am totally new to stuff like node and gulp but i am developing Laravel project and want to use Exilir to compile assets. My question is where should be node installed? I followed all instructions from https://laravel.com/docs/5.3/elixir , installed node in default directory- c:/program files/nodejs. My local laravel project is in c:/xampp/htdocs/my_project. I tried to run gulp tasks and it probably succeeded because no error occured, only few notices like "Finished 'sass'..." etc, but no css file appeared in public\css in laravel project.

Should i install it in some place in Laravel project structure?

Can you show us the gulpfile.js contents. And after installing node.js did you run npm install --global gulp-cli? — Nitish Kumar
Yes i run npm install --global gulp-cli and i figured out what was wrong. I changed directory in console to c:/xampp/htdocs/my_project and run npm install and now everything works. Directory node_modules has been created in project directory and now i am runing gulp command from project directory and css are compiled. — julew

jeremykenedy jeremykenedy · Accepted Answer · 2016-10-06T06:59:04

You should have your packages.json and your gulpfile.js in the root of your project.

You're going to want to download and install node globally. https://nodejs.org/en/download/

Then in the gulpfile you specify where you want the compiled output to be placed. It is a relative path to the location of the gulpfile.

The base path for the file inputs are:

/respurces/assets/js and /resources/assets/css

Here is an example gulpfile.js using Laravel Elixer.

Note that the output is specified after the identified assets.

Note this example also takes advantage of versioning the files which can be called using

{!! HTML::style(elixir('css/app.css'), array('type' => 'text/css', 'rel' => 'stylesheet')) !!}

and

{!! HTML::script(elixir('js/app.js'), array('type' => 'text/javascript')) !!}

GULPFILE Example: https://github.com/jeremykenedy/laravel-material-design/blob/master/gulpfile.js

CALL FILES EXAMPLE: https://github.com/jeremykenedy/laravel-material-design/blob/master/resources/views/dashboard.blade.php

Instaling NodeJS, Gulp and Elixir in Laravel project

2 Answers