Skip to content
This repository has been archived by the owner on Jun 22, 2022. It is now read-only.

Latest commit

 

History

History
51 lines (37 loc) · 2.8 KB

README.md

File metadata and controls

51 lines (37 loc) · 2.8 KB
Raw

This repo is a starter kit for front-end developers, non-gulp or gulp, so developers can easily start a new project without setting up everything all over again. For new users, refer to the guide below.

  • gulp/gulpfile.js
  • gulp/package.json
  • assets/css/bootstrap.min.css
  • assets/scss/main.scss
  • assets/js/vendors/jquery.1.11.3.min.js
  • assets/js/vendors/bootstrap.min.js
  • index.html

Gulp has the following tasks:

  • BrowserSync (automatically refresh working files in browser on save)
  • SASS/SCSS compiler (automatically compiles SCSS to CSS on save)
  • Plumber (prevents gulp crash on SASS/SCSS error)
  • Notify (SASS/SCSS compile error tray notification)
  • CSS minifier (minifies main.min.css)

###How to run gulp Note: If this is your first time, please refer to 'For gulp beginners' section below.

1. CD to a directory 'gulp' containing gulpfile.js
2. Install dependencies
npm install --save-dev
3. Start compiling, serving, and watching files
gulp

For gulp beginners:

#####1. Terminal Notice: If you have trouble installing custom terminal, I wrote more in-detailed guide here.

You need terminal to use npm and gulp. Terminal is available out of the box on Linux and OS X.

Windows has it as well but cmd and PowerShell is not sustainable for development work (I've met some people who prefer it, well, to each their own). I recommend you to install cmder as a replacement for Windows terminal and use their custom cmd.exe (cmd /k "%ConEmuDir%\..\init.bat" instead of default PowerShell). If you have runtime error when starting cmder, you'll probably need to install VS 2015, see the issue here.

Learn terminal basics here, this guide is short and will help you in long run. Seriously. What are you going to do if you can't even change directory in terminal without looking up?

#####2. npm Install npm. This is available for all operating system. During the installation for Windows, be sure 'add to PATH' is included (image). When installed, restart cmder and enter npm in terminal to see if it's working properly, as in it should tell you the usage information. If it does, proceed to the next step.

#####3. gulp Install gulp globally with this terminal command: npm install --global gulp

On completion, download this repo and extract bootstrap-scss-gulp to any folder. Follow the instruction in bootstrap-scss-gulp section on this readme by running npm install --save-dev, then run gulp. Default browser should open the index.html and will refresh on file save when you edit files.