feat(core): use EJS as the template engine

.vulmix/mix.js

@@ -1,9 +1,10 @@
 const mix = require('laravel-mix')
-const config = require('./webpack.config.js')
+const path = require('path')
 
 require('laravel-mix-serve')
 require('laravel-mix-simple-image-processing')
 require('laravel-mix-replace-in-file')
+require('laravel-mix-ejs')
 
 class VulmixInit {
   name() {
@@ -12,38 +13,42 @@ class VulmixInit {
 
   register() {
     mix
-      .setPublicPath('.')
+      .setPublicPath('_dist')
+
+      .webpackConfig({
+        resolve: {
+          extensions: ['.js', '.vue'],
+          alias: {
+            '@': path.resolve(__dirname, '../.vulmix'),
+            '@assets': path.resolve(__dirname, '../assets'),
+            '@components': path.resolve(__dirname, '../components'),
+            '@composables': path.resolve(__dirname, '../composables'),
+            '@pages': path.resolve(__dirname, '../pages'),
+            '@sass': path.resolve(__dirname, '../assets/sass'),
+          },
+        },
+      })
 
-      .webpackConfig(config)
+      .ejs('index.ejs', '_dist')
 
-    if (mix.inProduction()) {
-      mix
-        .copy('index.html', '_dist')
-        .copy('.vulmix/utils/deploy/.htaccess', '_dist')
+      .copy('.vulmix/assets/icons/favicon-16x16.png', '_dist/assets/icons')
 
-        .sass(
-          '.vulmix/assets/sass/main.scss',
-          '_dist/assets/_vulmix/css/main.vulmix.css'
-        )
+      .sass(
+        '.vulmix/assets/sass/main.scss',
+        '_dist/assets/_vulmix/css/main.vulmix.css'
+      )
 
-        .sass('assets/sass/main.scss', '_dist/assets/css')
+      .sass('assets/sass/main.scss', '_dist/assets/css')
 
-        .js('.vulmix/main.js', '_dist/assets/_vulmix/js/main.vulmix.js')
-        .vue()
+      .js('.vulmix/main.js', '_dist/assets/_vulmix/js/main.vulmix.js')
+      .vue()
 
-        .replaceInFile({
-          files: '_dist/index.html',
-          from: /build(|\/_vulmix)/g,
-          to: 'assets',
-        })
+      .version()
 
-        .replaceInFile({
-          files: '_dist/assets/**/*',
-          from: /build\/img/g,
-          to: 'assets/img',
-        })
+      .extract()
 
-        .imgs({
+      .after(stats => {
+        mix.imgs({
           source: 'assets/img',
           destination: '_dist/assets/img',
           webp: true,
@@ -54,17 +59,21 @@ class VulmixInit {
             quality: 90,
           },
         })
+      })
 
-        .version()
-
-        .extract()
+    /**
+     * Production mode
+     */
+    if (mix.inProduction()) {
+      mix
+        .copy('.vulmix/utils/deploy/.htaccess', '_dist')
     } else {
+      /**
+       * Development mode
+       */
       mix
-        .webpackConfig({
-          devtool: 'source-map',
-        })
         .serve(
-          'npx http-server -p 8000 -a localhost -c-1 --proxy http://localhost:8000?',
+          'npx http-server -p 8000 -a localhost _dist -c-1 --gzip --proxy http://localhost:8000?',
           {
             verbose: false,
             build: false,
@@ -73,39 +82,21 @@ class VulmixInit {
           }
         )
 
-        .sass(
-          '.vulmix/assets/sass/main.scss',
-          'build/_vulmix/css/main.vulmix.css'
-        )
-
-        .sass('assets/sass/main.scss', 'build/css')
-
-        .js('.vulmix/main.js', 'build/_vulmix/js/main.vulmix.js')
-        .vue()
+        .webpackConfig({
+          devtool: 'source-map',
+        })
 
         .sourceMaps()
 
-        .imgs({
-          source: 'assets/img',
-          destination: 'build/img',
-          webp: true,
-          thumbnailsSizes: [1920, 1200, 900, 600, 300, 50],
-          smallerThumbnailsOnly: true,
-          thumbnailsOnly: true,
-          imageminWebpOptions: {
-            quality: 90,
-          },
-        })
-
         .browserSync({
           proxy: 'http://localhost:8000/',
           files: [
-            './*.{html,ejs,php}',
+            './index.ejs',
             './.vulmix/**/*.{js,vue,scss}',
             './assets/**/*.{js,vue,scss}',
-            './components/**/*.{js,vue,scss}',
-            './composables/**/*.{js,vue,scss}',
-            './pages/**/*.{js,vue,scss}',
+            './components/**/*.{js,vue}',
+            './composables/**/*.{js,vue}',
+            './pages/**/*.{js,vue}',
           ],
         })
 

index.html → index.ejs

@@ -10,15 +10,17 @@
     <meta name="title" content="Your application title">
     <meta name="description" content="Your application description">
 
-    <link rel="stylesheet" href="./build/_vulmix/css/main.vulmix.css">
-    <link rel="stylesheet" href="./build/css/main.css">
+    <link rel="stylesheet" href="<%= mix('/assets/_vulmix/css/main.vulmix.css') %>">
+    <link rel="stylesheet" href="<%= mix('/assets/css/main.css') %>">
+
+    <link rel="icon" type="image/png" sizes="16x16" href="/assets/icons/favicon-16x16.png">
   </head>
 
   <body class="h-full">
     <div id="app" class="h-full"></div>
 
-    <script src="./build/_vulmix/js/manifest.js"></script>
-    <script src="./build/_vulmix/js/vendor.js"></script>
-    <script src="./build/_vulmix/js/main.vulmix.js"></script>
+    <script src="<%= mix('/assets/_vulmix/js/manifest.js') %>"></script>
+    <script src="<%= mix('/assets/_vulmix/js/vendor.js') %>"></script>
+    <script src="<%= mix('/assets/_vulmix/js/main.vulmix.js') %>"></script>
   </body>
 </html>

package.json

@@ -4,11 +4,13 @@
   "description": "Tiny boilerplate to work with Vue and Laravel Mix.",
   "main": "index.js",
   "scripts": {
-    "build": "npx mkdirp build/img && mix",
-    "dev": "npx mkdirp build/img && mix watch",
-    "hot": "npx mkdirp build/img && mix watch --hot",
-    "serve": "npx http-server -p 8000 -a localhost --proxy http://localhost:8000?",
-    "prod": "npx mkdirp _dist/assets/img && mix --production"
+    "create-img-dir": "mkdirp _dist/assets/img",
+    "remove-dist": "rimraf _dist",
+    "build": "npm run remove-dist && npm run create-img-dir && mix",
+    "dev": "npm run remove-dist && npm run create-img-dir && mix watch",
+    "hot": "npm run remove-dist && npm run create-img-dir && mix watch --hot",
+    "serve": "npx http-server -p 8000 -a localhost _dist -c-1 --gzip --proxy http://localhost:8000?",
+    "prod": "npm run remove-dist && npm run create-img-dir && mix --production"
   },
   "author": "Victor Ribeiro",
   "license": "MIT",
@@ -20,13 +22,16 @@
     "browser-sync-webpack-plugin": "^2.3.0",
     "imagemin-jpegtran": "^7.0.0",
     "laravel-mix": "^6.0.49",
+    "laravel-mix-ejs": "^2.0.0",
     "laravel-mix-replace-in-file": "^0.1.0",
     "laravel-mix-serve": "^2.2.2",
     "laravel-mix-simple-image-processing": "^1.0.7",
+    "mkdirp": "^1.0.4",
     "path": "^0.12.7",
     "postcss": "^8.4.16",
     "replace-in-file": "^6.3.5",
     "resolve-url-loader": "^5.0.0",
+    "rimraf": "^3.0.2",
     "sass": "^1.54.5",
     "sass-loader": "^13.0.2",
     "tailwindcss": "^3.1.8",