diff --git a/.gitignore b/.gitignore
index deb381b..df22178 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules/
main.js
+style.css
diff --git a/gulpfile.js b/gulpfile.js
index 8dc0334..0d034c4 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,6 +6,9 @@ var watchify = require('watchify');
var reactify = require('reactify');
var notifier = require('node-notifier');
var server = require('gulp-server-livereload');
+var concat = require('gulp-concat');
+var sass = require('gulp-sass');
+var watch = require('gulp-watch');
var notify = function(error) {
var message = 'In: ';
@@ -58,11 +61,26 @@ gulp.task('serve', function(done) {
livereload: {
enable: true,
filter: function(filePath, cb) {
- cb( /main.js/.test(filePath) )
+ if(/main.js/.test(filePath)) {
+ cb(true)
+ } else if(/style.css/.test(filePath)){
+ cb(true)
+ }
}
},
open: true
}));
});
-gulp.task('default', ['build', 'serve']);
+gulp.task('sass', function () {
+ gulp.src('./sass/**/*.scss')
+ .pipe(sass().on('error', sass.logError))
+ .pipe(concat('style.css'))
+ .pipe(gulp.dest('./'));
+});
+
+gulp.task('default', ['build', 'serve', 'sass', 'watch']);
+
+gulp.task('watch', function () {
+ gulp.watch('./sass/**/*.scss', ['sass']);
+});
diff --git a/index.html b/index.html
index 177ab1d..96bfc76 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
+
diff --git a/package.json b/package.json
index 5c1bc8b..4602680 100644
--- a/package.json
+++ b/package.json
@@ -12,8 +12,10 @@
"gulp": "^3.8.11",
"gulp-concat": "^2.5.2",
"gulp-react": "^3.0.1",
+ "gulp-sass": "^2.0.1",
"gulp-server-livereload": "^1.3.0",
"gulp-util": "^3.0.4",
+ "gulp-watch": "^4.2.4",
"node-notifier": "^4.2.1",
"react": "^0.13.1",
"reactify": "^1.1.0",
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..3658fa4
--- /dev/null
+++ b/sass/style.scss
@@ -0,0 +1,3 @@
+.black {
+ color: black
+}
diff --git a/src/app.jsx b/src/app.jsx
index 6f6543e..8820526 100644
--- a/src/app.jsx
+++ b/src/app.jsx
@@ -2,7 +2,7 @@ var React = require('react');
var Hello = React.createClass({
render: function() {
- return
+ return
Hello!
}