diff --git a/.jshintrc b/.jshintrc index 0cd291c..24a40bc 100644 --- a/.jshintrc +++ b/.jshintrc @@ -17,5 +17,8 @@ "strict": true, "trailing": true, "smarttabs": true, - "white": true + "white": true, + "globals": { + "document": true + } } diff --git a/gulpfile.js b/gulpfile.js index f5b884b..7a856c8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -26,18 +26,18 @@ gulp.task('browserSync', function() { }); gulp.task('react', function() { - return gulp.src('src/javascripts/templates/**/*.html') + return gulp.src('src/js/templates/**/*.html') .pipe(html2react()) - .pipe(gulp.dest('temp/javascripts/templates')); + .pipe(gulp.dest('temp/js/templates')); }); gulp.task('copy_js', function() { - var files = ['src/javascripts/**/*.js']; - return gulp.src(files).pipe(gulp.dest('temp/javascripts')); + var files = ['src/js/**/*.js']; + return gulp.src(files).pipe(gulp.dest('temp/js')); }); gulp.task('copy', ['copy_js'], function() { - var files = ['src/**/*', '!src/javascripts', '!src/javascripts/**/*']; + var files = ['src/**/*', '!src/js', '!src/js/**/*']; var DEST = 'dist'; return gulp.src(files).pipe(changed(DEST)).pipe(gulp.dest(DEST)); @@ -45,15 +45,15 @@ gulp.task('copy', ['copy_js'], function() { // using vinyl-source-stream: gulp.task('browserify', ['copy', 'react'], function() { - var bundleStream = browserify('./temp/javascripts/app.js').transform(debowerify).bundle(); + var bundleStream = browserify('./temp/js/app.js').transform(debowerify).bundle(); bundleStream - .pipe(source('./javascripts/app.js')) + .pipe(source('./js/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/css/**/*', ['copy']); - gulp.watch('src/javascripts/**/*', ['browserify']); + gulp.watch('src/js/**/*', ['browserify']); }); diff --git a/src/index.html b/index.html similarity index 60% rename from src/index.html rename to index.html index ec59cdc..3bf1394 100644 --- a/src/index.html +++ b/index.html @@ -3,10 +3,11 @@ Document +

welcome to react

- + \ No newline at end of file diff --git a/package.json b/package.json index 817b92f..4d2b72e 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,81 @@ { - "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" - } + "name": "my_github", + "version": "0.1.0", + "description": "My github page", + "author": "shenqihui ", + "license": "MIT", + "scripts": { + "clean": "rm -f dist/{css/*,js/*,img/*}", + "autoprefixer": "postcss -u autoprefixer -r dist/css/*", + "less": "for file in src/less/*.less; do lessc --strict-imports $file dist/css/`basename -s .less $file`.css ; done", + "lint": "eslint src/js", + "jsxhint": "jsxhint src/js", + "react": "mkdir -p dist/js/ && browserify -t [ babelify --presets [ react ] ] src/js/app.js -o dist/js/app.js", + "uglify": "mkdir -p dist/js && rm -rf dist/js/app.min.js && uglifyjs dist/js/*.js -m -c -o dist/js/app.min.js", + "imagemin": "imagemin src/img dist/img -p", + "icons": "svgo -f src/img/icons && mkdir -p dist/img && svg-sprite-generate -d src/img/icons -o dist/img/icons.svg", + "serve": "browser-sync start --server --files 'dist/css/*.css, dist/js/*.js, *.html, !node_modules/**/*.html'", + "build:less": "npm run less && npm run autoprefixer", + "build:js": "npm run react && npm run jsxhint && npm run uglify", + "build:img": "npm run imagemin && npm run icons", + "build:all": "npm run build:less && npm run build:js && npm run build:img", + "watch:less": "onchange 'src/less/*.less' -v -- npm run build:less", + "watch:js": "onchange 'src/js/*.*' -- npm run build:js", + "watch:img": "onchange 'src/img/*.*' -- npm run build:img", + "watch:all": "npm-run-all -p build:all watch:less watch:js watch:img serve", + "postinstall": "npm run watch:all" + }, + "browser": { + "react": "react" + }, + "browserify": { + "transform": [ + [ + "browserify-shim", + "babelify", + { + "presets": [ + "react" + ] + } + ] + ] + }, + "browserify-shim": { + "react": "global:React", + "react-dom": "global:ReactDOM", + "jquery": "global:$" + }, + "devDependencies": { + "autoprefixer": "^6.3.1", + "babel-preset-react": "^6.5.0", + "babelify": "^7.2.0", + "browser-sync": "^2.11.1", + "browserify": "~6.0.3", + "debowerify": "^0.8.2", + "eslint": "^1.10.3", + "eslint-config-standard": "^4.4.0", + "eslint-plugin-standard": "^1.3.1", + "gulp": "~3.8.8", + "gulp-changed": "^1.0.0", + "gulp-html2react": "^0.1.6", + "gulp-rimraf": "~0.1.1", + "imagemin-cli": "^2.1.0", + "jsxhint": "^0.15.1", + "less": "^2.6.0", + "node-sass": "^3.4.2", + "npm-run-all": "^1.5.1", + "onchange": "^2.0.0", + "parallelshell": "^2.0.0", + "postcss-cli": "^2.4.0", + "react": "^0.13.3", + "react-dom": "^0.14.7", + "svg-sprite-generator": "0.0.7", + "svgo": "^0.6.1", + "uglify-js": "^2.6.1", + "vinyl-source-stream": "~1.0.0" + }, + "dependencies": { + "react": "~0.13.2" + } } diff --git a/src/img/icons/github_logo.svg b/src/img/icons/github_logo.svg new file mode 100644 index 0000000..96f5f91 --- /dev/null +++ b/src/img/icons/github_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/img/svg/github_logo.svg b/src/img/svg/github_logo.svg new file mode 100644 index 0000000..3dd5fd0 --- /dev/null +++ b/src/img/svg/github_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/javascripts/templates/title.html b/src/javascripts/templates/title.html deleted file mode 100644 index 2767a8a..0000000 --- a/src/javascripts/templates/title.html +++ /dev/null @@ -1 +0,0 @@ -

{this.props.name}

diff --git a/src/javascripts/app.js b/src/js/app.js similarity index 89% rename from src/javascripts/app.js rename to src/js/app.js index 3f71eb8..b920ef4 100644 --- a/src/javascripts/app.js +++ b/src/js/app.js @@ -4,7 +4,7 @@ var Title = require('./components/title'); React.render( React.createElement(Title, { - name: 'John Cena' + name: 'Github' }), document.getElementById('react') ); diff --git a/src/javascripts/components/title.js b/src/js/components/title.js similarity index 56% rename from src/javascripts/components/title.js rename to src/js/components/title.js index 2a5ba47..de4468c 100644 --- a/src/javascripts/components/title.js +++ b/src/js/components/title.js @@ -1,9 +1,10 @@ +'use strict'; + var React = require('react'); -var titleTemplate = require('.././templates/title'); var Title = React.createClass({ render: function() { - return titleTemplate.call(this);; + return

{this.props.name}

; } }); diff --git a/src/less/app.less b/src/less/app.less new file mode 100644 index 0000000..40e3143 --- /dev/null +++ b/src/less/app.less @@ -0,0 +1,22 @@ +body { + font-size: 13px; + border-radius: 4px; +} + +.flex { + display: flex; +} + +.transform { + transform: scale(0.5); + -moz-transform: scale(0.6); +} + +.transition { + transition: 1s; + + &.not-lower { + /* autoprefixer: off */ + transition: 1s; + } +} \ No newline at end of file diff --git a/src/stylesheets/app.css b/src/stylesheets/app.css deleted file mode 100644 index e69de29..0000000