diff --git a/.gitignore b/.gitignore
index dd87e2d..2bac8e9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules
+.sass-cache
build
diff --git a/.ruby-gemset b/.ruby-gemset
new file mode 100644
index 0000000..4fc3312
--- /dev/null
+++ b/.ruby-gemset
@@ -0,0 +1 @@
+regexper
diff --git a/.ruby-version b/.ruby-version
new file mode 100644
index 0000000..cd57a8b
--- /dev/null
+++ b/.ruby-version
@@ -0,0 +1 @@
+2.1.5
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 0000000..4e0fa85
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'compass'
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 0000000..fcd9867
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,28 @@
+GEM
+ remote: https://rubygems.org/
+ specs:
+ chunky_png (1.3.3)
+ compass (1.0.1)
+ chunky_png (~> 1.2)
+ compass-core (~> 1.0.1)
+ compass-import-once (~> 1.0.5)
+ rb-fsevent (>= 0.9.3)
+ rb-inotify (>= 0.9)
+ sass (>= 3.3.13, < 3.5)
+ compass-core (1.0.1)
+ multi_json (~> 1.0)
+ sass (>= 3.3.0, < 3.5)
+ compass-import-once (1.0.5)
+ sass (>= 3.2, < 3.5)
+ ffi (1.9.6)
+ multi_json (1.10.1)
+ rb-fsevent (0.9.4)
+ rb-inotify (0.9.5)
+ ffi (>= 0.5.0)
+ sass (3.4.8)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ compass
diff --git a/gulpfile.js b/gulpfile.js
index 021328a..1b309dc 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -1,13 +1,15 @@
var gulp = require('gulp'),
wrap = require('gulp-wrap'),
connect = require('gulp-connect'),
- watch = require('gulp-watch');
+ watch = require('gulp-watch'),
+ compass = require('gulp-compass');
gulp.task('default', ['server'], function() {
gulp.watch('./src/**/*.html', ['markup']);
+ gulp.watch('./src/**/*.scss', ['compass']);
});
-gulp.task('server', ['markup'], function() {
+gulp.task('server', ['markup', 'compass'], function() {
watch('./build/**/*', { name: 'Server' })
.pipe(connect.reload());
return connect.server({
@@ -19,5 +21,17 @@ gulp.task('server', ['markup'], function() {
gulp.task('markup', function() {
return gulp.src('./src/**/*.html')
.pipe(wrap({ src: './template.html' }))
- .pipe(gulp.dest('./build'))
+ .pipe(gulp.dest('./build'));
+});
+
+gulp.task('compass', function() {
+ return gulp.src('./src/**/*.scss')
+ .pipe(compass({
+ project: __dirname,
+ sass: './src/sass',
+ css: './build/css',
+ javascript: './build/js',
+ font: './build/font',
+ sourcemap: true
+ }));
});
diff --git a/package.json b/package.json
index 9e4ae6e..4833258 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"private": true,
"devDependencies": {
"gulp": "^3.8.10",
+ "gulp-compass": "^2.0.3",
"gulp-connect": "^2.2.0",
"gulp-watch": "^2.0.0",
"gulp-wrap": "^0.5.0"
diff --git a/src/css/.keep b/src/css/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/src/font/.keep b/src/font/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/src/js/.keep b/src/js/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/src/sass/.keep b/src/sass/.keep
new file mode 100644
index 0000000..e69de29
diff --git a/src/sass/main.scss b/src/sass/main.scss
new file mode 100644
index 0000000..17b0827
--- /dev/null
+++ b/src/sass/main.scss
@@ -0,0 +1,5 @@
+body {
+ h1 {
+ background: #bada55;
+ }
+}
diff --git a/template.html b/template.html
index 9f1af64..6ea5e3a 100644
--- a/template.html
+++ b/template.html
@@ -2,6 +2,7 @@
Demo
+
${ contents }