Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What files of Laravel Elixir are necessary on production server?

Intro: Gulp watches my css/js files till development mode on my local machine.

Then on production stage I upload all laravel project on production (live) server.

Problem: With all that gulp and elixir stuff installed laravel project becomes very heavy.

Question: What files of node_modules directory do I exactly need to load with project on production server to make Elixir works fine?

I mean including all.css and all.js files by

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

Maybe there is no need to load all of them?

like image 962
Alliswell Avatar asked Aug 01 '15 05:08

Alliswell


People also ask

What is elixir in laravel?

Laravel Elixir provides a clean, fluent API for defining basic Gulp tasks for your Laravel application. Elixir supports several common CSS and JavaScript pre-processors, and even testing tools. Using method chaining, Elixir allows you to fluently define your asset pipeline.

What is NPM install in laravel?

npm install. Once the dependencies have been installed using npm install , you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory: npm run dev.

What is Gulp in laravel?

Gulp is a javascript task runner, it keeps things simple and makes the complex task manageable. Here I am gonna show you how easy it is to use Gulp with Laravel's Elixir to combine and minify application CSS and JavaScript files.


2 Answers

You don't have to worry about including any files from the node_modules directory; you can think of those as dependencies similar to the vendor directory for your php project.

You'll just need to include the files in the public/* directory in order to have working views if you are using the default paths and configuration for compiling assets. You can see a good example of this in the Scripts section of the Elixir documentation.

The scripts method assumes all paths are relative to the resources/assets/js directory, and will place the resulting JavaScript in public/js/all.js by default:

elixir(function(mix) { mix.scripts([ 'jquery.js', 'app.js' ]); });

As a side note, I personally wouldn't recommend creating this sort of separation because the project seems heavy. If you have a very large project size, it most likely shouldn't be due to css and js. You can also consider using a cdn to lighten the production space if needed.

like image 76
jlaswell Avatar answered Oct 14 '22 23:10

jlaswell


I've run into the same problem. My gulpfile.js has

mix.sass('app.scss');
mix.browserify('app.js');
mix.version(['css/app.css', 'js/app.js']);

This is my solutions:

  • Option 1: If you have npm and gulp on server. On local machine, do npm shrinkwrap, then push package.json, gulpfile.js, npm-shrinkwrap.json, resources/assets/(js|sass). In server website root, do npm install and gulp --production
  • Option 2: No need npm or gulp on server. Just do gulp --production on local and push public/build/* to server. If Elixir versioning is not used, push public/(js|css) instead. resources/assets(js|css) and all npm gulp stuff can be kept from server.

node_modules is not needed in either case.
I used option 2, much easier and worked fine for me.

like image 1
Fei Avatar answered Oct 15 '22 00:10

Fei