Parcel Starter

Lightweight Parcel Starter

Parcel Starter - lightweight startup environment with Parcel, Preprocessors (Sass, Scss), HTML imports (posthtml-include), npm run build, imagemin + webp.

How to use Parcel Starter

Clone into the current folder with remove all unnecessary (one command):

git clone https://github.com/agragregra/ps .; rm -rf trunk .gitignore readme.md .git

1. Clone or Download Parcel Starter from GitHub
2. Install Node Modules: npm i
3. Run: npm start
4. Build: npm run build

Basic rules

src's & dist's:

1. All src | dist scripts located in src/js/app.js | dist/js/app.js
2. Sass|Scss src files located in src/styles/
3. Project styles config placed in src/styles/_config.sass
4. All compressed styles located in dist/css/main.css
5. All src images placed in src/img/ folder
6. All compressed images placed in dist/img/ folder

Include parts of HTML code:

Include parts of html code is implemented using posthtml-include. You can import any part of the code using construction in any of html files:

<include src="parts/component.html" locals='{
	"name": "Ivan Vasilievich",
	"img": "img/first.jpg"
}'></include>

In "src/parts/component.html":

Your Name: {{ name }}
Your Photo: <img src="{{ img }}?as=webp">

Include parts of Preprocessor code:

All included parts of preprocessor code placed in folder "styles/blocks/*". Any number of Sass/Scss files can be placed here and in any order. They will be automatically included in the "styles/main.sass" file and processed.