Merge pull request #1 from nadavsinai/addReactandRefactor

Add reactand refactor

gulp/config.js

@@ -40,11 +40,11 @@ global.config = {
   filenames: {
     build: {
       styles: 'bundle.css',
-      scripts: 'bundle.js'
+      scripts: 'index.js'
     },
     release: {
       styles: 'bundle.min.css',
-      scripts: 'bundle.min.js'
+      scripts: 'index.min.js'
     },
     templates: {
       compiled: 'templates.js',

gulp/tasks/browserify.js

@@ -1,18 +1,71 @@
 'use strict';
 
 var gulp = require('gulp');
+var watchify = require('watchify');
+var gutil = require('gulp-util');
 var browserify = require('browserify');
-var source = require('vinyl-source-stream');
+var transform = require('vinyl-transform');
 var browserifyShim = require('browserify-shim');
-var ngAnnotate = require('gulp-ng-annotate');
 var to5ify = require('6to5ify');
-module.exports = gulp.task('browserify', function () {
-    return browserify({
-        entries: [config.paths.src.modules]
-    })
-        .transform(browserifyShim)
-        .transform(to5ify.configure({modules: 'common'}))
-        .bundle()
-        .pipe(source(config.filenames.release.scripts))
-        .pipe(gulp.dest(config.paths.dest.release.scripts));
-});
+var changed = require('gulp-changed'),
+    gif = require('gulp-if'),
+    _ = require('lodash'),
+    cache = {},
+    watchAndcheck;
+//
+// Task defaults
+var options = _.defaults({
+        debug: true,
+        cache: {}, packageCache: {}, fullPaths: true // Required watchify args
+        // Required watchify args
+    },
+    watchify.args
+);
+
+var notify = function (filename) {
+    gutil.log(gutil.colors.green('√') + ' ' + filename);
+};
+
+var bundler = function (filename) {
+    var b = browserify(_.extend(options, {entries: filename}));
+// transforms
+    b.transform(to5ify.configure({modules: "common"}));
+    b.transform({global: true}, browserifyShim);
+// events
+    b.on("error", function (err) {
+        console.log("Error : " + err.message);
+    });
+    b.on('bundle', notify.bind(null, 'BUNDLE ' + filename));
+    if (watchAndcheck) {
+        b = watchify(b);
+        // events
+        b.on('update', taskMaker.bind(this, watchAndcheck));
+        // cache for use during watch
+        cache[filename] = b;
+    }
+    return b.bundle();
+};
+
+var taskMaker = function (watch) {
+    // leverage vinyl-transform to turn
+// readable stream into vinyl object
+    var bundel = transform(function (filename) {
+        // return previous bundle
+        if (cache[filename]) {
+            return cache[filename].bundle();
+        }
+        return bundler(filename);
+    });
+
+    watchAndcheck = (watch) ? watch : false;
+    return gulp.src([config.paths.src.modules])
+        // don't check on first run ( i.e initialisation )
+        // but do for subsequent calls via bundle.on('update')
+        .pipe(gif(watchAndcheck, changed(config.paths.src.scripts), {
+            extension: '.js'
+        }))
+        .pipe(bundel)
+        .pipe(gulp.dest(config.paths.dest.build.scripts))
+};
+gulp.task('watchify', taskMaker.bind(this, true));
+gulp.task('browserify', taskMaker);

gulp/tasks/lint.js

@@ -3,9 +3,11 @@
 var gulp = require('gulp');
 var jshint = require('gulp-jshint');
 var stylish = require('jshint-stylish');
+var jsx = require('gulp-jsx');
 
 module.exports = gulp.task('lint', function () {
-  return gulp.src(config.paths.src.scripts)
-  .pipe(jshint())
-  .pipe(jshint.reporter(stylish));
+    return gulp.src(config.paths.src.scripts)
+        .pipe(jsx())
+        .pipe(jshint())
+        .pipe(jshint.reporter(stylish));
 });

package.json

@@ -3,24 +3,29 @@
   "engines": {
     "node": ">=0.10.0"
   },
-  "scripts": {
-    "postinstall": "npm install [email protected] gulp-header"
-  },
-  "dependencies":{
-    "jquery":"2.1.x",
-    "angular":"1.3.x"
+  "scripts": {},
+  "dependencies": {
+    "angular": "1.3.x",
+    "jquery": "2.1.x",
+    "lodash": "^3.2.0",
+    "ngreact": "~0.1.4",
+    "react": "^0.12.2"
   },
   "devDependencies": {
-    "6to5ify": "^3.1.2",
-    "browserify-shim": "^3.6.0",
-    "connect": "^2.24.2",
-    "gulp": "^3.8.0",
-    "gulp-angular-templatecache": "^1.2.1",
-    "gulp-autoprefixer": "0.0.8",
-    "gulp-csso": "^0.2.9",
-    "gulp-if": "^1.2.1",
-    "gulp-imagemin": "^0.6.1",
+    "6to5ify": "~3.1.2",
+    "browserify": "~7.0.0",
+    "browserify-shim": "~3.8.2",
+    "connect": "~2.24.2",
+    "gulp": "^3.8.11",
+    "gulp-angular-templatecache": "~1.2.1",
+    "gulp-autoprefixer": "~0.0.8",
+    "gulp-changed": "~1.1.1",
+    "gulp-csso": "~0.2.9",
+    "gulp-header": "~1.2.2",
+    "gulp-if": "~1.2.1",
+    "gulp-imagemin": "~0.6.1",
     "gulp-jshint": "^1.6.2",
+    "gulp-jsx": "^0.7.0",
     "gulp-less": "^1.3.3",
     "gulp-livereload": "^2.1.0",
     "gulp-minify-html": "^0.1.4",
@@ -30,16 +35,31 @@
     "gulp-rimraf": "^0.1.0",
     "gulp-sourcemaps": "^1.1.0",
     "gulp-uglify": "^0.3.0",
+    "gulp-util": "^3.0.3",
     "gulp-watch": "^0.6.9",
     "jshint-stylish": "^0.2.0",
     "run-sequence": "^0.3.6",
-    "vinyl-source-stream": "^0.1.1",
-    "watchify": "^0.10.2",
+    "vinyl-transform": "^1.0.0",
+    "watchify": "~2.3.0",
     "yargs": "^1.2.2"
   },
   "browser": {
+    "angular": "./node_modules/angular/angular.js",
     "angular-ui-bootstrap": "./bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js",
     "angular-ui-router": "./bower_components/angular-ui-router/release/angular-ui-router.min.js"
   },
-  "browserify-shim": {}
+  "browserify-shim": {
+    "jquery": "$",
+    "angular": "angular",
+    "angular-animate": {
+      "depends": [
+        "angular:angular"
+      ]
+    },
+    "angular-resource": {
+      "depends": [
+        "angular:angular"
+      ]
+    }
+  }
 }

src/modules/app/foo/fooController.js

@@ -2,5 +2,6 @@ export default class fooController {
     /*@ngInject*/
     constructor($scope) {
         $scope.welcome = 'Congratulations!';
+        $scope.person = { fname: 'Clark', lname: 'Kent' };
     }
 }

src/modules/app/foo/layout.html

@@ -5,4 +5,7 @@ <h1 class="sideways">ES6</h1>
   </a>
   <p><a href="https://github.com/jgoux/generator-angulpify" > based on angulpify yeoman generator </a></p>
   <h1>{{welcome}}</h1>
+  <h2>
+    <react-component name="HelloComponent" props="person" />
+  </h2>
 </div>

src/modules/app/index.js

@@ -1,10 +1,11 @@
 export default angular.module('build', [
     'ui.bootstrap',
     'ui.router',
+    require('ngreact').name,
     //load extra external dependencies here, e.g.:
     //'ngAnimate',
     //html templates in $templateCache generated by Gulp:
-    require('../../../tmp/templates').name,
+    //require('../../../tmp/templates').name,
     //useful directives, filters, services shared across the app
     require('../common').name,
     //example app module:

src/modules/common/directives/helloComponent.js

@@ -0,0 +1,12 @@
+/** @jsx React.DOM */
+var React =  require('react');
+
+export default React.createClass({
+    propTypes: {
+        fname : React.PropTypes.string.isRequired,
+        lname : React.PropTypes.string.isRequired
+    },
+    render: function() {
+        return <span>Hello {this.props.fname} {this.props.lname}</span>;
+    }
+});

src/modules/common/directives/index.js

@@ -1,2 +1,3 @@
 export default angular.module('build.common.directives', [])
-    .directive('fooDirective', require('./fooDirective'));
+    .directive('fooDirective', require('./fooDirective'))
+        .value('HelloComponent', require('./helloComponent'));

src/modules/index.js

@@ -5,5 +5,5 @@ require('jquery');
 require('angular');
 require('angular-ui-bootstrap');
 require('angular-ui-router');
-//app entry point
+////app entry point
 require('./app');