setup gulp with browserSync

assets/scss/components/_panels.scss

@@ -36,7 +36,7 @@
   width: 100%;
   max-width: none;
   height: 100%;
-  @include filter;
+  @include filterBackground;
 }
 .panel-cover--collapsed {
   width: 28%;

assets/scss/modules/_fonts.scss

@@ -1,3 +1,5 @@
+@import url(https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400);
+
 /*
 * Foundation Icons v 3.0
 * Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3

assets/scss/modules/_mixins.scss

@@ -1,4 +1,4 @@
-@mixin filter {
+@mixin filterBackground {
   background: linear-gradient(150deg, rgba(19, 106, 138, .65) 30%, rgba(38, 120, 113, .44) 70%), url(/assets/img/cover.jpg) no-repeat center;
   background-attachment: fixed;
   background-size: cover;

assets/scss/uno.scss

@@ -1,13 +1,17 @@
+// ------------------------------
+// PRE
+// ------------------------------
+
 @import 'bourbon/bourbon';
-@import url("https://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400");
+@import 'modules/mixins.scss';
 
 // ------------------------------
 // MODULES
 // ------------------------------
 
 @import 'modules/reset.scss';
 @import 'modules/variables.scss';
-@import 'modules/mixins.scss';
+
 @import 'modules/helpers.scss';
 @import 'modules/grid.scss';
 @import 'modules/global.scss';

gulpfile.coffee

@@ -0,0 +1,95 @@
+'use strict'
+
+# -- Dependencies --------------------------------------------------------------
+
+gulp    = require 'gulp'
+gutil   = require 'gulp-util'
+sass    = require 'gulp-sass'
+concat  = require 'gulp-concat'
+coffee  = require 'gulp-coffee'
+header  = require 'gulp-header'
+uglify  = require 'gulp-uglify'
+cssmin  = require 'gulp-cssmin'
+addsrc  = require 'gulp-add-src'
+changed = require 'gulp-changed'
+pkg     = require './package.json'
+prefix  = require 'gulp-autoprefixer'
+strip   = require 'gulp-strip-css-comments'
+browserSync = require 'browser-sync'
+reload = browserSync.reload
+
+# -- Files ---------------------------------------------------------------------
+
+src =
+  sass:
+    main   : 'assets/scss/uno.scss'
+    files  : ['assets/scss/**/**']
+  js       :
+    main   : ['assets/js/src/__init.coffee'
+              'assets/js/src/cover.coffee'
+              'assets/js/src/search.coffee'
+              'assets/js/src/post.coffee']
+    vendor : ['assets/vendor/parrotjs/dist/parrot.standalone.js'
+              'assets/vendor/parrot-module-device/dist/parrot.device.js'
+              'assets/vendor/fastclick/lib/fastclick.js'
+              'assets/vendor/ghostHunter/jquery.ghostHunter.min.js'
+              'assets/vendor/pace/pace.min.js'
+              'assets/vendor/reading-time/build/readingTime.min.js' ]
+  css      :
+    main   : 'assets/css/uno.css'
+    vendor : ['assets/vendor/animate.css/animate.min.css']
+
+dist =
+  css      : 'assets/css'
+  js       : 'assets/js'
+
+banner = [ "/**"
+           " * <%= pkg.name %> - <%= pkg.description %>"
+           " * @version v<%= pkg.version %>"
+           " * @link    <%= pkg.homepage %>"
+           " * @author  <%= pkg.author.name %> (<%= pkg.author.url %>)"
+           " * @license <%= pkg.license %>"
+           " */"
+           "" ].join("\n")
+
+# -- Tasks ---------------------------------------------------------------------
+
+gulp.task 'css', ->
+  gulp.src src.css.vendor
+  .pipe changed dist.css
+  .pipe addsrc src.sass.main
+  .pipe sass()
+  .pipe concat 'uno.css'
+  .pipe prefix()
+  .pipe strip
+    all: true
+  .pipe cssmin()
+  .pipe header banner, pkg: pkg
+  .pipe gulp.dest dist.css
+  return
+
+gulp.task 'js', ->
+  gulp.src src.js.main
+  .pipe changed dist.js
+  .pipe coffee().on "error", gutil.log
+  .pipe addsrc src.js.vendor
+  .pipe concat 'uno.js'
+  .pipe uglify mangle: false
+  .pipe header banner, pkg: pkg
+  .pipe gulp.dest dist.js
+  return
+
+gulp.task 'server', ->
+  browserSync.init null,
+    proxy: 'http://127.0.0.1:2387'
+    files: ["assets/**/*.*"]
+    reloadDelay: 300
+    port: 3000
+  return
+
+gulp.task 'build', ['css', 'js']
+
+gulp.task "default", ->
+  gulp.start ["build", "server"]
+  gulp.watch src.sass.files, ["css"]
+  gulp.watch src.js.main, ["js"]

package.json

@@ -7,22 +7,31 @@
     "url": "https://github.com/kikobeats"
   },
   "devDependencies": {
-    "grunt": "*",
-    "grunt-autoprefixer": "*",
-    "grunt-contrib-clean": "*",
-    "grunt-contrib-coffee": "*",
-    "grunt-contrib-concat": "*",
-    "grunt-contrib-cssmin": "*",
-    "grunt-contrib-sass": "*",
-    "grunt-contrib-uglify": "*",
-    "grunt-contrib-watch": "*",
-    "load-grunt-tasks": "*",
-    "time-grunt": "*"
+    "browser-sync": "^2.1.1",
+    "coffee-script": "*",
+    "gulp": "^3.8.11",
+    "gulp-add-src": "^0.2.0",
+    "gulp-autoprefixer": "*",
+    "gulp-coffee": "*",
+    "gulp-concat": "*",
+    "gulp-cssmin": "^0.1.6",
+    "gulp-header": "*",
+    "gulp-minify-css": "^0.4.5",
+    "gulp-sass": "*",
+    "gulp-sourcemaps": "^1.3.0",
+    "gulp-strip-css-comments": "^1.1.0",
+    "gulp-uglify": "^1.1.0",
+    "gulp-util": "*",
+    "merge-stream": "^0.1.7",
+    "node-bourbon": "^1.2.3"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/kikobeats/uno-zen"
   },
-  "homepage": "https://github.com/kikobeats/uno-zen"
+  "homepage": "https://github.com/kikobeats/uno-zen",
+  "dependencies": {
+    "gulp-changed": "^1.1.1"
+  }
 }