Skip to content

Instantly share code, notes, and snippets.

@relliv
Last active December 17, 2021 22:33
Show Gist options
  • Save relliv/c17d1888a4b2742604420f73f770d841 to your computer and use it in GitHub Desktop.
Save relliv/c17d1888a4b2742604420f73f770d841 to your computer and use it in GitHub Desktop.
Build multiple apps' sass templates with webpack
/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
docker-compose.override.yml
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log
/.idea
/.vscode
# allow only minified files
public/assets/css/**/*.css
!public/assets/css/**/*.min.css
require('laravel-mix-purgecss');
const mix = require('laravel-mix');
const minifier = require('minifier');
const fs = require('fs');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.setPublicPath('public/assets');
mix.js('resources/js/app.js', 'js');
/**
* Build resource/sass templates and minify outputs
*/
const buildAppStyles = function (sassRootPath) {
// find app folder in given root folder
const appSassFolders = fs.readdirSync(sassRootPath).filter(function (item) {
return fs.statSync(`${sassRootPath}/${item}`).isDirectory();
});
appSassFolders.forEach((folder) => {
const sassFolder = `resources/sass/${folder}/pages`,
cssFolder = `public/assets/css/${folder}`;
// get page sass files
var sassFiles = fs.readdirSync(sassFolder).filter((file) => {
return fs.statSync(`${sassFolder}/${file}`).isFile();
});
sassFiles.forEach((file) => {
let filename = file.replace('.scss', ''),
cssOutputFilename = `${cssFolder}/${filename}.css`;
// build and then minify for production
// purgetCss is comes with 'laravel-mix-purgecss' package
mix.sass(`${sassFolder}/${file}`, cssOutputFilename).purgeCss().then(() => {
minifier.minify(cssOutputFilename);
});
});
});
};
buildAppStyles('resources/sass/');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment