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
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
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