Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions RELEASE_NOTES.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ This serves two purposes:
- We now use the much faster `CRC32` hashing algorithm instead of `MD5` for cache busting keys in https://github.com/hydephp/develop/pull/1918
- **Replaced Laravel Mix with Vite for frontend asset compilation** in https://github.com/hydephp/develop/pull/2010
- **Breaking:** You must now use `npm run build` to compile your assets, instead of `npm run prod`
- Bundled assets are now compiled directly into the `_media` folder, and will not be copied to the `_site/media` folder by the NPM command in https://github.com/hydephp/develop/pull/2011


### Deprecated
Expand Down
5 changes: 2 additions & 3 deletions docs/creating-content/managing-assets.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,9 @@ Then run `npm run dev` to compile the assets in development mode. For production

Hyde uses [Vite](https://vite.dev/) to compile assets.

When running the `npm run dev/prod` command, the following happens:
When running the `npm run dev/prod` command, Vite will compile the `resources/assets/app.css` file into `_media/app.css` using PostCSS with TailwindCSS and AutoPrefixer.

1. Vite will compile the `resources/assets/app.css` file into `_media/app.css` using PostCSS with TailwindCSS and AutoPrefixer.
2. Vite then copies the `_media` folder into `_site/media`, this is so that they are automatically accessible to your site without having to rerun `php hyde build`.
The compiled assets will then be automatically copied to `_site/media` when you run `php hyde build`.

## Telling Hyde where to find assets

Expand Down
3 changes: 0 additions & 3 deletions monorepo/scripts/tests/project-styles.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,5 @@
$output = shell_exec('cd '.BASE_PATH.' && npm run build');

$this->assert(file_exists(BASE_PATH.'/_media/app.css'), 'CSS file does not exist');
$this->assert(file_exists(BASE_PATH.'/_site/media/app.css'), 'CSS file does not exist');

$this->assert(file_exists(BASE_PATH.'/_media/app.js'), 'JS file does not exist');
$this->assert(file_exists(BASE_PATH.'/_site/media/app.js'), 'JS file does not exist');
});
42 changes: 2 additions & 40 deletions vite.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default defineConfig({
}
},
build: {
outDir: '_site/media',
outDir: '_media',
emptyOutDir: true,
rollupOptions: {
input: [
Expand All @@ -30,43 +30,5 @@ export default defineConfig({
assetFileNames: '[name].[ext]'
}
}
},
plugins: [
{
name: 'copy-media',
writeBundle() {
// Copy files from _site/media to _media
const fs = require('fs');
const path = require('path');

const sourceDir = '_site/media';
const targetDir = '_media';

if (!fs.existsSync(targetDir)) {
fs.mkdirSync(targetDir, { recursive: true });
}

// Copy all files recursively
function copyRecursively(source, target) {
const files = fs.readdirSync(source);

files.forEach(file => {
const sourcePath = path.join(source, file);
const targetPath = path.join(target, file);

if (fs.lstatSync(sourcePath).isDirectory()) {
if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath, { recursive: true });
}
copyRecursively(sourcePath, targetPath);
} else {
fs.copyFileSync(sourcePath, targetPath);
}
});
}

copyRecursively(sourceDir, targetDir);
}
}
]
}
});