Final workflow with webpack

.gitignore

@@ -1,4 +1,2 @@
-bower_components
-dist/assets/**/*.css
-dist/assets/**/*.js
+build
 node_modules

components/button.cjsx

@@ -2,6 +2,8 @@
 @todo
 ###
 
+
+css = require "./style/button.styl"
 # -- Components
 FontIcon    = require "./font_icon"
 Ripple      = require "./ripple"

components/input.cjsx

@@ -14,11 +14,14 @@ module.exports = React.createClass
     disabled    : React.PropTypes.bool
     multiline   : React.PropTypes.bool
     onChange    : React.PropTypes.func
+    style       : React.PropTypes.object
 
   getDefaultProps: ->
     type        : "text"
     disabled    : false
     multiline   : false
+    style       :
+      borderBottom    : "solid 2px red"
 
   getInitialState: ->
     value       : @props.value
@@ -34,7 +37,7 @@ module.exports = React.createClass
     style = ""
     style += " error" if @props.error
     # -- tag
-    <div data-component-input={@props.type} className={style}>
+    <div data-component-input={@props.type} className={style} style={@props.style}>
       {
         if @props.multiline
           <textarea {...@props} onChange={@onChange}>{@state.value}</textarea>

components/mixins/style.coffee

@@ -1,32 +0,0 @@
-###
-@todo
-###
-
-module.exports = React.createClass
-
-  # -- States & Properties
-  propTypes:
-    style       : React.PropTypes.string
-
-  # -- Lifecycle
-  componentWillMount: ->
-    console.log "07-lifecycle -> componentWillMount"
-
-  componentDidMount: ->
-    console.log "07-lifecycle -> componentDidMount"
-
-  componentWillReceiveProps: (next_props) ->
-    console.log "07-lifecycle -> componentWillReceiveProps -> ", next_props
-
-  componentWillUpdate: (next_props, next_states) ->
-    console.log "07-lifecycle -> componentWillUpdate -> ", next_props, next_states
-
-  componentDidUpdate: (prev_props, prev_states) ->
-    console.log "07-lifecycle -> componentDidUpdate -> ", prev_props, prev_states
-
-  componentWillUnmount: ->
-    console.log "07-lifecycle -> componentWillUnmount"
-
-  shouldComponentUpdate: (next_props, next_states) ->
-    console.log "07-lifecycle -> shouldComponentUpdate -> ", next_props, next_states
-    true

components/style/button.styl

@@ -0,0 +1,3 @@
+button
+  font-size: 16px
+  font-weight: bold

gulpfile.coffee

@@ -1,88 +0,0 @@
-"use strict"
-
-# -- DEPENDENCIES --------------------------------------------------------------
-gulp          = require "gulp"
-cjsx          = require "gulp-cjsx"
-concat        = require "gulp-concat"
-connect       = require "gulp-connect"
-header        = require "gulp-header"
-gutil         = require "gulp-util"
-uglify        = require "gulp-uglify"
-stylus        = require "gulp-stylus"
-pkg           = require "./package.json"
-# -- BROWSERIFY ----------------------------------------------------------------
-browserify    = require "browserify"
-source        = require "vinyl-source-stream"
-components    = browserify "./index.cjsx", extensions: [".cjsx", ".coffee"]
-components.transform require "coffee-reactify"
-spec          = browserify "./spec/test.cjsx", extensions: [".cjsx", ".coffee"]
-spec.transform require "coffee-reactify"
-
-# -- FILES ---------------------------------------------------------------------
-path =
-  dist          :   "./dist"
-  source        : [ "source/**/*.cjsx"
-                    "source/**/*.coffee"]
-  style         : [ "bower_components/STYLmethods/vendor.styl"
-                    "source/styles/__constants.styl"
-                    "source/styles/normalize.styl"
-                    "source/styles/app.styl"
-                    "source/styles/modules/*.styl"
-                    "source/styles/components/*.styl"
-                    "source/styles/screens/*.styl"]
-  dependencies  : [ "node_modules/react/dist/react-with-addons.js"
-                    "bower_components/hamsa/dist/hamsa.js"]
-  spec          : [ "spec/*.cjsx" ]
-# -- BANNER --------------------------------------------------------------------
-banner = [
-  "/**"
-  " * <%= pkg.name %> - <%= pkg.description %>"
-  " * @version v<%= pkg.version %>"
-  " * @link    <%= pkg.homepage %>"
-  " * @author  <%= pkg.author.name %> (<%= pkg.author.site %>)"
-  " * @license <%= pkg.license %>"
-  " */"
-  ""
-].join("\n")
-# -- TASKS ---------------------------------------------------------------------
-gulp.task "server", ->
-  connect.server
-    port      : 8000
-    livereload: true
-    # root      : path.dist
-
-gulp.task "source", ->
-  components.bundle()
-  # gulp.src path.soure
-  #   .pipe coffee().on 'error', gutil.log
-    .pipe source "#{pkg.name}.js"
-    # .pipe uglify mangle: true
-    .pipe header banner, pkg: pkg
-    .pipe gulp.dest "#{path.dist}"
-    .pipe connect.reload()
-
-gulp.task "style", ->
-  gulp.src path.style
-    .pipe concat "#{pkg.name}.styl"
-    .pipe stylus
-      compress: true
-      errors  : true
-    .pipe header banner, pkg: pkg
-    .pipe gulp.dest "#{path.dist}/assets/css"
-    .pipe connect.reload()
-
-gulp.task "spec", ->
-  spec.bundle()
-    .on "error", gutil.log.bind(gutil, "Browserify Error")
-    .pipe source "#{pkg.name}.test.js"
-    .pipe header banner, pkg: pkg
-    .pipe gulp.dest "spec/"
-    .pipe connect.reload()
-
-gulp.task "init", ["source", "style", "spec"]
-
-gulp.task "default", ->
-  gulp.run ["init", "server"]
-  gulp.watch path.source, ["source"]
-  gulp.watch path.style, ["style"]
-  gulp.watch path.spec, ["spec"]

package.json

@@ -8,27 +8,15 @@
     "coffee-script": "*"
   },
   "devDependencies": {
-    "browserify": "^10.0.0",
-    "coffee-reactify": "^3.0.0",
-    "gulp": "*",
-    "gulp-cjsx": "*",
-    "gulp-concat": "*",
-    "gulp-connect": "*",
-    "gulp-flatten": "*",
-    "gulp-header": "*",
-    "gulp-stylus": "*",
-    "gulp-uglify": "*",
-    "gulp-util": "*",
-    "gulp-yml": "*",
-    "moment": "^2.10.2",
+    "css-loader": "^0.14.5",
     "node-libs-browser": "^0.5.2",
     "react": "^0.13.2",
-    "react-inline": "^0.6.1",
-    "spa-router": "^0.5.20",
-    "vinyl-source-stream": "^1.1.0",
+    "style-loader": "^0.12.3",
+    "stylus-loader": "^1.2.0",
     "webpack": "^1.9.10"
   },
   "scripts": {
-    "start": "gulp"
+    "start" : "webpack-dev-server --devtool eval --watch",
+    "deploy": "NODE_ENV=production webpack -p"
   }
 }

spec/index.html

@@ -16,6 +16,6 @@
   </head>
   <body>
     <script src="../node_modules/react/dist/react-with-addons.js"></script>
-    <script src="./react-kit.test.js"></script>
+    <script src="../build/react-kit.js"></script>
   </body>
 </html>

webpack.config.coffee

@@ -0,0 +1,39 @@
+"use strict"
+
+pkg           = require "./package.json"
+node_modules  = __dirname + '/node_modules'
+
+module.exports =
+  cache       : true
+
+  resolve     : extensions: ['', '.cjsx', '.coffee', '.js', '.json', 'styl']
+
+  context     : __dirname + '/spec'
+
+  entry       : ['./test.cjsx']
+
+  output :
+    path      : if process.env.NODE_ENV is 'production' then './dist' else './build'
+    filename  : pkg.name + '.js'
+    publicPath: '/build/'
+
+  devServer:
+    # contentBase : "./build"
+    # host        : "localhost"
+    # port        : 8000
+    # colors      : true
+    # progress    : true
+    # noInfo      : false
+    # hot         : true
+    inline      : true
+
+  module :
+    noParse: [node_modules + '/react/dist/*.js']
+
+    loaders : [
+      test    : /\.cjsx$/,    loader: 'coffee-jsx-loader'
+    ,
+      test    : /\.coffee$/,  loader: 'coffee-jsx-loader'
+    ,
+      test    : /\.styl$/,    loader: 'style-loader!css-loader!stylus-loader'
+    ]

webpack.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-    context: __dirname + "/spec",
-    entry: "./test.cjsx",
-    output: {
-        path: __dirname,
-        filename: "bundle.js"
-    },
-    module: {
-        loaders: [
-            { test: /\.cjsx$/, loader: "coffee-jsx-loader" }
-        ]
-    }
-};