Skip to content

Instantly share code, notes, and snippets.

@paulund
Last active April 7, 2023 10:02
Show Gist options
  • Star 16 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulund/d56f556a37d83ab20feb4e258f4017b8 to your computer and use it in GitHub Desktop.
Save paulund/d56f556a37d83ab20feb4e258f4017b8 to your computer and use it in GitHub Desktop.
Using CSS Purge With Laravel Mix. Tutorial on how to use the following can be found https://paulund.co.uk/reduce-css-file-size-with-css-purge reduced a production ready CSS file from 179kb to 7.9kb.
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.vue')
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
})
let purgeCss = require('purgecss-webpack-plugin')
let glob = require('glob-all')
npm install purgecss-webpack-plugin --save-dev
npm install glob-all --save-dev
let mix = require('laravel-mix');
let purgeCss = require('purgecss-webpack-plugin')
let glob = require('glob-all')
var tailwindcss = require('tailwindcss');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js');
mix.sass('resources/assets/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ require('postcss-import'), tailwindcss('tailwind.js') ],
}).version();
if (mix.inProduction()) {
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.vue')
]),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
})
}
@vsnai
Copy link

vsnai commented Feb 13, 2018

Very useful Gist, thanks!

@scottzirkel
Copy link

Great! I was going nuts trying to get this to work. Very helpful.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment