init npm script

shenqihui · Feb 18, 2016 · 4d4d0fb · 4d4d0fb
1 parent 2dbc441
commit 4d4d0fb
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 30 deletions.
diff --git 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
@@ -26,34 +26,34 @@ 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));
 });
 
 // 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 → index.html b/src/index.html → index.html
@@ -3,10 +3,11 @@
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
+  <link rel="stylesheet" href="dist/css/app.css">  
 </head>
 <body>
 	<p>welcome to  react</p>
 	<section id="react"></section>
-	<script type="text/javascript" src="javascripts/app.js"></script>
+	<script type="text/javascript" src="dist/js/app.js"></script>
 </body>
 </html>
diff --git 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 <[email protected]>",
+  "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
diff --git a/src/img/svg/github_logo.svg b/src/img/svg/github_logo.svg
diff --git a/src/javascripts/templates/title.html b/src/javascripts/templates/title.html
diff --git a/src/javascripts/app.js → src/js/app.js b/src/javascripts/app.js → 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 → src/js/components/title.js b/src/javascripts/components/title.js → 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 <p>{this.props.name}</p>;
   }
 });
 

diff --git a/src/less/app.less 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;
+  }
+}
diff --git a/src/stylesheets/app.css b/src/stylesheets/app.css