Skip to content

A prepared package for new HTML/CSS/JS projects and easy coding (with Parcel)

Notifications You must be signed in to change notification settings

ManzDev/parcel-document-blank

Repository files navigation

A prepared package for new HTML/CSS/JS projects and easy coding using Parcel bundler.

parcel-document-blank starter-kit

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

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

Releases

No releases published

Packages

No packages published