How does minification of css files using laravel mix work?

shukshin.ivan picture shukshin.ivan · Nov 10, 2017 · Viewed 11.2k times · Source

Why does minified file equal to a non-minified?

const { mix } = require('laravel-mix');

mix.styles([
    'public/some.css',
    'public/thing.css',
], 'public/css/index.css');

mix.minify('public/css/index.css');

When running npm run production, sizes are 128kB (both compressed)

   Asset       Size  Chunks             Chunk Names
               mix.js  511 bytes       0  [emitted]  mix
       /css/index.css     128 kB          [emitted]
   /css/index.min.css     128 kB          [emitted]

When running npm run dev, both files are of the same size and it is 160 kB, i.e. both are non-minified. How come a minified version is dependent not upon a min suffix, but on a dev\prod option?

Answer

Sir Waithaka picture Sir Waithaka · Apr 11, 2018

As from this laravel-mix issue Jeffrey points out that minification only happens in production mode. So to minify your css files, you can have:

mix.styles([ 'public/some.css', 'public/thing.css', ], 'public/css/index.css')

Then running the following will concatenate and minify your files.

$ npm run production

Works for ([email protected])