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

    [email protected]:MishaChernov/html-gulp-starter.git yourNewRepoName

Then

    cd yourNewRepoName
    rm -rf .git
    git init
    git remote add origin [email protected]: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 [email protected]:yourUserName/yourNewRepoName.git (fetch)
    origin [email protected]: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