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?
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.
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.
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.
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.
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:
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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With