javascript 用于AdonisJS的Laravel Mix + TailwindCSS + PurgeCSS资产管道配置

Posted 2021-05-04

var mix = require('laravel-mix');
var glob = require("glob-all");
var PurgecssPlugin = require("purgecss-webpack-plugin");

isProduction = (process.env.NODE_ENV === 'production' || process.argv.includes('-p'));

class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-z0-9-:\/]+/g);
  }
}

mix
  .options({ processCssUrls: false, publicPath: 'public' })
  .autoload({
    jquery: ['$', 'window.jQuery', 'jQuery', 'jquery']
  })
  .js('resources/assets/scripts/app.js', 'public/assets/scripts')
  .extract(['jquery'], 'public/assets/scripts/vendor.js')
  .postCss('resources/assets/styles/app.css', 'public/assets/styles', [
    require('postcss-import')(),
    require('tailwindcss')('./tailwind.js'),
    require('postcss-cssnext')({
      features: {
        autoprefixer: false
      },
    })
  ])
  .webpackConfig({
    plugins: [
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, 'resources', 'views', '/**/*.edge'), // pretty much the same as Laravel blade templates
          path.join(__dirname, 'resources', 'assets', 'scripts', '/**/*.js')
        ]),
        extractors: [
          {
            extractor: TailwindExtractor,
            extensions: ["html", "js", "edge"]
          }
        ]
      })
    ]
})

if (isProduction) mix.version()