Get up and runnning with PostCSS (Sugarss sytnax), PostHTML (includes for componentizing html), and a tunnel to share with the outside world.
Because setting up tooling sucks. Easily the worst part about modern Javascript projects. Especially when you want to use all the great new features, but don't want to spend the time to set up tools everytime. Parcel handles a lot of the headache already, but this makes getting a simple static site up and running extremely easy.
An amazing, "zero" config bundler with a ton of functionality out of the box, including a development server with hot module replacement. Also sub 100ms build times. Plugins used:
- parcel-plugin-clean-dist
- parcel-plugin-imagemin
All the juicy new CSS features, with JS plugins. Plugins used in this boilerplate:
- Autoprefixer
- PostCSS-nested
- Sugarss
Gives you the ability to transform HTML with JS plugins. This boilerplate includes the "posthtml-include" plugin, allowing you to use the
<include src="path/to/component.html"></include>tag to import HTML components.
Clone/Fork this repo
$ git clone https://github.com/arickconley/parcel-boilerplate.git project-folder
$ cd project-folderInstall the dependencies
$ ## use yarn
$ yarn
$ ## use npm
$ npm iPostHTML squawks about "addDependencyTo" being deprecated. To get rid of it, run the following in your console:
$ ## use yarn
$ yarn fix
$ ## use npm
$ npm run fixThis basically just deletes lines 20-24 from the postHTML file. This is the easiest solution I could figure out.
$ yarn startRuns parcel on "src/index.html" and starts a development server at localhost:1234.
$ yarn run tunnelOpens up a tunnel to outside world with serveo.
$ yarn serveCombines the "start" and "tunnel" scripts in one. Launches a dev server, and exposes it to the internet with a tunnel.
$ yarn run buildBuilds your project for production, outputting to the "dist" directory.
$ yarn prod-shareBuilds your project for production and launches browsersync to serve your production build.
Thanks to the open source community!