Merge pull request #29 from ojvribeiro/refactor-project-structure

refactor(core): cleaner `.dist` folder generation

.gitignore

@@ -1,5 +1,6 @@
 node_modules
-.dist
+_dist
+build
 mix-manifest.json
 package-lock.json
 yarn.lock

.vulmix/components/Image.vue

@@ -48,7 +48,7 @@
  function replace(size) {
  imgSrc.value = props.src.replace(
  /\/assets\/img\/(|.*)([a-zA-Z0-9_-])\.(png|jpg|jpeg|gif)$/i,
- `/.vulmix/assets/img/$1$2@${size}.${
+ `/build/img/$1$2@${size}.${
  props.webp === 'true' ? 'webp' : '$3'
  }`
  )

.vulmix/mix.js

@@ -1,69 +1,116 @@
 const mix = require('laravel-mix')
-const config = require('../webpack.config.js')
+const config = require('./webpack.config.js')
 
 require('laravel-mix-serve')
 require('laravel-mix-simple-image-processing')
+require('laravel-mix-replace-in-file')
 
-class VueMixInit {
+class VulmixInit {
  name() {
- return 'vueMix'
+ return 'vulmix'
  }
 
  register() {
  mix
- .setPublicPath('.dist/')
+ .setPublicPath('.')
 
  .webpackConfig(config)
 
- .serve(
- 'npx http-server -p 8000 -a localhost -c-1 --proxy http://localhost:8000?',
- {
- verbose: false,
- build: false,
- dev: true,
- prod: false,
- }
- )
-
- .webpackConfig({
- devtool: 'source-map',
- })
-
- .imgs({
- source: 'assets/img',
- destination: '.vulmix/assets/img',
- webp: true,
- thumbnailsSizes: [1920, 1200, 900, 600, 300, 50],
- smallerThumbnailsOnly: true,
- thumbnailsOnly: true,
- imageminWebpOptions: {
- quality: 90,
- },
- })
-
- .sass('.vulmix/assets/sass/main.scss', '.dist/.vulmix/dist/css')
-
- .js('.vulmix/main.js', '.dist/.vulmix/dist/js')
- .vue()
-
- .sourceMaps()
-
- .extract()
-
- .browserSync({
- proxy: 'http://localhost:8000/',
- files: [
- './*.{html,ejs,php}',
- './.vulmix/**/*.{js,vue,scss}',
- './assets/**/*.{js,vue,scss}',
- './components/**/*.{js,vue,scss}',
- './composables/**/*.{js,vue,scss}',
- './pages/**/*.{js,vue,scss}',
- ],
- })
-
- .disableSuccessNotifications()
+ if (mix.inProduction()) {
+ mix
+ .copy('index.html', '_dist')
+
+ .sass(
+ '.vulmix/assets/sass/main.scss',
+ '_dist/assets/_vulmix/css/main.vulmix.css'
+ )
+
+ .sass('assets/sass/main.scss', '_dist/assets/css')
+
+ .js('.vulmix/main.js', '_dist/assets/_vulmix/js/main.vulmix.js')
+ .vue()
+
+ .replaceInFile({
+ files: '_dist/index.html',
+ from: /build(|\/_vulmix)/g,
+ to: 'assets',
+ })
+
+ .replaceInFile({
+ files: '_dist/assets/**/*',
+ from: /build\/img/g,
+ to: 'assets/img',
+ })
+
+ .imgs({
+ source: 'assets/img',
+ destination: '_dist/assets/img',
+ webp: true,
+ thumbnailsSizes: [1920, 1200, 900, 600, 300, 50],
+ smallerThumbnailsOnly: true,
+ thumbnailsOnly: true,
+ imageminWebpOptions: {
+ quality: 90,
+ },
+ })
+
+ .version()
+
+ .extract()
+ } else {
+ mix
+ .webpackConfig({
+ devtool: 'source-map',
+ })
+ .serve(
+ 'npx http-server -p 8000 -a localhost -c-1 --proxy http://localhost:8000?',
+ {
+ verbose: false,
+ build: false,
+ dev: true,
+ prod: false,
+ }
+ )
+
+ .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()
+
+ .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}',
+ './.vulmix/**/*.{js,vue,scss}',
+ './assets/**/*.{js,vue,scss}',
+ './components/**/*.{js,vue,scss}',
+ './composables/**/*.{js,vue,scss}',
+ './pages/**/*.{js,vue,scss}',
+ ],
+ })
+
+ .disableSuccessNotifications()
+ }
  }
 }
 
-mix.extend('vueMix', new VueMixInit())
+mix.extend('vulmix', new VulmixInit())

.vulmix/webpack.config.js

@@ -0,0 +1,15 @@
+const path = require('path')
+
+module.exports = {
+ 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'),
+ },
+ },
+}

index.html

@@ -10,15 +10,15 @@
  <meta name="title" content="Your application title">
  <meta name="description" content="Your application description">
 
- <link rel="stylesheet" href="./.dist/.vulmix/dist/css/main.css">
- <link rel="stylesheet" href="./.dist/css/main.css">
+ <link rel="stylesheet" href="./build/_vulmix/css/main.vulmix.css">
+ <link rel="stylesheet" href="./build/css/main.css">
  </head>
 
  <body class="h-full">
  <div id="app" class="h-full"></div>
 
- <script src="./.dist/.vulmix/dist/js/manifest.js"></script>
- <script src="./.dist/.vulmix/dist/js/vendor.js"></script>
- <script src="./.dist/.vulmix/dist/js/main.js"></script>
+ <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>
  </body>
 </html>

package.json

@@ -1,14 +1,13 @@
 {
  "name": "vulmix",
- "version": "0.2.3-alpha",
+ "version": "0.3.0-alpha",
  "description": "Tiny boilerplate to work with Vue and Laravel Mix.",
  "main": "index.js",
  "scripts": {
+ "build": "[ -d build\\img ] && mix || mkdir build\\img && mix",
+ "dev": "[ -d build\\img ] && mix watch || mkdir build\\img && mix watch",
  "serve": "npx http-server -p 8000 -a localhost --proxy http://localhost:8000?",
- "build": "mix",
- "watch": "mix watch",
- "dev": "mix watch",
- "prod": "mix --production"
+ "prod": "[ -d _dist\\assets\\img ] && mix --production || mkdir _dist\\assets\\img && mix --production && echo \n\nDeploy the `_dist` folder after compilation"
  },
  "author": "Victor Ribeiro",
  "license": "MIT",
@@ -20,10 +19,12 @@
  "browser-sync-webpack-plugin": "^2.3.0",
  "imagemin-jpegtran": "^7.0.0",
  "laravel-mix": "^6.0.49",
+ "laravel-mix-replace-in-file": "^0.1.0",
  "laravel-mix-serve": "^2.2.2",
  "laravel-mix-simple-image-processing": "^1.0.7",
  "path": "^0.12.7",
  "postcss": "^8.4.16",
+ "replace-in-file": "^6.3.5",
  "resolve-url-loader": "^5.0.0",
  "sass": "^1.54.5",
  "sass-loader": "^10.3.1",

webpack.mix.js

@@ -3,7 +3,4 @@ const mix = require('laravel-mix')
 require('./.vulmix/mix.js')
 
 mix
- .vueMix()
-
- .sass('assets/sass/main.scss', '.dist/css')
-
+ .vulmix()