Project Loader w/ Gulp File Watcher (SCSS + BrowserSync)

Aman
Aman
Jul 9, 2018 · 2 min read

Hi folks !

Today, I’m going to share something useful for the developers who often save their code online (eg. Codepen, JSFiddle, JSBin) and work with preprocessors & transpilers (Pug, SASS/SCSS, Babel etc).

What if your internet connection will gonna cut for some reasons or you’ll traveling to remote place with your laptop without internet connection? I know you’ll regret at that moment why wouldn’t you saved your work offline to complete in deadline?

Don’t worry, I’ve a simple solution for you !

All you need is:

  • A Desktop (or Laptop)
  • Some bunch of tools (check the Tools section below)

for setting up the environment for your machine once.


I’m going to demonstrate the tutorial for configuring SASS/SCSS & gulpfile.js file . You can also add other dependencies in your project.

TL;DR:

Tutorial:

  1. Install NodeJS (official website link) on your system (I prefer LTS version for beginners).
  2. After installing Node successfully, open Command Prompt(Windows)/Terminal(MacOS/Linux).
  3. Install listed npm packages via CLI:
    • gulp 3.9.0
    • gulp-sass (for SASS/SCSS compilation)
    • browser-sync
    [How do I install npm modules? Check this link or install it using npm install <package-name> --save-dev]

4. Great ! Here comes the easiest part. Just download the gulpfile.js & read the instructions via README.md file in your project folder.

Here is the gist link.

5. Viola, you’ve done very well. I’m pretty sure it’ll help you and save your precious time.


I know you’re much happier than little boy.

I appreciate your support & claps. twitter/adsingh_1

Aman

Written by

Aman

CSS Enthusiast, Love to listen & compose music.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade