parcel-document-blank
parcel-document-blank copied to clipboard
Published
20 hours ago •
ManzDev
ManzDev
A prepared package for new HTML/CSS/JS projects and easy coding (with Parcel)
A prepared package for new HTML/CSS/JS projects and easy coding using Parcel bundler.
Features
1. Organization
| Feature | Description |
|---|---|
| 📦 Parcel2 | Automatic Parcel 2 bundler |
| 📊 Parcel2 Bundle Visualiser | Generate size report into parcel-bundle-reports/ |
| ⚙️ NPM Scripts | Preconfigured scripts (development, build and clean tasks) |
| 🦋 Prettier | Opinionated code formatter. |
NPM Scripts
| NPM Command | Description |
|---|---|
npm run dev |
Local webserver for development (serve + watch) |
npm run watch |
Watch changes (dev for use with external server: apache, nginx, local server...) |
npm run report |
Generate reports into parcel-bundle-reports/ and build/bundle-buddy.json |
npm run build |
Automatic production build (for website upload). |
npm run gh-pages |
Automatic production build for GitHub Pages. * |
npm run deploy |
Deploy build folder to GitHub Pages. |
npm run lintcss |
Lint CSS files with stylelint (src/css/\*.css ) |
npm run lintjs |
Lint Javascript files with eslint (src/js/\*.js ) |
npm run clean:cache |
Remove .parcel-cache, dist and build folder. |
npm run clean:all |
Reset default repo and remove cache and all npm generated files. |
* GitHub Pages URL is https://user.github.io/reponame/. Don't forget change name to reponame in your package.json.
2. HTML & Styles
| Feature | Description |
|---|---|
| 🏷️ HTMLHint | Static code analysis tool for HTML. |
| 🌀 PostCSS | Pre, post and transform CSS with JS |
| 👓 PostCSS Preset-env | Convert modern CSS into browsers can understand |
| 🍂 Autoprefixer | Auto add CSS prefix properties |
| ➕ PostCSS Mixins | Support for CSS mixins (functions-in-css) |
| 🅰️ PostCSS Font Magician | Auto import Google Fonts |
| 🤵 StyleLint | Review CSS code for improve quality, tips and avoid errors |
3. Javascript
| Feature | Description |
|---|---|
| 💼 Babel | Transpile Future Javascript to ES5. |
| 🎁 Babel Preset-env | Smart preset to write ES2015+ (ES6/ES7/ES8) Javascript. |
| 🌎 Browserlist | Compatibilize code to specific browsers. |
| 👁️ ESLint | Review Javascript code for improve quality, tips and avoid errors. |
Usage
masterbranch: Vanilla document blank projectvuebranch: VueJS document blank project
Requirements / Recommended
- node 12+ / npm 6+: https://github.com/nodesource/distributions/blob/master/README.md#debinstall
- Prettier for VSCode: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Icons for VSCode: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
- ESLint for VSCode: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
- StyleLint for VSCode: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint
Master branch
git clone https://github.com/ManzDev/parcel-document-blank folder-project
cd folder-project
rm -rf .git && git init
npm install
npm run dev
Vue branch
git clone -b vue https://github.com/ManzDev/parcel-document-blank folder-project
cd folder-project
rm -rf .git && git init
npm install
npm run dev
ManzDev