use browser-sync, use babel, update deps

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "parser": "babel-eslint"
+}

README.md

@@ -13,8 +13,7 @@ $ npm install
 
 ## Development
 
-Builds the application and starts a webserver with livereload. By default the webserver starts at port 1337.
-You can define a port with `$ gulp --port 3333`.
+Builds the application and starts a webserver with livereload. By default the webserver starts at port 3000.
 
 ```
 $ gulp
@@ -35,24 +34,6 @@ Builds a minified version of the application in the dist folder.
 $ gulp build --type production
 ```
 
-## Webpack Hints
-
-### Imports Loader
-
-If you want to use plugins for a certain library, that does not require dependencies you can use the [imports loader](http://webpack.github.io/docs/shimming-modules.html#imports-loader). Here the file 'awesome-plugin.js' expects a global variable called jQuery. We can just import that variable via ```jQuery=path/to/jQuery```.
-
-Install the imports loader via:
-
-```
-npm install --save imports-loader
-```
-You can use it in your code like:
-
-```
-require("imports?jQuery=../bower_components/jquery/dist/jquery!./awesome-plugin.js");
-```
-
-
 
 
 ###Requirements

app/scripts/main.js

@@ -1,7 +1,4 @@
-var utils = require('./utils');
-
-// for example:
-// var $ = require('../bower_components/jquery/dist/jquery');
+const utils = require('./utils');
 
 utils.addHelperClasses();
 

app/scripts/utils.js

@@ -4,7 +4,7 @@
  */
 
 
-var debugMode = true;
+const DEBUG = true;
 
 /////////////////////
 /// devices helper //
@@ -48,7 +48,7 @@ function numberFormat(number) {
 
 // add some classes to the html element
 function addHelperClasses() {
-  var htmlElement = document.getElementsByTagName('html')[0],
+  let htmlElement = document.getElementsByTagName('html')[0],
     className = [];
 
   if (isOldBrowser) {
@@ -67,11 +67,11 @@ function addHelperClasses() {
 }
 
 function log(){
-  if(!debugMode) {
+  if(!DEBUG) {
     return false;
   }
 
-  var args = Array.prototype.slice.call(arguments);
+  const args = Array.prototype.slice.call(arguments);
 
   if(args.length === 1){
     args = args[0];
@@ -80,17 +80,14 @@ function log(){
   console.log(args);  
 }
 
-module.exports = {
-
-  isMobile: isMobile,
-  isSmartphone: isSmartphone,
-  isOldBrowser: isOldBrowser,
-  clickEvent: clickEvent,
-
-  isUndefined: isUndefined,
-  isNumeric: isNumeric,
-  numberFormat: numberFormat,
-  addHelperClasses: addHelperClasses,
-  log : log
-
+export default {
+  isMobile,
+  isSmartphone,
+  isOldBrowser,
+  clickEvent,
+  isUndefined,
+  isNumeric,
+  numberFormat,
+  addHelperClasses,
+  log
 };

gulpfile.js

@@ -1,15 +1,17 @@
-var gulp = require('gulp');
-var $ = require('gulp-load-plugins')();
-var del = require('del');
-// set variable via $ gulp --type production
-var environment = $.util.env.type || 'development';
-var isProduction = environment === 'production';
-var webpackConfig = require('./webpack.config.js').getConfigByType(environment);
+const gulp = require('gulp');
+const $ = require('gulp-load-plugins')();
+const del = require('del');
+// set env via $ gulp --type production
+const environment = $.util.env.type || 'development';
+const isProduction = environment === 'production';
+const webpackConfig = require('./webpack.config.js').getConfigByType(environment);
+const webpack = require('webpack-stream');
+const browserSync = require('browser-sync');
+const reload = browserSync.reload;
 
-var port = $.util.env.port || 1337;
-var app = 'app/';
-var dist = 'dist/';
-var autoprefixerBrowsers = [                 
+const app = 'app/';
+const dist = 'dist/';
+const autoprefixerBrowsers = [                 
   'ie >= 9',
   'ie_mob >= 10',
   'ff >= 25',
@@ -21,24 +23,22 @@ var autoprefixerBrowsers = [
   'bb >= 10'
 ];
 
-gulp.task('scripts', function() {
+const scriptsTask = function() {
   return gulp.src(webpackConfig.entry)
-    .pipe($.webpack(webpackConfig))
+    .pipe(webpack(webpackConfig))
     .pipe($.size({ title : 'js' }))
     .pipe(gulp.dest(dist + 'js/'))
-    .pipe($.connect.reload());
-});
+    .pipe(reload({ stream:true }));
+};
 
-// copy html from app to dist
-gulp.task('html', function() {
+const htmlTask = function() {
   return gulp.src(app + 'index.html')
     .pipe(gulp.dest(dist))
     .pipe($.size({ title : 'html' }))
-    .pipe($.connect.reload());
-});
-
-gulp.task('styles',function(cb) {
+    .pipe(reload({ stream:true }));
+};
 
+const stylusTask = function() {
   // convert stylus to css
   return gulp.src(app + 'stylus/main.styl')
     .pipe($.stylus({
@@ -50,43 +50,50 @@ gulp.task('styles',function(cb) {
     .pipe($.autoprefixer({browsers: autoprefixerBrowsers}))
     .pipe(gulp.dest(dist + 'css/'))
     .pipe($.size({ title : 'css' }))
-    .pipe($.connect.reload());
-});
+    .pipe(reload({ stream:true }));
+};
 
-// add livereload on the given port
-gulp.task('serve', function() {
-  $.connect.server({
-    root: dist,
-    port: port,
-    livereload: {
-      port: 35729
+const serveTask = function() {
+  browserSync({
+    server: {
+      baseDir: dist
     }
   });
-});
+};
 
-// copy images
-gulp.task('images', function(cb) {
+const imagesTask = function(){
   return gulp.src(app + 'images/**/*.{png,jpg,jpeg,gif,svg}')
     .pipe($.size({ title : 'images' }))
-    .pipe(gulp.dest(dist + 'images/'));
-});
+    .pipe(gulp.dest(dist + 'images/')); 
+};
 
-// watch styl, html and js file changes
-gulp.task('watch', function() {
+const watchTask = function(){
   gulp.watch(app + 'stylus/*.styl', ['styles']);
   gulp.watch(app + 'index.html', ['html']);
   gulp.watch(app + 'scripts/**/*.js', ['scripts']);
-});
+};
+
+gulp.task('scripts', scriptsTask);
+gulp.task('html', htmlTask);
+gulp.task('styles', stylusTask);
+gulp.task('serve', serveTask);
+gulp.task('images', imagesTask);
+gulp.task('watch', watchTask);
 
 // remove bundels
 gulp.task('clean', function(cb) {
-  del([dist], cb);
+  return del([dist], cb);
 });
 
 // by default build project and then watch files in order to trigger livereload
 gulp.task('default', ['build', 'serve', 'watch']);
 
 // waits until clean is finished then builds the project
 gulp.task('build', ['clean'], function(){
-  gulp.start(['images','html','scripts','styles']);
+  imagesTask();
+  htmlTask();
+  scriptsTask();
+  stylusTask();
+
+  return true;
 });

package.json

@@ -9,22 +9,27 @@
   "author": "@moklick <mo@webkid.io>",
   "license": "MIT",
   "devDependencies": {
-    "del": "^0.1.3",
-    "eslint": "^1.8.0",
+    "babel-core": "^6.5.2",
+    "babel-eslint": "^5.0.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.5.0",
+    "browser-sync": "^2.11.1",
+    "del": "^2.2.0",
+    "eslint": "^2.2.0",
     "eslint-loader": "^1.1.1",
     "gulp": "^3.8.8",
-    "gulp-autoprefixer": "^2.1.0",
+    "gulp-autoprefixer": "^3.1.0",
     "gulp-concat": "^2.4.1",
-    "gulp-connect": "^2.0.6",
-    "gulp-livereload": "^2.1.1",
-    "gulp-load-plugins": "^0.7.0",
-    "gulp-size": "^1.1.0",
-    "gulp-stylus": "^1.3.3",
+    "gulp-livereload": "^3.8.1",
+    "gulp-load-plugins": "^1.2.0",
+    "gulp-size": "^2.0.0",
+    "gulp-stylus": "^2.3.0",
     "gulp-util": "^3.0.1",
-    "gulp-watch": "^1.0.7",
-    "gulp-webpack": "^0.4.1",
-    "lodash.assign": "^3.2.0",
+    "gulp-watch": "^4.3.5",
+    "gulp-webpack": "^1.5.0",
+    "lodash.assign": "^4.0.4",
     "merge": "^1.2.0",
-    "webpack": "^1.12.2"
+    "webpack": "^1.12.14",
+    "webpack-stream": "^3.1.0"
   }
 }

webpack.config.js

@@ -10,7 +10,15 @@ var configDefault = {
   module: {
     preLoaders: [
       {test: /\.js$/, loader: 'eslint-loader', exclude: /node_modules/}
-    ]
+    ],
+    loaders: [{
+      test: /\.js$/,
+      exclude: /(node_modules)/,
+      loader: 'babel',
+      query: {
+        presets: ['es2015']
+      }
+    }]
   },
   debug: true
 };