HTML-GULP-STARTER

What is this?

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!

Features

• 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

Getting started

Instructions

• 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)

Dev environment

To set up a convenient dev environment run this at the root of mnml

• npm install - Install node modules to your project
• npm start - Start coding ;)

Another very usefull commands

• 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

Directory structure

├── 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