awakekat

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

awakekat

// HTML MARKUP
<a href="#one">One</a>
<a href="#two">Two</a>
<a href="#three">Three</a>
<a href="#four">Four</a>

<p id="one">Number One</p>  
<p id="two">Number Two</p>  

awakekat

At the top of the (.PHP not .HTML) page you want to incorporate WP data:

<?php
define(‘WP_USE_THEMES’, false);
require(‘../wordpress/w-blog-header.php’);
?>

Where you want it to show up:

<!— LOOP START —>

awakekat

/* Working method */
.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);

awakekat

//From http://stackoverflow.com/questions/25384796/can-i-set-gulp-livereload-to-run-after-all-files-are-compiled

var gulp = require('gulp');
var jade = require('gulp-jade');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var jeet = require('jeet');
var nib = require('nib');
var uglify = require('gulp-uglify');
var livereload = require('gulp-livereload');

awakekat

So, I reproduce the problem you have and came accross this working solution.
First, lets check gulp plugins you need:
gulp-jade
gulp-livereload
optional: gulp-load-plugins
In case you need some of them go to:
http://gulpjs.com/plugins/
Search for them and install them.
Strategy: I created a gulp task called live that will check your *.jade files, and as you are working on a certain file & saving it, gulp will compile it into html and refresh the browser.
In order to accomplish that, we define a function called compileAndRefresh that will take the file returned by the watcher. It will compile that file into html and the refesh the browser (test with livereload plugin for chrome).

awakekat

// ====== Include gulp
var gulp        = require('gulp');

// ===== Include Plugins
var server       = require('gulp-server-livereload');
var plumber     = require('gulp-plumber');
var livereload  = require('gulp-livereload');
var notify      = require('gulp-notify');
var concat      = require('gulp-concat');
var jade        = require('gulp-jade');

awakekat

{
  "name": "kwdev",
  "version": "1.0.0",
  "description": "Development",
  "devDependencies": {
    "connect": "^3.3.4",
    "gulp": "^3.8.8",
    "gulp-cache": "^0.2.4",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.4.2",

awakekat

/*  Enqueue css
/* ------------------------------------ */ 
function fa_styles() 
{
    wp_enqueue_style( 'font-awesome', get_template_directory_uri().'/fonts/font-awesome.min.css' );
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'fa_styles' ); 

awakekat

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

//* Load Font Awesome
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
    wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' );