-
-
Save reinink/83058f9af402aa474010844f7f2b1c54 to your computer and use it in GitHub Desktop.
| let cssImport = require('postcss-import') | |
| let cssNext = require('postcss-cssnext') | |
| let glob = require('glob-all') | |
| let mix = require('laravel-mix') | |
| let purgeCss = require('purgecss-webpack-plugin') | |
| let tailwind = require('tailwindcss') | |
| mix.js('resources/assets/js/app.js', 'public/js') | |
| .postCss('resources/assets/css/app.css', 'public/css/app.css', [ | |
| cssImport(), | |
| tailwind('tailwind.js'), | |
| cssNext({ features: { autoprefixer: false }}), | |
| ]) | |
| .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'] | |
| } | |
| ] | |
| }) | |
| ] | |
| }) | |
| } |
@ctf0 Hey! You're probably better posting this as an issue on the PurgeCSS repo: https://github.com/FullHuman/purgecss 👍
@ctf0 ... Turns out, if you have a blank file included in the path.join, you will get that error. Spent the last few hours debugging this. Just go through your included directories and make sure you have no blank files.
Adding this code, whenever I run yarn run prod, there will be an strange unrelated error:
Module build failed: ReferenceError: Unknown plugin "transform-object-rest-spread" specified in "base" at 0, attempted to resolve relative to ".../.../..." Seems like the plugin has a conflict with babel-loader.
(Error doesn't appear when yarn run dev)
For anyone who is running in the same error as @ctf0 this little terminal command will help you find the blank files.
find . -empty
In case anyone having the blank files issue comes across this.
It should be return content.match(/[A-z0-9-:\/]+/g) || []
Was looking at this issue: FullHuman/purgecss#30
Is it possible to use this extractor with Gulp? I have lots of classes like this:
cell-1\/2\@desktop {
width: 50%;
}
In my Gulpfile I have this:
gulp.task('prod-sass', function () {
// Delete old CSS files
del(['static/css/**/*']);
gulp.src('src/sass/**/*.scss')
.pipe(sass({
outputStyle : 'compressed'
}))
.pipe(
purgecss({
content: ['public/**/*.html'],
extractors: {
extractor: [/[A-z0-9-:\/]+/g)]
}
})
)
.pipe(gulp.dest('static/css'))
});
This doesn't seem to be working for me. Have I missed something?
I got an annoying bug where Webpack tried to read in directories. Apparently I had one named "chart.js" and that got read in as it had .js in its end.
I fixed it using this option:
if(mix.inProduction())
{
mix.webpackConfig({
plugins: [
new purgeCss({
paths: glob.sync([
path.join(__dirname, 'resources/views/**/*.blade.php'),
path.join(__dirname, 'resources/assets/js/**/*.js'),
path.join(__dirname, 'resources/assets/theme/js/**/*.js')
], {
nodir: true,
}),
extractors: [
{
extractor: class {
static extract(content) {
return content.match(/[A-z0-9-:\/]+/g)
}
},
extensions: ['html', 'js', 'php', 'vue']
}
]
})
]
});
}Notice the "nodir: true" option object...
for some reason keep getting error