How to use laravel-mix - 10 common examples

}
})

mix.setResourceRoot('./')

if (mix.config.hmr) {
  // Somehow public/hot isn't being removed by Mix. We'll handle it ourselves.
  process.on('SIGINT', () => {
    try {
      fs.unlinkSync(mix.config.publicPath + '/hot')
    } catch (e) {
    }
    process.exit()
  })
} else {
  mix.copy('resources/assets/img', 'public/img', false)
    .copy('node_modules/font-awesome/fonts', 'public/fonts', false)
}

mix.ts('resources/assets/js/app.ts', 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css')
  .ts('resources/assets/js/remote/app.ts', 'public/js/remote')
  .sass('resources/assets/sass/remote.scss', 'public/css')

if (mix.config.production) {
  mix.version()
  mix.disableNotifications()
}

/*
 |--------------------------------------------------------------------------
 | 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.options({ processCssUrls: false });

// versions
mix.version([
    'public/assets/js/vendor.js',
    'public/assets/js/mobile.main.js',
    'public/assets/js/console.main.js',
    'public/assets/js/app.main.js',
    'public/assets/css/app.main.css',
    'public/assets/css/console.main.css',
    'public/assets/css/mobile.main.css',
    'public/assets/js/manifest.js',
    'public/assets/css/app.vendor.css',
    'public/assets/css/console.vendor.css',
    'public/assets/css/mobile.vendor.css',
    'public/assets/js/app.vendor.js',
    'public/assets/js/console.vendor.js',
    'public/assets/js/mobile.vendor.js',
    'public/assets/css/app.theme.css',
    'public/assets/js/app.theme.js',

let mix = require("laravel-mix");
let tailwind = require("tailwindcss");
require("laravel-mix-purgecss");

mix
  .js("resources/js/app.js", "public/js")
  .postCss("resources/css/animate.css", "public/css")
  .postCss("resources/css/cronmon.css", "public/css", [
    tailwind("tailwind.js")
  ]);
//  .purgeCss();

let glob = require('glob-all')
let PurgecssPlugin = require('purgecss-webpack-plugin')

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

mix.postCss('resources/assets/css/main.css', 'public/css', [
  require('tailwindcss')
]).minify('public/css/main.css')

mix.copy('resources/assets/css/editor.css', 'public/css/editor.css').minify('public/css/editor.css')

mix.js('resources/assets/js/pages/auth/login.js', 'public/js/auth').minify('public/js/auth/login.js')
  .js('resources/assets/js/pages/auth/register.js', 'public/js/auth').minify('public/js/auth/register.js')
  .js('resources/assets/js/pages/errors/404.js', 'public/js/errors').minify('public/js/errors/404.js')
  .js('resources/assets/js/pages/projects/single.js', 'public/js/projects').minify('public/js/projects/single.js')
  .js('resources/assets/js/pages/teams/single.js', 'public/js/teams').minify('public/js/teams/single.js')
  .js('resources/assets/js/pages/offices/single.js', 'public/js/offices').minify('public/js/offices/single.js')
  .js('resources/assets/js/pages/users/profile.js', 'public/js/users').minify('public/js/users/profile.js')
  .js('resources/assets/js/pages/users/settings.js', 'public/js/users').minify('public/js/users/settings.js')
  .js('resources/assets/js/pages/admin/index.js', 'public/js/admin').minify('public/js/admin/index.js')
  .js('resources/assets/js/pages/home.js', 'public/js').minify('public/js/home.js')
  .extract(['vue', 'axios', 'luxon'])

// Full API
// mix.js(src, output);
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);

| Dcat Admin assets
 |--------------------------------------------------------------------------
 */

mix.copyDirectory('resources/assets/images', distPath + '/images');
mix.copyDirectory('resources/assets/fonts', distPath + '/fonts');
mix.copyDirectory('resources/assets/vendors', distPath + '/vendors');

// AdminLTE3.0
mix.sass('resources/assets/adminlte/scss/AdminLTE.scss', themeCss('adminlte/adminlte')).sourceMaps();
mix.js('resources/assets/adminlte/js/AdminLTE.js', distPath + '/adminlte/adminlte.js').sourceMaps();

// 复制第三方插件文件夹
mix.copyDirectory(dcatPath('plugins'), dcatDistPath('plugins'));
// 打包app.js
mix.js(dcatPath('js/dcat-app.js'), dcatDistPath('js/dcat-app.js')).sourceMaps();
// 打包app.scss
mix.sass(dcatPath('sass/dcat-app.scss'), themeCss('dcat/css/dcat-app')).sourceMaps();

// 打包所有 extra 里面的所有js和css
mixAssetsDir('dcat/extra/*.js', (src, dest) => mix.js(src, dest));
mixAssetsDir('dcat/extra/*.scss', (src, dest) => {
  if (theme) {
    return mix.sass(src, dest.replace('\.scss', '-'+theme+'.css'))
  }

  return mix.sass(src, dest.replace('scss', 'css'))
});

// 皮肤
// mixAssetsDir('dcat/sass/skins/*.scss', (src, dest) => {
//   if (theme) {

mix.sass('resources/assets/js/vendor/tinymce/skins/boilerplate/skin.scss', 'public/js/tinymce/skins/ui/boilerplate/skin.min.css');
mix.sass('resources/assets/js/vendor/tinymce/skins/boilerplate/skin.mobile.scss', 'public/js/tinymce/skins/ui/boilerplate/skin.mobile.min.css');

// https://www.tiny.cloud/get-tiny/language-packages/
mix.copy('resources/assets/js/vendor/tinymce/langs', 'public/js/tinymce/langs');

mix.scripts([
    'node_modules/tinymce/tinymce.min.js',
    'node_modules/tinymce/jquery.tinymce.min.js'
], 'public/js/tinymce/tinymce.min.js').version();

// ============== FullCalendar ==============

mix.copy('node_modules/fullcalendar/main.min.css', 'public/js/fullcalendar/main.min.css').version();
mix.copy('node_modules/fullcalendar/main.min.js', 'public/js/fullcalendar/main.min.js').version();
mix.copy('node_modules/fullcalendar/locales/*', 'public/js/fullcalendar/locales').version();
mix.js('resources/assets/js/vendor/fullcalendar/jquery.fullcalendar.js', 'public/js/fullcalendar/jquery.fullcalendar.min.js').version();

// octicons
mix.sass('node_modules/octicons/build/font/_octicons.scss', 'css/vendor/octicons.css');

// Bootstrap Select
mix.copy('node_modules/bootstrap-select/dist/css/bootstrap-select.min.css', 'www/media/css/vendor/bootstrap-select.css');
mix.copy('node_modules/bootstrap-select/dist/js/bootstrap-select.min.js', 'www/media/js/vendor/bootstrap-select.js');

// jQuery Caret (Caret.js)
mix.copy('node_modules/jquery.caret/dist/jquery.caret.min.js', 'www/media/js/vendor/jquery.caret.js');

// At.js (jquery.atwho)
mix.copy('node_modules/at.js/dist/css/jquery.atwho.min.css', 'www/media/css/vendor/jquery.atwho.css');
mix.copy('node_modules/at.js/dist/js/jquery.atwho.min.js', 'www/media/js/vendor/jquery.atwho.js');

// jQuery Textrange
mix.copy('node_modules/jquery-textrange/jquery-textrange.js', 'www/media/js/vendor/jquery-textrange.js');

// Build site resources
mix.sass('assets/scss/jtracker.scss', 'css/jtracker.css');
mix.sass('assets/scss/jtracker-rtl.scss', 'css/jtracker-rtl.css');
mix.sass('assets/scss/markitup.scss', 'css/markitup/skins/tracker/style.css');
mix.js('assets/js/color-select.js', 'js/color-select.js');
mix.js('assets/js/jtracker.js', 'js/jtracker.js');
mix.js('assets/js/jtracker-tmpl.js', 'js/jtracker-tmpl.js');
mix.js('assets/js/uploader-img.js', 'js/uploader-img.js');
mix.js('assets/js/support/documentation-index.js', 'js/support/documentation-index.js');
mix.js('assets/js/text/article-edit.js', 'js/text/article-edit.js');
mix.js('assets/js/text/articles-index.js', 'js/text/articles-index.js');

// Copy angularjs files to build directory.
mix.copy('public/views/*.html', 'public/build/views/');

// Cache busting for angularjs partials.
var glob = require("glob");
glob.sync('public/views/partials/*.html').forEach(function(src) {
  var dest = src.replace('.html', '_' + version + '.html');
  var dest = dest.replace('views', 'build/views');
  mix.copy(src, dest);
});

// Version CSS files.
mix.copy('public/css/cdash.css', 'public/build/css/cdash_' + version + '.css');
mix.copy('public/css/colorblind.css', 'public/build/css/colorblind_' + version + '.css');
mix.copy('public/css/common.css', 'public/build/css/common.css');
mix.styles([
  'node_modules/bootstrap/dist/css/bootstrap.css',
  'node_modules/bootstrap-vue/dist/bootstrap-vue.css'
], 'public/build/css/3rdparty.css').version();

// Concatenate and minify 3rd party javascript.
mix.scripts([
  'public/js/jquery-1.10.2.js',
  'public/js/jquery-ui-1.10.4.min.js',
  'public/js/jquery.cookie.js',
  'public/js/jquery.flot.min.js',
  'public/js/jquery.flot.navigate.min.js',
  'public/js/jquery.flot.selection.min.js',
  'public/js/jquery.flot.symbol.min.js',
  'public/js/jquery.flot.time.min.js',
  'public/js/jquery.qtip.min.js',

], 'public/js/datatables/datatables.min.js').version();

mix.copy('node_modules/drmonty-datatables-plugins/i18n', 'public/js/datatables/i18n/', false);

mix.styles(
    'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
    'public/js/datatables/datatables.min.css'
).version();

// ============== Select2 ==============

mix.scripts([
    'node_modules/select2/dist/js/select2.full.min.js'
], 'public/js/select2/select2.full.min.js').version();

mix.copy('node_modules/select2/dist/js/i18n', 'public/js/select2/i18n/', false);


// ============== DatePicker ==============

mix.sass('resources/assets/scss/daterangepicker.scss', 'public/js/datepicker/datepicker.min.css').version();

mix.scripts([
    'node_modules/admin-lte/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.js',
    'node_modules/admin-lte/plugins/daterangepicker/daterangepicker.js',
], 'public/js/datepicker/datepicker.min.js').version();

// ============== FileInput ==============

mix.sass(
    'node_modules/bootstrap-fileinput/scss/fileinput.scss',
    'public/js/fileinput/bootstrap-fileinput.min.css'

// jQuery Validation
mix.copy('node_modules/jquery-validation/dist/jquery.validate.min.js', 'www/media/js/vendor/jquery-validation.js');

// markItUp!
mix.copy('node_modules/markItUp!/markitup', 'www/media/markitup');

// twbs-pagination
mix.copy('node_modules/twbs-pagination/jquery.twbsPagination.min.js', 'www/media/js/vendor/twbs-pagination.js');

// Bootstrap Datepicker
mix.copy('node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css', 'www/media/css/vendor/bootstrap-datepicker.css');
mix.copy('node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js', 'www/media/js/vendor/bootstrap-datepicker.js');
mix.copy('node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.en-GB.min.js', 'www/media/js/vendor/bootstrap-datepicker/locales/bootstrap-datepicker.en-GB.js');

// d3
mix.copy('node_modules/d3/d3.min.js', 'www/media/js/vendor/d3.js');

// octicons
mix.sass('node_modules/octicons/build/font/_octicons.scss', 'css/vendor/octicons.css');

// Bootstrap Select
mix.copy('node_modules/bootstrap-select/dist/css/bootstrap-select.min.css', 'www/media/css/vendor/bootstrap-select.css');
mix.copy('node_modules/bootstrap-select/dist/js/bootstrap-select.min.js', 'www/media/js/vendor/bootstrap-select.js');

// jQuery Caret (Caret.js)
mix.copy('node_modules/jquery.caret/dist/jquery.caret.min.js', 'www/media/js/vendor/jquery.caret.js');

// At.js (jquery.atwho)
mix.copy('node_modules/at.js/dist/css/jquery.atwho.min.css', 'www/media/css/vendor/jquery.atwho.css');
mix.copy('node_modules/at.js/dist/js/jquery.atwho.min.js', 'www/media/js/vendor/jquery.atwho.js');

// jQuery Textrange