using livereload and sass now

README.md

@@ -30,6 +30,7 @@ firebase serve
 - That will build it all and watch the css, img, and js assets.
 - Then you can load up `http://localhost:5000` in a browser. narf!
 `/src/index.js` is the main file you'll want to edit for functionality.
+- If you have the [LiveReload Chrome extension](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) installed, it should do live css updates in your browser while gulp watch is running
 
 ## How To Add New Problems
 - Problems are at `/src/problems/*.js`

gulpfile.js

@@ -11,6 +11,8 @@ const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const svgo = require('gulp-svgo');
+const sass = require('gulp-sass');
+const livereload = require('gulp-livereload');
 
 function conf() {
   const opts = {};
@@ -65,12 +67,14 @@ gulp.task('css', () => {
     autoprefixer({browsers: ['last 1 version']}),
     cssnano()
   ];
-  return gulp.src('./src/css/*.css')
+  return gulp.src('./src/css/style.scss')
+    .pipe(sass.sync().on('error', sass.logError))
     .pipe(postcss(plugins))
-    .pipe(gulp.dest('./public/dist/css'));
+    .pipe(gulp.dest('./public/dist/css'))
+    .pipe(livereload());
 });
 
-const cssWatcher = gulp.watch('src/css/*.css', ['css']);
+const cssWatcher = gulp.watch('src/css/**/*.scss', ['css']);
 
 cssWatcher.on('change', event => {
   console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
@@ -112,6 +116,7 @@ gulp.task('build', () => {
   return compile();
 });
 gulp.task('watch', () => {
+  livereload.listen();
   return watch();
 });
 

package.json

@@ -61,6 +61,8 @@
     "babel-preset-latest": "^6.24.1",
     "browserify": "^14.1.0",
     "chai": "^3.5.0",
+    "gulp-livereload": "^3.8.1",
+    "gulp-sass": "^3.1.0",
     "gulp-svgo": "^1.0.3",
     "husky": "^0.13.3",
     "lint-staged": "^3.4.0",

src/css/lib/defaults.scss

@@ -0,0 +1,18 @@
+/* default stuff */
+body {
+  margin: 0;
+}
+body, input, select, textarea {
+  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
+  font-size: 16pt;
+  box-sizing: border-box;
+  color: #222
+}
+
+.monospace {
+  font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
+}
+
+.hide-until-load {
+  visibility: hidden;
+}

src/css/style.css → src/css/style.scss

@@ -2,24 +2,7 @@
 /* My custom styles
    ========================================================================== */
 
-/* default stuff */
-body {
-  margin: 0;
-}
-body, input, select, textarea {
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
-  font-size: 16pt;
-  box-sizing: border-box;
-  color: #222
-}
-
-.monospace {
-  font-family: Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
-}
-
-.hide-until-load {
-  visibility: hidden;
-}
+@import 'lib/defaults';
 
 
 /* grid elements */