FDiskas/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Steps


yarn init -y
yarn add -D parcel posthtml-img-autosize posthtml-include posthtml-modules autoprefixer rimraf
touch .posthtmlrc.js
module.exports = { 
    plugins: {
        "posthtml-img-autosize": {
            root: "./assets/images"
        },
        "posthtml-modules": {
            root: "./src"
        },
        "posthtml-include": {
            root: __dirname
        }
    }
}

mkdir src src/components src/pages assets assets/images
touch .htmlnanorc.js
module.exports = { 
    removeComments: false
}

touch src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/style.scss">
</head>
<body>
    <include src="./components/header.html"></include>
    <hr />
    Body text
    <hr />
    <include src="./components/footer.html"></include>
</body>
</html>

Add scripts to package.json
"scripts": {
    "start": "parcel start src/index.html",
    "build": "rimraf dist && parcel build src/index.html"
},

echo "<header>Header</header>" >> src/components/header.html
echo "<footer>Header</footer>" >> src/components/footer.html
echo "body { background-color: silver; }" >> assets/style.scss
touch .browserslistrc
> 1%
last 2 versions


Start project

yarn start
build project

yarn build