npm init
package.json
file will be created)
package.json
file
{ "name": "[project name]", ... "author": "[your name]" }
{ ... "test": "echo \"Error: no test specified\" && exit 1" ... }
"scripts": { "start": "run-p watch watch:styles", "build": "run-s clean clean:styles build:styles copy", "deploy": "run-s build publish", "build:styles": "sass src/scss:src/styles", "watch": "live-server src", "watch:styles": "sass src/scss:src/styles --watch", "clean": "rm -rf dist", "clean:styles": "rm -rf src/styles", "copy": "mkdir dist && rsync -avr --exclude=\"/scss\" src/ dist", "publish": "gh-pages -d dist" },
"devDependencies": { "gh-pages": "^2.1.1", "live-server": "^1.2.1", "npm-run-all": "^4.1.5", "sass": "^1.23.0-module.beta.1" }
package.json
will looks like this:{ "name": "template", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "run-p watch watch:styles", "build": "run-s clean clean:styles build:styles copy", "deploy": "run-s build publish", "build:styles": "sass src/scss:src/styles", "watch": "live-server src", "watch:styles": "sass src/scss:src/styles --watch", "clean": "rm -rf dist", "clean:styles": "rm -rf src/styles", "copy": "mkdir dist && rsync -avr --exclude=\"/scss\" src/ dist", "publish": "gh-pages -d dist" }, "author": "Marcelo Soares Peralta", "license": "ISC", "devDependencies": { "gh-pages": "^2.1.1", "live-server": "^1.2.1", "npm-run-all": "^4.1.5", "sass": "^1.23.0-module.beta.1" } }
"scripts": { "start": "run-p watch watch:styles", "build": "run-s clean clean:styles build:styles copy", "deploy": "run-s build publish", "build:styles": "sass src/scss:src/styles", "watch": "live-server src", "watch:styles": "sass src/scss:src/styles --watch", "clean": "del-cli dist", "clean:styles": "del-cli src/styles", "copy": "mkdir dist && xcopy src dist /e /exclude:excludelist.txt", "publish": "gh-pages -d dist" },
"devDependencies": { "gh-pages": "^2.1.1", "live-server": "^1.2.1", "npm-run-all": "^4.1.5", "sass": "^1.23.0-module.beta.1", "del-cli": "0.2.1" }
package.json
will looks like this:{ "name": "template", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "run-p watch watch:styles", "build": "run-s clean clean:styles build:styles copy", "deploy": "run-s build publish", "build:styles": "sass src/scss:src/styles", "watch": "live-server src", "watch:styles": "sass src/scss:src/styles --watch", "clean": "del-cli dist", "clean:styles": "del-cli src/styles", "copy": "mkdir dist && xcopy src dist /e /exclude:excludelist.txt", "publish": "gh-pages -d dist" }, "author": "Marcelo Soares Peralta", "license": "ISC", "devDependencies": { "gh-pages": "^2.1.1", "live-server": "^1.2.1", "npm-run-all": "^4.1.5", "sass": "^1.23.0-module.beta.1", "del-cli": "0.2.1" } }
dist/
node_modules
src/styles
img
scripts
scss
... <head> ... <title>[project name]</title> </head> ...
git init
git add .
git commit -m "Initial commit"
git push
git init
git add . && git commit -m "Initial commit" && git push
package.json
dependencies
npm install
Run live-server and Sass in watch mode and start coding!
npm start
Transpile Sass and copy relevant files from src to dist to prepare your website for deployment.
npm run build
Deploy your code to
Github Pages:
this script creates a gh-pages branch and publishes the dist folder.
For this to work, make sure you already have a remote repository on GitHub.
npm run deploy
Any project created with this boilerplate will follow the structure below:
Project | README.md | package.json | package-lock.json └───src | | index.html | └───styles | └───scss | | └───style.scss | └───scripts | └───img └───dist
The README.md should contain a brief description of your project. Feel free to delete this guide or rename it to add your own description.
These files contain various information about you, your project and the project dependencies,
as well as useful scripts to help you with the development process.
Please do not edit these files for the time being, except where you are asked to.
The src folder contains any file you would want to add to your website before any processing is done to
it.
This is the main folder you will be working in.
index.html is the main page for your website which you will be working on.
Feel free to add any new html pages you create directly in the src folder.
The scripts folder will contain any js files you will add to your website.
Eventually index.js is the main script file of your project.
Feel free to use this file to add any JavaScript that you want to experiment with.
The scss folder will contain any scss or css files (depending on your preference).
In order to include additional styles in your project, you must import them to style.scss.
style.scss is your style entry point. Any other scss or css imported to this
file can be used,
and any styles written directly to this file will be applied.
For the sake of organization and good project structure practices, please use these folders in order to keep your images and fonts respectively.
The dist folder will be automatically generated whenever your run the build script:
npm run build
This folder will contain your built project, ready to be deployed online. It is excluded from git tracking since it is not customary to include compiled code in a development project.
npm install bootstrap
@import "../../node_modules/bootstrap/scss/bootstrap.scss";