Webpack config is now production-ready.

gulpfile.js

@@ -23,7 +23,8 @@ var gulp = require("gulp"),
     header = require("gulp-header"),
     webpack = require("webpack"),
     WebpackDevServer = require("webpack-dev-server"),
-    webpackConfig = require("./webpack.config.js"),
+    webpackDevConfig = require("./webpack.dev.config.js"),
+    webpackProductionConfig = require("./webpack.production.config.js"),
     webpackStream = require('webpack-stream');
 
 var plumberOptions = {
@@ -53,85 +54,30 @@ var licenseHeader = [
 ].join('\n');
 
 
-
-//gulp.task('webpack', [], function () {
-//    return gulp.src(path.ALL) // gulp looks for all source files under specified path
-//        .pipe(sourcemaps.init()) // creates a source map which would be very helpful for debugging by maintaining the actual source code structure
-//        .pipe(webpackStream(webpackConfig)) // blend in the webpack config into the source files
-//        .pipe(uglify())// minifies the code for better compression
-//        .pipe(sourcemaps.write())
-//        .pipe(gulp.dest(path.DEST_BUILD));
-//});
+gulp.task("webpack-build", function() {
+    return gulp.src(webpackProductionConfig.entry)
+        .pipe(webpackStream(webpackProductionConfig))
+        .pipe(header(licenseHeader))
+        .pipe(gulp.dest('public'));
+});
 
 
-gulp.task("webpack-dev-server", function (callback) {
-    // Start a webpack-dev-server
-    //webpackConfig.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");
-    var compiler = webpack(webpackConfig);
+gulp.task("webpack-dev-server", function () {
+    // Starts a webpack-dev-server
+    var compiler = webpack(webpackDevConfig);
 
     new WebpackDevServer(compiler, {
-        // server and middleware options
-    }).listen(8080, "localhost", function (err) {
-        if (err) throw new gutil.PluginError("webpack-dev-server", err);
+        // server and middleware options, currently blank
+    }).listen(61999, "localhost", function (err) {
+        if (err)
+            throw new gutil.PluginError("webpack-dev-server", err);
+
         // Server listening
-        gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
-
-        // keep the server alive or continue?
-        // callback();
+        gutil.log("[webpack-dev-server]", "http://localhost:61999/webpack-dev-server/index.html");
     });
 });
 
 
-// ============================
-
-gulp.task("scripts-app", function () {
-    var paths = [
-        "resources/assets/scripts/app/**/*.{coffee,js}",
-        "resources/assets/scripts/base/**/*.{coffee,js}",
-        "resources/assets/scripts/shared/**/*.{coffee,js}"
-    ];
-
-    if (!argv.production) {
-        // we also want to add the embed stuff, since we're in development mode
-        // we want to watch embed files and re-compile them. However, we want
-        // to leave this path out in production so that embed files are not bloating
-        // the js file
-        paths.push("resources/assets/scripts/embed/**/*.{coffee,js}");
-    }
-
-    return argv.production
-        // Production pipeline
-        ? gulp.src(paths, {base: "resources/assets/scripts"})
-        .pipe(plug.plumber(plumberOptions))
-        .pipe(plug.order([
-            "resources/assets/scripts/base/jquery-2.0.2.js",
-            "resources/assets/scripts/base/angular.js",
-            "resources/assets/scripts/base/*.{coffee,js}",
-            "resources/assets/scripts/shared/*.{coffee,js}",
-            "resources/assets/scripts/app/*.{coffee,js}",
-            "resources/assets/scripts/app/services/*.{coffee,js}",
-            "resources/assets/scripts/app/filters/*.{coffee,js}",
-            "resources/assets/scripts/app/directives/*.{coffee,js}",
-            "resources/assets/scripts/app/controllers/*.{coffee,js}",
-            "resources/assets/scripts/**/*.{coffee,js}"
-        ], {base: "."}))
-        .pipe(plug.if(/\.coffee/, plug.coffee()))
-        .pipe(plug.concat("app.js"))
-        .pipe(plug.uglify())
-        .pipe(header(licenseHeader))
-        .pipe(gulp.dest("public/build/scripts"))
-
-        // Development/watch pipeline
-        : gulp.src(paths, {base: "resources/assets/scripts"})
-        .pipe(plug.plumber(plumberOptions))
-        .pipe(plug.cached('scripts'))
-        .pipe(plug.sourcemaps.init())
-        .pipe(plug.if(/\.coffee/, plug.coffee()))
-        .pipe(header(licenseHeader))
-        .pipe(plug.sourcemaps.write())
-        .pipe(gulp.dest("public/build/scripts"));
-});
-
 gulp.task("scripts-embed", function () {
     // note that this task should really only ever be invoked for production
     // since development-mode watches and builds include the embed scripts
@@ -245,23 +191,18 @@ gulp.task('copy:templates', function () {
 });
 
 gulp.task('build', [
-    'scripts-app',
+    'webpack-build',
+    'copy:templates',
     'styles-app',
     'scripts-embed',
     'styles-embed'
 ]);
 
-gulp.task("watch", ["build"], function () {
-    plug.livereload.listen();
-    gulp.watch("resources/assets/scripts/**/*.{coffee,js}", ["scripts-app"]);
+gulp.task("watch-legacy", ["build"], function () {
     gulp.watch("resources/assets/styles/**/*.{css,less}", ["styles-app"]);
 });
 
-
-gulp.task('watch-webpack', function () {
-    gulp.watch(path.ALL, ['webpack']);
-    gulp.run('webpack-dev-server');
-});
+gulp.task("watch", ["webpack-dev-server", "watch-legacy"], function () {});
 
 
 function endsWith(str, suffix) {

package.json

@@ -33,6 +33,7 @@
     "jquery": "^2.2.0",
     "jquery-ui": "^1.10.5",
     "script-loader": "^0.6.1",
+    "underscore": "^1.8.3",
     "webpack": "^1.12.13",
     "webpack-dev-server": "^1.14.1",
     "webpack-stream": "^3.1.0",

resources/assets/scripts/app/app.coffee

@@ -15,6 +15,17 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
+# Some notes on what's going on here:
+#
+# - Webpack resolves all of these require statements.
+#
+# - jQuery is loaded before Angular so it replaces jqLite.
+#
+# - "script!" is used with dependencies that expect to interact with the global state.
+#
+# - The "ponyfm" module in this file must be initialized before the controllers
+#   and other Angular modules are brought in; they expect the "ponyfm" module to exist.
+
 require 'script!../base/jquery-2.0.2'
 require 'script!../base/jquery-ui'
 angular = require 'angular'
@@ -45,57 +56,14 @@ require 'script!../shared/underscore-extensions'
 ponyfm = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'angularytics', 'ngSanitize', 'hc.marked']
 window.pfm.preloaders = {}
 
-##require './controllers/'+name+'.coffee'
-#require "./controllers/account-albums-edit"
-#require "./controllers/account-albums"
-#require "./controllers/account-image-select"
-#require "./controllers/account-playlists"
-#require "./controllers/account-settings"
-#require "./controllers/account-track"
-#require "./controllers/account-tracks"
-#require "./controllers/admin-genres"
-#require "./controllers/album"
-#require "./controllers/albums-list"
-#require "./controllers/albums"
-#require "./controllers/application"
-#require "./controllers/artist-content"
-#require "./controllers/artist-favourites"
-#require "./controllers/artist-profile"
-#require "./controllers/artist"
-#require "./controllers/artists-list"
-#require "./controllers/artists"
-#require "./controllers/credits"
-#require "./controllers/dashboard"
-#require "./controllers/favourites-albums"
-#require "./controllers/favourites-playlists"
-#require "./controllers/favourites-tracks"
-#require "./controllers/home"
-#require "./controllers/login"
-#require "./controllers/playlist-form"
-#require "./controllers/playlist"
-#require "./controllers/playlists-list"
-#require "./controllers/playlists"
-#require "./controllers/sidebar"
-#require "./controllers/track-edit"
-#require "./controllers/track-show"
-#require "./controllers/track"
-#require "./controllers/tracks-list"
-#require "./controllers/tracks"
-#require "./controllers/uploader"
-
-
-requireAll = (r) ->
+# Inspired by: https://stackoverflow.com/a/30652110/3225811
+requireDirectory = (r) ->
     r.keys().forEach(r)
 
-requireAll(require.context('./controllers/', false, /\.coffee$/));
-requireAll(require.context('./directives/', false, /\.coffee$/));
-requireAll(require.context('./filters/', false, /\.coffee$/));
-requireAll(require.context('./services/', false, /\.coffee$/));
-
-#require './directives/'+name
-#require './filters/'+name
-#require './services/'+name
-
+requireDirectory(require.context('./controllers/', false, /\.coffee$/));
+requireDirectory(require.context('./directives/', false, /\.coffee$/));
+requireDirectory(require.context('./filters/', false, /\.coffee$/));
+requireDirectory(require.context('./services/', false, /\.coffee$/));
 
 
 if window.pfm.environment == 'production'

resources/views/shared/_app_layout.blade.php

@@ -158,11 +158,9 @@
         </script>
     @endif
 
-{{--    {!! Assets::scriptIncludes() !!}--}}
-
     @if (Config::get("app.debug"))
-        <script src="http://localhost:8080/build/scripts/app.js"></script>
-        <script src="http://localhost:8080/webpack-dev-server.js"></script>
+        <script src="http://localhost:61999/build/scripts/app.js"></script>
+        <script src="http://localhost:61999/webpack-dev-server.js"></script>
     @else
         <script src="/build/scripts/app.js"></script>
         <script src="/build/scripts/templates.js"></script>

webpack.base.config.js

@@ -1,11 +1,14 @@
 var path = require('path');
 var webpack = require('webpack');
 
+// NOTE: This is a base config; it's not meant to be used directly!
+
 module.exports = {
     module: {
         loaders: [
             {test: /\.coffee$/, loader: "coffee"}
-        ]
+        ],
+        noParse: [/pfm-angular-marked\.js/]
     },
     plugins: [
         new webpack.ProvidePlugin({
@@ -16,12 +19,9 @@ module.exports = {
     entry: './resources/assets/scripts/app/app.coffee',
     output: {
         path: __dirname + '/public',
-        filename: './build/scripts/app.js',
-        publicPath: 'http://localhost:8080/build/'
+        filename: './build/scripts/app.js'
+        // publicPath should be defined in the dev config!
     },
-    //watch: true,
-    //watchDelay: 100,
-    devtool: 'source-map',
     resolve: {
         extensions: ["", ".webpack.js", ".web.js", ".js", ".coffee"]
     }

webpack.dev.config.js

@@ -0,0 +1,12 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('underscore');
+
+var webpackBaseConfig = require('./webpack.base.config.js');
+var config = _.clone(webpackBaseConfig);
+
+config.devtool = 'source-map';
+config.output.publicPath = 'http://localhost:61999/build/';
+
+
+module.exports = config;

webpack.production.config.js

@@ -0,0 +1,19 @@
+var path = require('path');
+var webpack = require('webpack');
+var _ = require('underscore');
+
+var webpackBaseConfig = require('./webpack.base.config.js');
+var config = _.clone(webpackBaseConfig);
+
+config.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+        compress: {
+            warnings: false
+        }
+    })
+);
+
+//config.output.publicPath = 'https://pony.fm/build/';
+
+
+module.exports = config;