Add html[id] to style guide based on file path

Required in order for the style guide's own styles to be correctly
scoped. File path is most likely temporary however. See:
https://github.com/livingstyleguide/livingstyleguide/issues/133

Signed-off-by: Alex Coles <alex@alexbcoles.com>

frontend/app/assets/styleguide.jade

@@ -1,5 +1,5 @@
 doctype html
-html
+html(id="STYLEGUIDE_HTML_ID")
   head
     meta(charset="utf-8")
     meta(content="IE=edge,chrome=1", http-equiv="X-UA-Compatible")

frontend/gulpfile.js

@@ -26,6 +26,7 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
+var path = require('path');
 var gulp = require('gulp');
 var jshint = require('gulp-jshint');
 var gulpWebpack = require('gulp-webpack');
@@ -49,7 +50,8 @@ var paths = {
     'app/**/*.js',
     '!app/vendor/**/*.js'
   ],
-  fonts: '../app/assets/fonts/**/*'
+  fonts: '../app/assets/fonts/**/*',
+  styleguide: '../app/assets/stylesheets/styleguide.html.lsg'
 };
 
 gulp.task('lint', function() {
@@ -96,9 +98,10 @@ gulp.task('styleguide', function () {
     './bower_components/bourbon/app/assets/stylesheets'
   ].join(':');
 
-  var cssFilter = gulpFilter('**/*.css');
+  var cssFilter = gulpFilter('**/*.css'),
+      htmlFilter = gulpFilter('**/*.html');
 
-  gulp.src('../app/assets/stylesheets/styleguide.html.lsg')
+  gulp.src(paths.styleguide)
     .pipe(livingstyleguide({template: 'app/assets/styleguide.jade'}))
     .pipe(cssFilter)
     .pipe(replace(/image\-url\(\"/g, 'url("/assets/'))
@@ -106,6 +109,11 @@ gulp.task('styleguide', function () {
       cascade: false
     }))
     .pipe(cssFilter.restore())
+    .pipe(htmlFilter)
+    .pipe(replace(/STYLEGUIDE_HTML_ID/,
+      path.dirname(path.resolve(paths.styleguide)) + '/styleguide')
+    )
+    .pipe(htmlFilter.restore())
     .pipe(gulp.dest('public/assets/css'));
   });