HTML-GULP-STARTER is a highly unopinionated starting point for prototyping responsive HTML5 projects with SCSS. Uses browser-sync to create a livereloading server for rapidly prototyping sites. Fastly deplpying your site to github pages by one command!
- SCSS compiling to CSS
- Uses normalize.css, famous SCSS mixins, functions, variables
- CSS/JS minification
- Linting your code. Best practices
- Autoprefixer (automatically adds appropriate vendor prefixes)
- Browser reload on filesave using browser-sync
- Local server for serving a static site
- Images compression
- Deploying your site to github pages
- Clone the repo from GitHub and make it your own.
- In terminal run each line as a separate command
git clone https://github.com/MishaChernov/html-gulp-starter.git yourNewRepoName
or
git@github.com:MishaChernov/html-gulp-starter.git yourNewRepoName
Then
cd yourNewRepoName
rm -rf .git
git init
git remote add origin git@github.com:yourUserName/yourNewRepoName.git
git remote -v
will allow you to check that you have changed the remote origin correctly. The output should look like:
origin git@github.com:yourUserName/yourNewRepoName.git (fetch)
origin git@github.com:yourUserName/yourNewRepoName.git (push)
To set up a convenient dev environment run this at the root of mnml
npm install
- Install node modules to your projectnpm start
- Start coding ;)
npm run img-compress
- Will compress size of all your images
npm run deploy
- Will deploy your site to github pages, e.g yourGitHubName/github.io/yourNewRepoName
├── README.md
├── build
│ ├── img
│ ├── index.html
│ ├── js
│ │ └── index.js
│ └── styles
│ ├── main.css
│ └── style-min.css
├── gulpfile.js
├── package-lock.json
├── package.json
└── src
├── fonts
│ ├── Roboto-Regular.ttf
│ ├── Roboto-Regular.woff
│ └── Roboto-Regular.woff2
├── html
│ └── index.html
├── img
├── js
│ └── index.js
└── styles
├── base
│ ├── base.scss
│ ├── fonts.scss
│ └── normilize.scss
├── components
│ └── button.scss
├── main.scss
└── utils
├── functions.scss
├── mixins.scss
└── variables.scss