Adds webpack for the js

gulp/config.js

@@ -1,9 +1,11 @@
 'use strict';
 var argv = require('yargs').argv;
+var path = require('path');
 
 module.exports = function () {
 
   var basePaths = {
+    root:    path.join(__dirname, '..'),
     src:     'src/',
     content: 'content/',
     assets:  'assets/',
@@ -83,8 +85,6 @@ module.exports = function () {
     }
   };
 
-
-
   return {
     basePaths:    basePaths,
     languages:    languages,

gulp/tasks/scripts.js

@@ -1,14 +1,45 @@
 'use strict';
-var stream        = require('../utils/browserSync').stream;
+var stream  = require('../utils/browserSync').stream;
+var webpack = require('webpack');
+var gulpWebpack = require('webpack-stream');
+var glob = require('glob');
 
 module.exports = function (gulp, $, config) {
-  var srcFiles   = config.appFiles.scripts;
+  var tasksHelper  = require('../utils/tasksHelpers')(gulp, config);
+  var scriptsFiles = config.appFiles.scripts;
+  var srcFiles = glob.sync(scriptsFiles);
   var destPath   = config.paths.scripts.dest;
+  var skeletonRoot = config.basePaths.root;
+  var srcRoot = config.basePaths.src;
 
   var task = function () {
-    return gulp.src(srcFiles)
+    return gulp.src(scriptsFiles)
       .pipe($.eslint({envs: ['browser']}))
       .pipe($.eslint.format())
+      .pipe(gulpWebpack({
+        debug: true, //TODO improve this one we have env depending builds
+        entry: {
+          main: srcFiles,
+          // Add modules you want to load from vendors here so they are put in a seperate file
+          vendor: ['jquery']
+        },
+        output: {
+          filename: 'main.js'
+        },
+        loaders: [
+          { test: /\.js$/, loader: 'babel?presets[]=es2015', exclude: /node_modules/}
+        ],
+        resolve: {
+          // Makes sure the paths are relative to the root and not this file
+          root: skeletonRoot,
+          // Makes sure the compiler looks for modules in /src and node_modules
+          modulesDirectories: [srcRoot, 'node_modules']
+        },
+        plugins: [
+          // Makes sure the vendors are only imported once in this seperate file
+          new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.min.js')
+        ]
+      }))
       .pipe(gulp.dest(destPath))
       .pipe(stream());
   };

package.json

@@ -14,6 +14,9 @@
     "sensible": "0.5.4"
   },
   "devDependencies": {
+    "babel-core": "^6.2.1",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015": "^6.1.18",
     "browser-sync": "^2.6.5",
     "del": "^1.1.1",
     "gulp": "git://github.com/gulpjs/gulp.git#4.0",
@@ -43,6 +46,8 @@
     "merge-stream": "^0.1.7",
     "rsyncwrapper": "^0.4.2",
     "run-sequence": "^1.1.0",
+    "webpack": "^1.12.8",
+    "webpack-stream": "^2.1.1",
     "yamljs": "^0.2.1",
     "yargs": "^3.9.1"
   }

src/layouts/default.jade

@@ -17,6 +17,7 @@ html(lang=language)
   body
     block body
 
+    script(src='#{relativePath}/js/vendor.min.js')
     script(src='#{relativePath}/js/main.js')
 
 

src/scripts/main.js

@@ -1,5 +1,13 @@
 'use strict';
+
+// This is how you require your component script:
+require('elements/header/script');
+
+// This is how you require a component from node_modules
+// Make sure to add it to the vendors in /gulp/tasks/scripts
+var $ = require('jquery');
+
 var document, window;
 (function(){
   // TODO: add your JS here
-}(document, window));
+}(document, window, $));