ManzDev/parcel-document-blank

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

• master branch: Vanilla document blank project
• vue branch: 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