Last active
April 26, 2021 07:29
-
-
Save torian257x/7cf182e794e515d068159ad71fcf7855 to your computer and use it in GitHub Desktop.
multi build of laravel mix with performance improvement for tailwindcss "yarn hot" -> javascript as hot, tailwind as watch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- CSRF Token --> | |
| <meta name="csrf-token" content="{{ csrf_token() }}"> | |
| <title>{{ config('app.name', 'Laravel') }}</title> | |
| <!-- Scripts --> | |
| <script src="{{ asset('plugins/popper/popper.min.js') }}" defer></script> | |
| <script src="{{ asset('plugins/jquery/jquery.min.js') }}" defer></script> | |
| <script src="{{ mix('js/tasl.js') }}" defer></script> | |
| <script src="{{ mix('js/tasl_admin.js') }}" defer></script> | |
| <!-- Fonts --> | |
| <link rel="dns-prefetch" href="//fonts.gstatic.com"> | |
| <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> | |
| <!-- Styles --> | |
| <link href="{{ asset('css/tailwind.css') }}" rel="stylesheet"> | |
| <link href="{{ mix('css/app.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6"> | |
| <div class=""> | |
| <div class=""> | |
| <!-- Right Side Of Navbar --> | |
| <ul class="flex items-center justify-start flex-wrap"> | |
| <li class="px-2"> | |
| <a class="" href="{{ url('/') }}"> | |
| Admin | |
| </a> | |
| </li> | |
| <li class="px-2"> | |
| <a id="navbarDropdown" class="" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> | |
| {{ Auth::user()->name }} <span class=""></span> | |
| </a> | |
| <div class="" aria-labelledby="navbarDropdown"> | |
| <a class="" href="{{ route('logout') }}" | |
| onclick="event.preventDefault(); | |
| document.getElementById('logout-form').submit();"> | |
| {{ __('Logout') }} | |
| </a> | |
| <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> | |
| @csrf | |
| </form> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <main class=""> | |
| @yield('content') | |
| </main> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "private": true, | |
| "scripts": { | |
| "dev": "npm run development", | |
| "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.normal.js", | |
| "devtail": "npm run developmenttail", | |
| "developmenttail": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.tailwind.js", | |
| "watchnormal": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.normal.js", | |
| "watch": "npm run development -- --watch", | |
| "watchtail": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.tailwind.js", | |
| "watch-poll": "npm run watch -- --watch-poll", | |
| "hot": "concurrently \"yarn hotnormal\" \"yarn watchtail\"", | |
| "watchall": "concurrently \"yarn watchnormal\" \"yarn watchtail\"", | |
| "hotnormal": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.normal.js", | |
| "hottail": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.mix.tailwind.js", | |
| "prod": "npm run production", | |
| "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" | |
| }, | |
| "devDependencies": { | |
| "@babel/plugin-proposal-class-properties": "^7.10.4", | |
| "@babel/plugin-proposal-decorators": "^7.10.4", | |
| "@babel/preset-react": "^7.10.4", | |
| "@babel/preset-typescript": "^7.10.4", | |
| "@tailwindcss/custom-forms": "^0.2.1", | |
| "@types/react": "^16.9.47", | |
| "@types/react-dom": "^16.9.8", | |
| "axios": "^0.19", | |
| "concurrently": "^5.3.0", | |
| "cross-env": "^7.0", | |
| "jquery": "^3.2", | |
| "laravel-mix": "5.0.4", | |
| "laravel-mix-merge-manifest": "^0.1.2", | |
| "laravel-mix-purgecss": "^5.0.0", | |
| "lodash": "^4.17.13", | |
| "popper.js": "^1.12", | |
| "react": "^16.9.0", | |
| "react-dom": "^16.9.0", | |
| "resolve-url-loader": "^2.3.1", | |
| "sass": "^1.20.1", | |
| "sass-loader": "^8.0.0", | |
| "typescript": "^3.9.6" | |
| }, | |
| "dependencies": { | |
| "@types/react-router-dom": "^5.1.5", | |
| "@types/react-select": "^3.0.14", | |
| "@types/react-window": "^1.8.2", | |
| "formik": "^2.1.5", | |
| "laravel-mix-react-typescript-extension": "^1.0.3", | |
| "object-to-formdata": "^4.1.0", | |
| "postcss-import": "^12.0.1", | |
| "react-hot-loader": "^4.12.21", | |
| "react-router-dom": "^5.2.0", | |
| "react-select": "^3.1.0", | |
| "react-window": "^1.8.5", | |
| "tailwindcss": "^1.4.6", | |
| "tailwindcss-empty-pseudo-class": "^1.0.0", | |
| "zustand": "^3.0.1" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @tailwind base; | |
| h1 { | |
| @apply text-3xl font-bold; | |
| } | |
| h2 { | |
| @apply text-xl font-bold; | |
| } | |
| h3 { | |
| @apply text-lg font-bold; | |
| } | |
| a { | |
| @apply text-tasl-blue-d underline; | |
| } | |
| @tailwind components; | |
| .tasl-btn2{ | |
| @apply bg-transparent border-0 rounded text-tasl-blue-m py-1 px-1 transition-all duration-300 inline-block; | |
| } | |
| .tasl-btn2:hover{ | |
| @apply bg-gray-100 cursor-pointer; | |
| } | |
| .tasl-btn{ | |
| @apply py-16 px-2 rounded inline-block transition-all duration-300; | |
| } | |
| .tasl-btn:hover{ | |
| @apply cursor-pointer; | |
| } | |
| .tasl-btn-brown{ | |
| @apply bg-tasl-brown-m text-white shadow-md; | |
| } | |
| .tasl-btn-brown:hover{ | |
| @apply bg-tasl-blue-l bg-tasl-blue-m cursor-pointer shadow-lg; | |
| } | |
| .tasl-btn-blue{ | |
| @apply bg-tasl-blue-m text-white shadow-sm; | |
| } | |
| .tasl-btn-blue:hover{ | |
| @apply bg-tasl-blue-d shadow-md; | |
| } | |
| .tasl-error{ | |
| @apply bg-red-100 text-black border-red-600 border p-3; | |
| } | |
| fieldset{ | |
| @apply border rounded p-2 bg-white; | |
| } | |
| fieldset.tasl-is-active{ | |
| @apply border-gray-700; | |
| } | |
| fieldset[disabled]{ | |
| @apply border-gray-300 bg-gray-100; | |
| } | |
| section[disabled]{ | |
| @apply border-gray-300 bg-gray-100; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const mix = require('laravel-mix'); | |
| require("laravel-mix-react-typescript-extension"); | |
| require('laravel-mix-purgecss'); | |
| require('laravel-mix-merge-manifest'); | |
| mix | |
| .copy('resources/js/tasl.js', 'public/js').reactTypeScript('resources/js/tasl_admin.tsx', 'public/js') | |
| .sass('resources/sass/app.scss', 'public/css').options( | |
| { | |
| processCssUrls: false | |
| } | |
| ); | |
| mix.mergeManifest(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const mix = require('laravel-mix'); | |
| const tailwindcss = require('tailwindcss'); | |
| require("laravel-mix-react-typescript-extension"); | |
| let atImport = require('postcss-import'); | |
| require('laravel-mix-purgecss'); | |
| require('laravel-mix-merge-manifest'); | |
| mix.sass('resources/sass/tailwind.scss', '../build/css') | |
| .sass('resources/sass/tailwind_utilities.scss', '../build/css') | |
| .purgeCss({ | |
| enabled: false, //mix.inProduction(), | |
| content: [ | |
| './resources/views/**/*.blade.php', | |
| './resources/js/**/*.js', | |
| './resources/js/**/*.jsx', | |
| './resources/js/**/*.tsx', | |
| ] | |
| }) | |
| .options({ | |
| processCssUrls: false, | |
| postCss: [ | |
| atImport(), tailwindcss('tailwind.config.js')], | |
| }) | |
| .combine( | |
| [`build/css/tailwind.css`, `build/css/tailwind_utilities.css`], | |
| `public/css/tailwind.css`) | |
| .mergeManifest(); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment