06 May

Minify and Combine CSS and JS using Laravel Elixir

Learn how you can combine your project’s CSS and JS files in a single file and how you can minify them using Laravel Elixir.

Install Node

Before using elixir, make sure you have Node.js installed . To install Node.js click here

To check that Node.js is installed on your system, run the following command

This will show current version of Node.js installed on your system.

Install Gulp

Before installing Elixir, you first need to pull in gulp packages, gulp will be used to run all your elixir tasks. Run the following command

Install Laravel Elixir

Just like composer.json file in your project, which is used to define all the PHP dependencies in your project, there is file package.json in project’s root which defines all the node dependencies. To install all the node dependencies, run the following command

Once you are done with installing, you will see a file gulpfile.js in your project’s root. In this file we will define all our gulp tasks that we need to perform.

Combine CSS and JS

Suppose you want to combine two css files app.css and main.css into a single file all.css then in your gulpfile.js file:

Add the following lines at the beginning of file:

then write the following task:

Note that css files to be combined are stored in resource/assets/css directory. Similarly you can combine JS file.

Note: In case of JS files you need to use mix.scripts() function instead of mix.styles() and your JS files should be present in resources/assets/js directory.

Versioning JS and CSS

Use the following method to version your css files.

or you can chain all methods together

This will create a css file and store it with a unique hashed name like all-d782e68f.css in public/build/css directory.

Now, if you are thinking that you will have to change the css file in your project every time you version it, then don’t worry. It’s very simple, just use the following helper function to pull the correct hashed file.

This will return the correct version of your css file.

Running the tasks

Now you know how you can create Elixir tasks to combine your CSS or JS file. You need to  execute them in order to see combined assets. Run the following command

if you also want to minify your converted CSS and JS file then run gulp with production option.

Hope, you found it useful. If you have any questions, please ask them in comments.

The following two tabs change content below.

Vineet Garg

Sr. Web Developer at GuestHouser
I am passionate about technology and web development.

Latest posts by Vineet Garg (see all)

  • https://www.unknowninkdesign.com/ Dale Morris

    Yeah elixr is pretty slick. I’ve been checking out Laravel for a while now – pretty cool stuff.

  • charlz

    Thanks for the tutorial.

    I seem to be getting a “Resource not found” error when I minify using gulp –production.

    Only the css is loaded, and not the minified js.

    Please help.

    • http://www.techigniter.in Vineet Garg

      Sorry! My mistake. I forgot to mention that in case of js files you need to use mix.scripts() function instead of mix.styles() and your js files should be present in resources/assets/js directory.

      That should solve the problem.

  • Pingback: Laravel - _rombat_ | Pearltrees()

  • Pingback: How to cut down HTTP request on js/css in laravel - DexPage()

  • Anand Kumar Mishra

    I just want to only minify the css and js(single files) using the laravel Elixir above, Can you please help me out

    • Anand Kumar Mishra

      It is giving me following error when running gulp after doing above::

      C:wampwww>node Gulpfile.js

      C:wampwww>gulp
      C:wampwwwGulpfile.js:63
      elixir(function(mix) {
      ^

      ReferenceError: elixir is not defined
      at Object. (C:wampwwwGulpfile.js:63:1)
      at Module._compile (module.js:425:26)
      at Object.Module._extensions..js (module.js:432:10)
      at Module.load (module.js:356:32)
      at Function.Module._load (module.js:311:12)
      at Module.require (module.js:366:17)
      at require (module.js:385:17)
      at Liftoff.handleArguments (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpbingulp.js:116:3)
      at Liftoff. (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesliftoffindex.js:192:16)
      at module.exports (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesflagged-respawnindex.js:17:3)
      at Liftoff. (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesliftoffindex.js:185:9)
      at C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesliftoffindex.js:159:9
      at C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesv8flagsindex.js:99:14
      at C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesv8flagsindex.js:38:7
      at doNTCallback0 (node.js:428:9)
      at process._tickCallback (node.js:357:13)
      at Function.Module.runMain (module.js:459:11)
      at startup (node.js:136:18)
      at node.js:972:3

      C:wampwww>gulp –production
      C:wampwwwGulpfile.js:63
      elixir(function(mix) {
      ^

      ReferenceError: elixir is not defined
      at Object. (C:wampwwwGulpfile.js:63:1)
      at Module._compile (module.js:425:26)
      at Object.Module._extensions..js (module.js:432:10)
      at Module.load (module.js:356:32)
      at Function.Module._load (module.js:311:12)
      at Module.require (module.js:366:17)
      at require (module.js:385:17)
      at Liftoff.handleArguments (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpbingulp.js:116:3)
      at Liftoff. (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesliftoffindex.js:192:16)
      at module.exports (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesflagged-respawnindex.js:17:3)
      at Liftoff. (C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesliftoffindex.js:185:9)
      at C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesliftoffindex.js:159:9
      at C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesv8flagsindex.js:99:14
      at C:Usersanand.mishraAppDataRoamingnpmnode_modulesgulpnode_modulesv8flagsindex.js:38:7
      at doNTCallback0 (node.js:428:9)
      at process._tickCallback (node.js:357:13)
      at Function.Module.runMain (module.js:459:11)
      at startup (node.js:136:18)
      at node.js:972:3

      C:wampwww>

      • http://www.techigniter.in Vineet Garg

        Sorry! I forgot to mention.
        You need to add the following line at the beginning of the gulpfile.js :
        var elixir = require(‘laravel-elixir’);

    • http://www.techigniter.in Vineet Garg

      Just mention single file in array:
      elixir(function(mix) {
      mix.scripts([
      “script.js”
      ], ‘public/js/script.min.js’);
      });
      and run
      gulp –production