Merge pull request #11 from jkazama/topic/6

パッケージ管理を npm に統一 fix #6

Author: jkazama

bower.json

@@ -18,9 +18,8 @@ const paths = {
     css:  `${root.dist}/css`,
     font: `${root.dist}/fonts`
   },
-  bower: {
-    component: `${__dirname}/bower_components`,
-    file:      `${__dirname}/bower.json`
+  node: {
+    modules: `${__dirname}/node_modules`
   }
 }
 const resource = {
@@ -32,16 +31,21 @@ const resource = {
     },
     sass:   `${paths.src.css}/**/*.s+(a|c)ss`,
     static: `${paths.src.static}/**/*`,
-    font:   `${paths.bower.component}/fontawesome/fonts/**/*`
+  },
+  vendor: {
+    js: {
+      jquery:       `${paths.node.modules}/jquery/dist/jquery.js`,
+      bootstrap:    `${paths.node.modules}/bootstrap-sass/assets/javascripts/bootstrap.js`,
+      eventemitter: `${paths.node.modules}/wolfy87-eventemitter/EventEmitter.js`
+    },
+    fontawesome: `${paths.node.modules}/font-awesome/fonts/**/*`,
   }
 }
 
 import gulp from 'gulp'
 import gulpLoaderPlugins from 'gulp-load-plugins'
 import del from 'del'
 import path from 'path'
-import bower from 'bower'
-import bowerFiles from 'main-bower-files'
 import webpack from 'webpack'
 import webpackStream from 'webpack-stream'
 import runSequence from 'run-sequence'
@@ -58,7 +62,7 @@ gulp.task('default', ['build', 'server'])
 
 //## build for developer
 gulp.task('build', (callback) =>
-  runSequence('clean', 'bower', ['build:jade', 'build:sass', 'build:webpack', 'build:static'], callback)
+  runSequence('clean', ['build:jade', 'build:sass', 'build:webpack', 'build:static'], callback)
 )
 
 //## build production
@@ -79,34 +83,10 @@ gulp.task('revision', (callback) =>
   runSequence('revision:clean', 'revision:append', 'clean', 'revision:copy', 'revision:clean', callback)
 )
 
-// build Vendor UI Library (bower.json) [Load/Concat]
-gulp.task('bower', () => {
-  bower.commands.install().on('end', () => {
-    const filterCss = ['**/bootstrap-datepicker3.css']
-    gulp.src(bowerFiles({filter: filterCss}))
-      .pipe($.concat('vendor.css'))
-      .pipe($.pleeease())
-      .pipe(gulp.dest(paths.dist.css))
-    gulp.src(resource.src.font)  // for font-awesome
-      .pipe(gulp.dest(paths.dist.font))
-    const filterJs = (file) => { // for bootstrap-sass-official
-      return /.*\.js/.test(file) && ($.slash(file).indexOf('/bootstrap/') == -1)
-    }
-    const appendJs = path.join(paths.bower.component, 'react/react-dom.js')
-    gulp.src(bowerFiles({filter: filterJs}).concat(appendJs))
-      .pipe($.concat('vendor.js'))
-      .pipe($.if(production, $.uglify()))
-      .pipe(gulp.dest(paths.dist.js))
-  })
-})
-
 // compile Webpack [ ES6(Babel) / Vue -> SPA(main.js) ]
 gulp.task('build:webpack', () => {
   process.env.NODE_ENV = (production == true) ? 'production' : 'development'
-  let plugins = [
-      new webpack.ResolverPlugin(new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main'])),
-      new webpack.optimize.DedupePlugin()
-  ]
+  let plugins = [ new webpack.optimize.DedupePlugin() ]
   if (production) plugins.push(new webpack.optimize.UglifyJsPlugin({compress: { warnings: false　}}))
   gulp.src([resource.src.webpack.babel, resource.src.webpack.vue])
     .pipe($.plumber())
@@ -120,7 +100,7 @@ gulp.task('build:webpack', () => {
         ]
       },
       resolve: {
-        modulesDirectories: ['node_modules', 'bower_components', paths.src.js],
+        modulesDirectories: ['node_modules', paths.src.js],
         extensions: ['', '.js', ".jsx", ".jade"]
       },
       plugins: plugins
@@ -141,13 +121,9 @@ gulp.task('build:jade', () => {
 })
 
 // compile Sass -> CSS
-// check https://github.com/sasstools/sass-lint/pull/168
 gulp.task('build:sass', () => {
   gulp.src(resource.src.sass)
     .pipe($.plumber())
-    // .pipe($.sassLint())
-    // .pipe($.sassLint.format())
-    // .pipe($.sassLint.failOnError())
     .pipe($.sass())
     .pipe($.concat('style.css'))
     .pipe($.pleeease())
@@ -157,6 +133,13 @@ gulp.task('build:sass', () => {
 
 // copy Static Resource
 gulp.task('build:static', () => {
+  const libs = resource.vendor.js
+  gulp.src(Object.keys(libs).map((key) => libs[key]))
+    .pipe($.concat("vendor.js"))
+    .pipe($.if(production, $.uglify()))
+    .pipe(gulp.dest(paths.dist.js))
+  gulp.src(resource.vendor.fontawesome)
+    .pipe(gulp.dest(paths.dist.font))
   gulp.src(resource.src.static)
     .pipe(gulp.dest(paths.dist.root))
 })
@@ -168,7 +151,6 @@ gulp.task('server', () => {
     notify: false
   })
   // watch for source
-  gulp.watch(paths.bower.file,    ['bower'])
   gulp.watch(resource.src.jade,   ['build:jade'])
   gulp.watch(resource.src.sass,   ['build:sass'])
   gulp.watch(resource.src.static, ['build:static'])

gulpfile.babel.js

@@ -29,7 +29,6 @@
     "gulp-jade": "~1.1.0",
     "gulp-htmlhint": "~0.3.0",
     "gulp-sass": "~2.1.1",
-    "gulp-sass-lint": "~1.1.0",
     "gulp-pleeease": "~2.0.2",
     "gulp-uglify": "~1.5.1",
     "gulp-rev-all": "~0.8.22",
@@ -48,12 +47,21 @@
     "babel-preset-es2015 ": "~6.6.0",
     "babel-preset-react ": "~6.5.0",
     "react-jade": "^2.5.0",
-    "react": "^0.14.7",
     "browser-sync": "~2.11.0"
   },
   "dependencies": {
     "co": "~4.6.0",
     "superagent": "~1.7.2",
-    "react-mixin": "~3.0.3"
+    "react": "~0.14.7",
+    "react-dom": "~0.14.7",
+    "react-router": "~0.13.5",
+    "react-mixin": "~3.0.3",
+    "wolfy87-eventemitter": "~4.3.0",
+    "flux": "~2.1.1",
+    "lodash": "~4.6.0",
+    "dateformat": "~1.0.12",
+    "jquery": "~2.2.1",
+    "bootstrap-sass": "~3.3.6",
+    "font-awesome": "~4.5.0"
   }
 }

package.json

@@ -14,8 +14,7 @@ $panel-body-padding: .6em;
 $panel-heading-padding: .4em .6em;
 $panel-default-text: #666;
 
-@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-sprockets";
-@import "../../bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap";
+@import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
 
 // ### basic ###
 

source/css/bootstrap.scss

@@ -3,4 +3,4 @@
 // FontAwesomeのscss拡張サポート
 //----------------------------------
 
-@import '../../bower_components/fontawesome/scss/font-awesome';
+@import '../../node_modules/font-awesome/scss/font-awesome';

source/css/fontawesome.scss

@@ -1,9 +1,11 @@
-// React Router
-let RouteHandler = ReactRouter.RouteHandler
+import React from "react"
+import Router from "react-router"
 
 import {Component} from "platform/react"
 import Header from "components/header"
 
+const RouteHandler = Router.RouteHandler
+
 export default class App extends Component {
   render() {
     return(

source/js/app.js

@@ -1,10 +1,12 @@
+import React from "react"
+
 import {Component} from "platform/react"
 import {Message, Text, Label} from "platform/react-ui"
 import {CashInOuts} from "stores/asset"
 import ActionTypes from "constants/asset"
 import ActionCreators from "actions/asset"
 
-const Link = ReactRouter.Link
+const Link = Component.routerLink()
 
 // parent
 export default class Asset extends Component {

source/js/components/asset.js

@@ -1,11 +1,12 @@
-// Header
+import React from "react"
+
 import {Log} from "platform/plain"
 import {Component} from "platform/react"
 import {Logins} from "stores/master"
 import ActionTypes from "constants/master"
 import ActionCreators from "actions/master"
 
-const Link = ReactRouter.Link
+const Link = Component.routerLink()
 
 export default class Header extends Component {
   initialize() {

source/js/components/header.js

@@ -1,3 +1,5 @@
+import React from "react"
+
 import {Component} from "platform/react"
 import {Message, Text} from "platform/react-ui"
 import {Logins} from "stores/master"

source/js/components/login.js

@@ -1,8 +1,11 @@
+import React from "react"
+
 import {Component} from "platform/react"
 
+const Link = Component.routerLink()
+
 export default class Timeout extends Component {
   render() {
-    const Link = ReactRouter.Link
     return (
       <div className="col-xs-6 col-xs-offset-3">
         <div className="panel panel-default">