This PR replace the heavy Gulp x Webpack configuration with a lighter Parcel configuration.
Its main objective is too streamline the dev/build process with the following scripts available:
npm run dev for local development
npm run build for production build
And that's it! No more multiple Gulp tasks and bugs.
Changed
linting tasks are now only accessible via NPM scripts instead of Gulp tasks
formatting tasks are now only accessible via NPM scripts instead of Gulp tasks
PostCSS configuration is now in a .postcssrc.js file instead of in the gulpfile.js configuration
The compiled files are now saved in a separate dist/ directory in the theme folder instead of mixing them with files in the static/ directory
The src/js and src/scss directories are renamed to src/scripts and src/styles
Parcel automatically resolves assets for optimization, so the static/fonts/ folder has been moved to src/fonts
Added
The dist/ folder is cleaned before each build
Tailwind CSS is configured with Purge CSS
The base for the structures of the src/scripts/ and scr/styles/ folders are materialised with .gitkeep files
Improved
The configuration file for the build tasks contains only 10 readable lines
The compilation performance are greatly improved as we are not running Gulp and Webpack at the same time anymore
Development tasks and build tasks are separated to improve performance on dev environment
Parcel auto-install missing dependencies when watching or building
Regression
Parcel does not let us control the structure of the files in the dist/ directory (that's why src/scss/ has been renamed to src/styles/)
Parcel does not allow for @ or ~ aliases and recommends relative imports
You can test the template by cloning the repository and running the cli.js file:
# Clone the project
git clone git@github.com:studiometa/create-wordpress-project.git
cd create-wordpress-project/
# Test it
node cli.js ~/Desktop/test
I will push a PR with the same dev/build scripts logic based on Laravel Mix to be able to compare the 2 solutions.
This PR is a clone of #6 which was closed because the branch it was based on has been deleted.
This PR replace the heavy Gulp x Webpack configuration with a lighter Parcel configuration. Its main objective is too streamline the dev/build process with the following scripts available:
npm run devfor local developmentnpm run buildfor production buildAnd that's it! No more multiple Gulp tasks and bugs.
Changed
.postcssrc.jsfile instead of in thegulpfile.jsconfigurationdist/directory in the theme folder instead of mixing them with files in thestatic/directorysrc/jsandsrc/scssdirectories are renamed tosrc/scriptsandsrc/stylesstatic/fonts/folder has been moved tosrc/fontsAdded
dist/folder is cleaned before each buildsrc/scripts/andscr/styles/folders are materialised with.gitkeepfilesImproved
Regression
dist/directory (that's whysrc/scss/has been renamed tosrc/styles/)@or~aliases and recommends relative importsYou can test the template by cloning the repository and running the
cli.jsfile:I will push a PR with the same dev/build scripts logic based on Laravel Mix to be able to compare the 2 solutions.
This PR is a clone of #6 which was closed because the branch it was based on has been deleted.