Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

add livecss coding (@hackathon)

  • Loading branch information...
commit c53cec60cecc1bd63ddde55157d86d5bd13fe626 1 parent e7d239a
▟ ▖▟ ▖ dodo authored
5 assets/streams.html
View
@@ -6,9 +6,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="web/css/main.css" type="text/css" media="screen">
+ <script type="text/javascript" src="config.js"></script>
+<script src="/socket.io/socket.io.js"></script>
<script src="web/js/app.js"></script>
- <!--<script>require('init');</script>-->
- <script>require('./vendor-bridge');</script>
+ <script src="web/js/livecss.js"></script>
</head>
<body>
<div id="editbar">
1  package.json
View
@@ -34,6 +34,7 @@
, "formatdate": "0.2.0"
, "store": "1.1.1"
, "async": "0.1.15"
+, "socket.io": "0.9.1-1"
, "dynamictemplate": "0.4.2"
, "dt-compiler": "0.1.5"
, "dt-jquery": "0.2.6"
36 src/build/server.coffee
View
@@ -7,7 +7,7 @@ express = require 'express'
browserify = require 'browserify'
{ createReadStream } = require 'fs'
{ Compiler } = require 'dt-compiler'
-{ wrap_prefix } = require './util'
+{ wrap_prefix, Watcher } = require './util'
snippets = ["main"
@@ -32,6 +32,7 @@ config.cli
host: ['host', ['b', "build server listen address", 'host']]
port: ['port', ['p', "build server listen port", 'number']]
build:['build',[off, "build and pack everything together" ]]
+ design:['design',[off, "enable build server on the fly style reload"]]
dev: [off, "enable build server code reload"]
config.load (args, opts) ->
@@ -117,6 +118,10 @@ start_server = (args, opts) ->
compress: config.build or config.css.compress
force: config.css.force
warn: config.css.warn
+ watcher?.watch filename
+ style.on 'end', ->
+ for imp in style.options._imports
+ watcher?.watch imp.path
style.use nib()
server.use javascript
@@ -140,7 +145,36 @@ start_server = (args, opts) ->
res.header 'Content-Type', 'text/javascript'
createReadStream(require.resolve 'store/store+json2.min').pipe(res)
+ # this stuff runs on the client for live reloading css (including stylus compiling)
+ server.get '/web/js/livecss.js', (req, res) ->
+ res.header 'Content-Type', 'text/javascript'
+ res.end "(" + ( ->
+ io.connect()
+ .on 'connect', () ->
+ console.log "connected to build server."
+ .on 'changed', (filepath) ->
+ console.log "file", filepath, "changed."
+ q = '?reload=' + new Date().getTime()
+ $('link[rel="stylesheet"]').each ->
+ @href = @href.replace /\?.*|$/, q
+ ) + ")()"
+
+ if config.design
+ watcher = new Watcher
+ watcher.on 'changed', (filepath) ->
+ console.log "file #{filepath} changed.".cyan.bold
+ console.log "watching stylus files …".magenta
+ io = require('socket.io').listen server
+ io.sockets.on 'connection', (socket) ->
+ listener = (path) ->
+ socket.emit('changed', path)
+ watcher.on('changed', listener)
+ socket.on 'disconnect', ->
+ watcher.removeListener('changed', listener)
+
+
server.listen config.port, config.host
+
if config.build
# this puts everything in a tarball
pack = require './packaging'
30 src/build/util.coffee
View
@@ -1,4 +1,5 @@
fs = require 'fs'
+{ EventEmitter } = require 'events'
spiderDir = (root, path) ->
@@ -26,10 +27,39 @@ wrap_prefix = (prefix, middleware) ->
next()
+watchFile = (filepath, callback) ->
+ pending = no
+ fs.watchFile filepath, (curr, prev) ->
+ return if pending
+ pending = yes
+ if curr.mtime isnt prev.mtime
+ # modified, wait a little before reloading
+ # since modifications tend to come in waves
+ setTimeout ->
+ try
+ callback?(filepath)
+ pending = no
+ catch err
+ console.error "#{e}".red.bold,"\n#{e?.stack}"
+ , 11
+
+
+class Watcher extends EventEmitter
+ constructor: () ->
+ @watched = {}
+
+ watch: (files...) ->
+ for file in files
+ continue if @watched[file]
+ @watched[file] = true
+ watchFile(file, @emit.bind(this, 'changed'))
+
+
# exports
module.exports = {
spiderDir
wrap_prefix
+ Watcher
}
Please sign in to comment.
Something went wrong with that request. Please try again.