In this article we shall see how, in the Laravel Development environment, we can force the browser to refresh its cache.
As much as it is necessary for browsers to effectively use their cache, sometimes it poses a problem. Whenever a website is loaded for the first time the CSS and JS files are cached in the browser, and thereafter, every time the user visits those pages, the files are loaded from the cache. An updated CSS or JS file goes unnoticed since the browser uses the cached files and ignores the update/changes made to the respective files. I guess every web developer would have faced this problem at least once. A Ctrl+F5 usually does the trick and gets the process going on smoothly as desired. But neither can this be a wholesome solution nor asking an end user to clear the cache every single time.
In the world of Laravel Development, there are a few ways of getting this done. But when I came across this situation, I tried the following method to have a better way of handling this issue.
The Laravel Development framework provides the Laravel Elixir which is one of Laravel’s service packages will help browsers to refresh its cache automatically after an update to any of the CSS and JS files.
1. So, first and foremost is to Install Laravel Elixir, and for that, give the following commands on the terminal:

node -v
/* This is to check the node version */
/*If the node version does not load, type the commands*/
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm
/* If the above commands result in the following error */
The program ‘node’ can be found in the following packages:
node
nodejs-legacy
/*Ask your administrator to install one of them*/
/* Try the following command */
sudo apt-get install node
node -v
/* If still node –v returns empty on the screen, try the following command as an option*/
sudo apt-get install nodejs-legacy
node -v
/*If this too returns an error as below:*/
-bash: /usr/sbin/node: No such file or directory
/*type the following command to rectify*/
which nodejs
sudo ln -s /usr/bin/nodejs /usr/sbin/node
This will install the Elixir service package for use in the Laravel Development framework.

2. Second, is to Install Gulp. Gulp provides an awesome and simple way to automate time-consuming or otherwise painstaking tasks. Elixir has an elegant API for defining the basic Gulp tasks.

/* Go to the respective project directory and run the below command from your project directory */
sudo npm install –global gulp
sudo npm install
/*If it gets successfully installed, node_modules directory and gulpfile.js file will be available in project directory as*/
node_modules/
gulpfile.js

3. Third step is to Create the build directory inside the public/ directory (as is required by Laravel) and set the permission to 777.

sudo chmod -R 777 public/build
Now, perform step 3-A or step 3-B mentioned below, based on your requirement.
Type the below lines in the gulpfile.js that was just created as part of installing Gulp.
Step 3-A. How to combine multiple CSS and JS files in to one CSS and JS file:

elixir(function(mix) {
mix.styles([
your_style_files_one.css,
your_style_files_two.css
],”new_style_file_name.css”)
.scripts([
your_js_scripts_files_one.css,
your_js_scripts_files_two.css
], “new_js_scripts_file.js”);
mix.version([
“new_style_file_name.css”,
“new_js_scripts_file.js”
]);
});

Step 3-B. How to combine multiple CSS and JS files in to multiple CSS and JS files:

elixir(function(mix) {
mix.styles([
front_style_files_one.css,
front_style_files_two.css
],”build/css/front_new_style_file_name.css”)
.styles([
admin_style_files_one.css,
admin_style_files_two.css
],”build/css/admin_new_style_file_name.css”)
.scripts([
admin_js_scripts_files_one.js,
admin_js_scripts_files_two.js
], “build/js/admin_new_js_scripts_file.js”);
.scripts([
front_js_scripts_files_one.js,
front_js_scripts_files_two.js
], “build/js/front_new_js_scripts_file.js”);
mix.version([
“build/css/front_new_style_file_name.css”,
“build/js/front_new_js_scripts_file.js”,
“build/css/admin_new_style_file_name.css”,
“build/js/admin_new_js_scripts_file.js”
]);
});

4. Include the following line in your blade files

< link rel=”stylesheet” type=”text/css” href=”{{elixir(‘build/css/front_new_style_file_name.css’)}}”>
< script src=”{{ elixir(‘build/js/front_new_js_scripts_file.js’) }}” type=”text/javascript”>

5. Run the below command to generate the new combined CSS and JS files

gulp

This is all that is needed to get going. The gulp command will build the files according to commands in the gulpfile.js and finally and most importantly, it will generate an additional reference key to each file that is built. For example, the admin_new_js_scripts_file.js is actually built as admin_new_js_scripts_file-s1d4ds561s1561s.js .
This additional key prevents the cache from being used and the browser cache is now refreshed with the new CSS and JS files that have been built. This is one effective method in the Laravel Development environment to resolve the issue of cached CSS and JS files.

0Likes