Add browserify

Author: t32k

README.md

@@ -2,19 +2,20 @@
 
 This project is alpha version, forever.
 
-## Features
+## Installation
 
-Require [Babel](https://babeljs.io/), [PostCSS](https://github.com/postcss/postcss).
+Firtst up, you have to install latest [Node.js](https://nodejs.org/en/).
 
-### Plugins
+Next, please type the following commands.
 
-+ [autoprefixer](https://github.com/postcss/autoprefixer)
-+ [postcss-calc](https://github.com/postcss/postcss-calc)
-+ [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties)
-+ [postcss-import](https://github.com/postcss/postcss-import)
-+ [cssnano](https://github.com/ben-eb/cssnano)
-+ [stylelint](http://stylelint.io/)
+```
+$ npm install -g gulp
+$ cd path/to/maple
+$ npm install
+$ npm start
+```
 
-## Installation
+### Taking Future Syntax
 
-This project use a bunch of npm, so you need [Node.js](https://nodejs.org/) v4.0+.
++ JavaScript: [Babel](https://babeljs.io/)
++ CSS: [cssnext](http://cssnext.io/)(some specs only)

bundle.js

@@ -1,7 +1,6 @@
 var gulp = require('gulp');
 var browserSync = require('browser-sync');
 var sourcemaps = require('gulp-sourcemaps');
-var babel = require('gulp-babel');
 var eslint = require('gulp-eslint');
 var postcss = require('gulp-postcss');
 var del = require('del');
@@ -17,28 +16,58 @@ var processors = [
   })
 ];
 
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
 var browserify = require('browserify');
 var babelify = require('babelify');
 var watchify = require('watchify');
 var uglify = require('gulp-uglify');
 
+// Thanks
+// https://gist.github.com/danharper/3ca2273125f500429945
+function compile(watch) {
+  var bundler = watchify(browserify('src/js/app.js', {debug: true}).transform(babelify));
+  function rebundle() {
+    bundler.bundle()
+      .on('error', function (err) {
+        console.error(err);
+        this.emit('end');
+      })
+      .pipe(source('app.js'))
+      .pipe(buffer())
+      .pipe(sourcemaps.init()
+      .pipe(uglify())
+      .pipe(sourcemaps.write('./'))
+      .pipe(gulp.dest('dest/js'));
+  }
+  if (watch) {
+    bundler.on('update', function () {
+      console.log('-> bundling...');
+      rebundle();
+    });
+  }
+  rebundle();
+}
+
+function watch() {
+  return compile(true);
+}
+gulp.task('build:js', function() { return compile(); });
+gulp.task('watch:js', function() { return watch(); });
+
+
 // Clean Dir
 gulp.task('clean', function () {
   del(['dest/js', 'dest/css']).then(function (paths) {
     console.log('Deleted files/folders:\n', paths.join('\n'));
   });
 });
 
-// JavaScript Task
-gulp.task('js', function () {
+// ES Lint
+gulp.task('lint', function () {
   return gulp.src('src/js/app.js')
-    .pipe(sourcemaps.init())
     .pipe(eslint())
-    .pipe(eslint.format())
-    .pipe(babel())
-    .pipe(uglify())
-    .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('dest/js'));
+    .pipe(eslint.format());
 });
 
 // CSS Task

dest/js/app.js

@@ -25,16 +25,17 @@
     "start": "gulp serve",
     "build": "gulp build"
   },
+  "dependencies": {
+    "babel": "^5.8.23"
+  },
   "devDependencies": {
     "autoprefixer": "^6.0.2",
-    "babel": "^5.8.23",
     "babelify": "^6.3.0",
     "browser-sync": "^2.8.2",
     "browserify": "^11.2.0",
     "cssnano": "^3.0.0",
     "del": "^2.0.2",
     "gulp": "^3.9.0",
-    "gulp-babel": "^5.2.1",
     "gulp-eslint": "^1.0.0",
     "gulp-postcss": "^6.0.0",
     "gulp-sourcemaps": "^1.5.2",
@@ -45,6 +46,8 @@
     "postcss-import": "^7.0.0",
     "postcss-reporter": "^1.1.0",
     "stylelint": "^1.2.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
     "watchify": "^3.4.0"
   },
   "license": "MIT"