progressivespot.blogg.se - Github alepax livereload

GITHUB ALEPAX LIVERELOAD HOW TO

while you terminal, browser, and sublime text are all visible, add the following to your styles.scss.You should see a dark grey background and your single black h1 text Open the compiled styles.css file in SublimeText (/public/css/styles.css) If #333333 loads as the background color, variables are working, and thus, sass is working). In the scss/styles.scss file, write the "Hello World" of SCSS (we are checking if variables work. keeps gulp from crashing for scss errors include an h1 element in the body with the content of Hello SCSS!.in the index file head, load /css/styles.css.(Use Emmett and it will take 2 keystrokes!!) add the markup for a basic html5 template in public/index.html.set up root html5 template file public/index.html.set up the compiled css directory inside the public directory.set up the output directory public in the root directory.set up scss source file styles.scss and an empty partials directory in the scss directory.set up a scss source directory in the root directory.install and save required dependencies:.

run npm init to initialize your project with a package.json file.

Set up gulp + scss + livereload for your project set up node modules If you already have these installed, skip to the next step. If you do not have npm or gulp installed globally, you need to install them.

GITHUB ALEPAX LIVERELOAD HOW TO

This Gist also assumes you already know how to install npm modules, gitignore, create directories and create files via the command line.įirst, make sure you have all the required dependencies. watch for any changes in the public directory, and trigger live-reload.watch for any scss changes, then compiles scss source into css.This Gist outlines the gulp workflow that will: