Transform jsx to js in gulp

we3x · we3x · commit ab463bac873b · 2015-09-05T22:07:10.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,2 @@
-*.css
+app/static/
 node_modules/
diff --git a/app/index.html b/app/index.html
@@ -1,10 +1,10 @@
 <html>
 <head>
   <title> Flarior </title>
-  <link href="/css/bla.css" rel="stylesheet">
+  <link href="/static/css/bla.css" rel="stylesheet">
 </head>
 <body>
-  <h1>Hello World</h1>
-  sadjaksdak
+  <div id="ReactApp"></div>
+  <script src="/static/js/app.js"></script>
 </body>
 </html>
diff --git a/app/js/alt.js b/app/js/alt.js
@@ -0,0 +1,7 @@
+var Alt = require('alt');
+var alt = new Alt();
+var chromeDebug = require('alt/utils/chromeDebug')
+
+chromeDebug(alt);
+
+module.exports = alt;
diff --git a/app/js/app.jsx b/app/js/app.jsx
@@ -0,0 +1,7 @@
+var React = require('react');
+var Locations = require('./components/Locations.jsx');
+
+React.render(
+  <Locations />,
+  document.getElementById('ReactApp')
+);
diff --git a/app/js/components/Locations.jsx b/app/js/components/Locations.jsx
@@ -0,0 +1,11 @@
+var React = require('react');
+
+var Locations = React.createClass({
+    render() {
+        return (
+            <h1>Uspelo</h1>
+        );
+    }
+});
+
+module.exports = Locations;
diff --git a/app/sass/bla.scss b/app/sass/bla.scss
@@ -1,8 +1,8 @@
 $font-stack: Helvatica, sans-serif;
 $primary-color: #fff;
 
-h1 {
+body {
   font: 100% $font-stack;
   color: $primary-color;
-  background-color: red;
+  background-color: blue;
 }
diff --git a/gulpfile.js b/gulpfile.js
@@ -2,16 +2,23 @@ var path  = require('path');
 
 global.gulp = require('gulp');
 var webserver = require('gulp-webserver');
+var browserify = require('gulp-browserify');
 var sass = require('gulp-sass');
+var useref = require('gulp-useref');
+var rename = require('gulp-rename');
+var reactify = require('gulp-reactify');
+var source = require('vinyl-source-stream');
 
 global.flariorPaths = {
   app : path.resolve('./app/'),
   sass : path.resolve('./app/sass'),
   sassGlob: path.resolve('./app/sass/**/*.scss'),
+  javascript: path.resolve('./app/js/**/*.js*'),
+  jsxEntry: path.resolve('./app/js/app.jsx'),
   css: path.resolve('./app/css')
 }
 
-gulp.task('webserver',['sass', 'watch'], function() {
+gulp.task('webserver',['sass', 'watch', 'compileJs'], function() {
   gulp.src(flariorPaths.app)
     .pipe(webserver({
       host: '0.0.0.0',
@@ -27,11 +34,15 @@ gulp.task('sass', function compileInuit(){
   .pipe(sass({
     errLogToConsole: true
   }))
-  .pipe(gulp.dest('./app/css'))
+  .pipe(gulp.dest('./app/static/css'))
+});
+
+gulp.task('compileJs', function(){
 });
 
 gulp.task('watch', function(){
   gulp.watch(flariorPaths.sassGlob, ['sass']);
+  gulp.watch(flariorPaths.javascript, ['compileJs']);
 });
 
 gulp.task('default', ['webserver']);
diff --git a/package.json b/package.json
@@ -17,11 +17,24 @@
   },
   "homepage": "https://github.com/flarior/flarior-frontend#readme",
   "dependencies": {
+    "alt": "^0.17.3",
+    "browserify": "^11.0.1",
     "gulp": "^3.9.0",
+    "gulp-browserify": "^0.5.1",
     "gulp-dest": "^0.2.2",
+    "gulp-react": "^3.0.1",
+    "gulp-reactify": "^3.0.1",
+    "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.4",
     "gulp-sourcemaps": "^1.5.2",
     "gulp-webserver": "^0.9.1",
-    "inuit-starter-kit": "^0.2.9"
+    "inuit-starter-kit": "^0.2.9",
+    "react": "^0.13.3",
+    "react-tools": "^0.13.3",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
+  },
+  "devDependencies": {
+    "gulp-useref": "^1.3.0"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`		`-*.css`
	`1`	`+app/static/`
`2`	`2`	`node_modules/`