init

shenqihui · Feb 18, 2016 · 2dbc441 · 2dbc441
commit 2dbc441
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+temp
+dist
+node_modules
+npm-debug.log
+.sass-cache
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,21 @@
+{
+  "node": true,
+  "esnext": true,
+  "bitwise": true,
+  "camelcase": true,
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "indent": 2,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "quotmark": "single",
+  "regexp": true,
+  "undef": true,
+  "unused": true,
+  "strict": true,
+  "trailing": true,
+  "smarttabs": true,
+  "white": true
+}
diff --git a/bower.json b/bower.json
@@ -0,0 +1,6 @@
+{
+  "name": "package",
+  "version": "0.0.0",
+  "dependencies": {}
+}
+
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,59 @@
+'use strict';
+var gulp = require('gulp');
+var browserSync = require('browser-sync');
+var rimraf = require('gulp-rimraf');
+var source = require('vinyl-source-stream');
+var browserify = require('browserify');
+var html2react = require('gulp-html2react');
+var changed = require('gulp-changed');
+var debowerify = require('debowerify');
+
+gulp.task('clean', function() {
+  return gulp.src('dist', {
+    read: false
+  })
+    .pipe(rimraf({
+  force: true
+    }));
+});
+
+gulp.task('browserSync', function() {
+  browserSync.init(['dist/**'], {
+    server: {
+      baseDir: 'dist'
+    }
+  });
+});
+
+gulp.task('react', function() {
+  return gulp.src('src/javascripts/templates/**/*.html')
+  .pipe(html2react())
+  .pipe(gulp.dest('temp/javascripts/templates'));
+});
+
+gulp.task('copy_js', function() {
+  var files = ['src/javascripts/**/*.js'];
+  return gulp.src(files).pipe(gulp.dest('temp/javascripts'));
+});
+
+gulp.task('copy', ['copy_js'], function() {
+  var files = ['src/**/*', '!src/javascripts', '!src/javascripts/**/*'];
+  var DEST = 'dist';
+
+  return gulp.src(files).pipe(changed(DEST)).pipe(gulp.dest(DEST));
+});
+
+// using vinyl-source-stream:
+gulp.task('browserify', ['copy', 'react'], function() {
+  var bundleStream = browserify('./temp/javascripts/app.js').transform(debowerify).bundle();
+  bundleStream
+  .pipe(source('./javascripts/app.js'))
+  .pipe(gulp.dest('./dist/'));
+});
+
+gulp.task('default', ['browserify', 'browserSync'], function() {
+  gulp.watch('src/*.html', ['copy']);
+  gulp.watch('src/stylesheets/**/*', ['copy']);
+
+  gulp.watch('src/javascripts/**/*', ['browserify']);
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+	"name": "package",
+	"version": "0.0.0",
+	"devDependencies": {
+		"gulp": "~3.8.8",
+		"browser-sync": "~2.6.9",
+		"debowerify": "^0.8.2",
+		"gulp-changed": "^1.0.0",
+		"gulp-html2react": "^0.1.6",
+		"gulp-rimraf": "~0.1.1",
+		"vinyl-source-stream": "~1.0.0",
+		"browserify": "~6.0.3"
+	},
+	"dependencies": {
+		"react": "~0.13.2"
+	}
+}
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+	<p>welcome to  react</p>
+	<section id="react"></section>
+	<script type="text/javascript" src="javascripts/app.js"></script>
+</body>
+</html>
diff --git a/src/javascripts/app.js b/src/javascripts/app.js
@@ -0,0 +1,10 @@
+var React = require('react');
+
+var Title = require('./components/title');
+
+React.render(
+  React.createElement(Title, {
+  name: 'John Cena'
+  }),
+  document.getElementById('react')
+);
diff --git a/src/javascripts/components/title.js b/src/javascripts/components/title.js
@@ -0,0 +1,10 @@
+var React = require('react');
+var titleTemplate = require('.././templates/title');
+
+var Title = React.createClass({
+  render: function() {
+    return titleTemplate.call(this);;
+  }
+});
+
+module.exports = Title;
diff --git a/src/javascripts/templates/title.html b/src/javascripts/templates/title.html
@@ -0,0 +1 @@
+<p>{this.props.name}</p>
diff --git a/src/stylesheets/app.css b/src/stylesheets/app.css