Merge branch 'gulp' of https://github.com/kylejrp/water.css into pr/23

README.md

@@ -78,7 +78,7 @@ Do you want to make your own theme different from the light or dark themes? Sinc
 
 Wanna quickly try out theming without installing anything or just explore our build environment?
 
-[![Try on Repl.it](https://repl-badge.jajoosam.repl.co/try.png)](https://repl.it/@Kognise/watercss-node?ref=button)
+[![Try on repl.it](https://repl-badge.jajoosam.repl.co/edit.png)](https://repl.it/github/https://github.com/amasad/water.css?lang=nodejs&ref=button)
 
 ### Based on an existing theme
 
@@ -124,4 +124,5 @@ You can also only import parts you want, but this is not recommended. See the `s
 
 - [Blockquotes](https://github.com/kognise/water.css/issues/13)
 - Add a screenshot
-- Jekyll theme
+- [Jekyll theme](https://github.com/kognise/water.css/issues/18)
+- [Radio buttons](https://github.com/kognise/water.css/issues/22)

index.js

@@ -0,0 +1,75 @@
+const express = require('express')
+const app = express()
+const http = require('http').Server(app)
+const io = require('socket.io')(http)
+const fs = require('fs-extra')
+const chokidar = require('chokidar')
+const sass = require('node-sass')
+
+const script = `
+const socket = io()
+socket.on('reload', () => location.reload())
+`
+
+app.get('/', async (req, res) => {
+  console.log('> Serving index')
+  const html = await fs.readFile('index.html')
+  const injected = html.toString().replace('</body>', `<script src='/socket.io/socket.io.js'></script><script>${script}</script></body>`)
+  res.send(injected)
+})
+
+app.get('/script.js', async (req, res) => {
+  console.log('> Serving script')
+  const script = await fs.readFile('script.js')
+  res.contentType('javascript')
+  res.send(script)
+})
+
+app.use('/dist', (req, res, next) => {
+  console.log('> Serving a stylesheet')
+  next()
+}, express.static('dist'))
+
+function reload() {
+  console.log('> Reloading')
+  io.emit('reload')
+}
+
+chokidar.watch('index.html', { ignoreInitial: true }).on('all', () => {
+  console.log('> Index changed')
+  reload()
+})
+
+chokidar.watch('script.js', { ignoreInitial: true }).on('all', () => {
+  console.log('> Script changed')
+  reload()
+})
+
+function buildSass(file) {
+  sass.render({ file, outputStyle: 'compressed' }, async (errors, result) => {
+    if (errors) {
+      console.log('> Sass errors!')
+      console.log(errors)
+      return
+    }
+    const outFile = file.replace('src', 'dist').replace('.scss', '.css')
+    await fs.outputFile(outFile, result.css)
+    reload()
+  })
+}
+
+chokidar.watch('src/*.scss', { ignoreInitial: true }).on('all', (event, file) => {
+  console.log('> Stylesheet changed')
+  buildSass(file)
+})
+
+chokidar.watch('src/parts/*.scss', { ignoreInitial: true }).on('all', async () => {
+  console.log('> Stylesheet part changed')
+  const src = await fs.readdir('src')
+  const files = src.filter(file => file !== 'parts').map(file => `src/${file}`)
+  for (let file of files) {
+    buildSass(file)
+  }
+})
+
+http.listen(3000, () => console.log('> Ready at http://localhost:3000/'))