Functioning Webpack configuration in dev.

gulpfile.js

@@ -17,9 +17,14 @@
  */
 
 var gulp = require("gulp"),
+    gutil = require("gulp-util"),
     plug = require("gulp-load-plugins")(),
     argv = require("yargs").argv,
-    header = require("gulp-header");
+    header = require("gulp-header"),
+    webpack = require("webpack"),
+    WebpackDevServer = require("webpack-dev-server"),
+    webpackConfig = require("./webpack.config.js"),
+    webpackStream = require('webpack-stream');
 
 var plumberOptions = {
     errorHandler: plug.notify.onError("Error: <%= error.message %>")
@@ -47,6 +52,38 @@ 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-dev-server", function (callback) {
+    // Start a webpack-dev-server
+    //webpackConfig.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");
+    var compiler = webpack(webpackConfig);
+
+    new WebpackDevServer(compiler, {
+        // server and middleware options
+    }).listen(8080, "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();
+    });
+});
+
+
+// ============================
+
 gulp.task("scripts-app", function () {
     var paths = [
         "resources/assets/scripts/app/**/*.{coffee,js}",
@@ -220,6 +257,13 @@ gulp.task("watch", ["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');
+});
+
+
 function endsWith(str, suffix) {
     return str.indexOf(suffix, str.length - suffix.length) !== -1;
 }

package.json

@@ -1,22 +1,23 @@
 {
   "name": "pony.fm",
   "version": "1.0.0",
-  "license": "AGPL",
+  "license": "AGPL-3.0",
   "repository": {
     "type": "git",
     "url": "ssh://git@phabricator.poniverse.net/diffusion/PF/pony-fm.git"
   },
   "packages": {},
-  "dependencies": {
+  "dependencies": {},
-    "gulp-header": "^1.7.1"
-  },
   "devDependencies": {
+    "angular": "^1.5.0",
+    "coffee-loader": "^0.7.2",
     "gulp": "^3.9.0",
     "gulp-angular-templatecache": "^1.6.0",
     "gulp-autoprefixer": "^2.2.0",
     "gulp-cached": "^1.0.4",
     "gulp-coffee": "^2.3.1",
     "gulp-concat": "^2.5.2",
+    "gulp-header": "^1.7.1",
     "gulp-if": "^1.2.5",
     "gulp-less": "^3.0.3",
     "gulp-livereload": "^3.8.0",
@@ -27,7 +28,14 @@
     "gulp-plumber": "^1.0.0",
     "gulp-sourcemaps": "^1.5.1",
     "gulp-uglify": "^1.2.0",
-    "gulp-util": "^3.0.4",
+    "gulp-util": "^3.0.7",
+    "gulp-webpack": "^1.5.0",
+    "jquery": "^2.2.0",
+    "jquery-ui": "^1.10.5",
+    "script-loader": "^0.6.1",
+    "webpack": "^1.12.13",
+    "webpack-dev-server": "^1.14.1",
+    "webpack-stream": "^3.1.0",
     "yargs": "^3.7.2"
   }
 }

resources/assets/scripts/app/app.coffee

@@ -14,25 +14,105 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
+
+require 'script!../base/jquery-2.0.2'
+require 'script!../base/jquery-ui'
+angular = require 'angular'
+
+require 'script!../base/angular-ui-date'
+require '../base/angular-ui-router'
+require '../base/angular-ui-sortable'
+require '../base/angularytics'
+require '../base/jquery.colorbox'
+require '../base/jquery.cookie'
+require '../base/jquery.timeago'
+require '../base/jquery.viewport'
+require 'script!../base/marked'
+require 'script!../base/moment'
+require '../base/soundmanager2-nodebug'
+require 'script!../base/tumblr'
+require '../base/ui-bootstrap-tpls-0.4.0'
+require 'script!../base/underscore'
+
+require '../shared/init.coffee'
+require '../shared/jquery-extensions'
+require '../shared/layout.coffee'
+require '../shared/pfm-angular-marked'
+require '../shared/pfm-angular-sanitize'
+require 'script!../shared/underscore-extensions'
+
+
+ponyfm = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'angularytics', 'ngSanitize', 'hc.marked']
 window.pfm.preloaders = {}
 
-module = angular.module 'ponyfm', ['ui.bootstrap', 'ui.state', 'ui.date', 'ui.sortable', 'angularytics', 'ngSanitize', 'hc.marked']
+##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) ->
+    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
+
+
 
 if window.pfm.environment == 'production'
-    module.run [
+    ponyfm.run [
         'Angularytics',
         (analytics) ->
             analytics.init()
     ]
 
-module.run [
+ponyfm.run [
     '$rootScope',
     ($rootScope) ->
         $rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) ->
             $rootScope.description = ''
 ]
 
-module.config [
+ponyfm.config [
     '$locationProvider', '$stateProvider', '$dialogProvider', 'AngularyticsProvider', '$httpProvider', '$sceDelegateProvider', 'markedProvider'
     (location, state, $dialogProvider, analytics, $httpProvider, $sceDelegateProvider, markedProvider) ->
 
@@ -330,3 +410,5 @@ module.config [
             backdropClick: false
 
 ]
+
+module.exports = ponyfm

resources/assets/scripts/app/controllers/account-albums-edit.coffee

@@ -24,7 +24,7 @@ window.pfm.preloaders['account-albums-edit'] = [
         $.when.all defs
 ]
 
-angular.module('ponyfm').controller "account-albums-edit", [
+module.exports = angular.module('ponyfm').controller "account-albums-edit", [
     '$scope', '$state', '$dialog', 'account-albums'
     ($scope, $state, $dialog, albums) ->
         $scope.isNew = $state.params.album_id == undefined

resources/assets/scripts/app/controllers/account-albums.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['account-albums'] = [
         $.when.all [tracks.refresh('published=true&in_album=false', true), albums.refresh(true)]
 ]
 
-angular.module('ponyfm').controller "account-albums", [
+module.exports = angular.module('ponyfm').controller "account-albums", [
     '$scope', '$state', 'account-albums', 'account-tracks'
     ($scope, $state, albums, tracks) ->
 

resources/assets/scripts/app/controllers/account-image-select.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "account-image-select", [
+module.exports = angular.module('ponyfm').controller "account-image-select", [
     '$scope'
     ($scope) ->
         $scope.images = []

resources/assets/scripts/app/controllers/account-playlists.coffee

@@ -19,7 +19,7 @@ window.pfm.preloaders['account-playlists'] = [
     (playlists) -> playlists.refreshOwned true
 ]
 
-angular.module('ponyfm').controller "account-playlists", [
+module.exports = angular.module('ponyfm').controller "account-playlists", [
     '$scope', 'auth', '$dialog', 'playlists'
     ($scope, auth, $dialog, playlists) ->
         $scope.playlists = []

resources/assets/scripts/app/controllers/account-settings.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "account-settings", [
+module.exports = angular.module('ponyfm').controller "account-settings", [
     '$scope', 'auth'
     ($scope, auth) ->
         $scope.settings = {}

resources/assets/scripts/app/controllers/account-track.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "account-track", [
+module.exports = angular.module('ponyfm').controller "account-track", [
     '$scope', '$state'
     ($scope, $state) ->
         # All the fun stuff happens in the pfmTrackEditor directive.

resources/assets/scripts/app/controllers/account-tracks.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['account-tracks'] = [
         $.when.all [tracks.refresh(null, true), albums.refresh(true), taxonomies.refresh()]
 ]
 
-angular.module('ponyfm').controller "account-tracks", [
+module.exports = angular.module('ponyfm').controller "account-tracks", [
     '$scope', '$state', 'taxonomies', '$dialog', 'lightbox', 'account-albums', 'account-tracks'
     ($scope, $state, taxonomies, $dialog, lightbox, albums, tracks) ->
         $scope.data =

resources/assets/scripts/app/controllers/admin-genres.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller 'admin-genres', [
+module.exports = angular.module('ponyfm').controller 'admin-genres', [
     '$scope', '$state', 'admin-genres'
     ($scope, $state, genres) ->
 

resources/assets/scripts/app/controllers/album.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['album'] = [
         $.when.all [albums.fetch $state.params.id, playlists.refreshOwned(true)]
 ]
 
-angular.module('ponyfm').controller "album", [
+module.exports = angular.module('ponyfm').controller "album", [
     '$scope', '$rootScope', 'albums', '$state', 'playlists', 'auth', '$dialog', 'download-cached', '$window', '$timeout'
     ($scope, $rootScope, albums, $state, playlists, auth, $dialog, cachedAlbum, $window, $timeout) ->
         album = null

resources/assets/scripts/app/controllers/albums-list.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['albums-list'] = [
         albums.fetchList($state.params.page, true)
 ]
 
-angular.module('ponyfm').controller "albums-list", [
+module.exports = angular.module('ponyfm').controller "albums-list", [
     '$scope', 'albums', '$state'
     ($scope, albums, $state) ->
         albums.fetchList($state.params.page).done (list) ->

resources/assets/scripts/app/controllers/albums.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "albums", [
+module.exports = angular.module('ponyfm').controller "albums", [
     '$scope', 'albums', '$state'
     ($scope, albums, $state) ->
 

resources/assets/scripts/app/controllers/application.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "application", [
+module.exports = angular.module('ponyfm').controller "application", [
     '$scope', 'auth', '$location', 'upload', '$state', '$stateParams', '$injector', '$rootScope', 'playlists'
     ($scope, auth, $location, upload, $state, $stateParams, $injector, $rootScope, playlists) ->
         $scope.auth = auth.data

resources/assets/scripts/app/controllers/artist-content.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['artist-content'] = [
         $.when.all [artists.fetch($state.params.slug), artists.fetchContent($state.params.slug, true)]
 ]
 
-angular.module('ponyfm').controller "artist-content", [
+module.exports = angular.module('ponyfm').controller "artist-content", [
     '$scope', 'artists', '$state'
     ($scope, artists, $state) ->
         artists.fetchContent($state.params.slug)

resources/assets/scripts/app/controllers/artist-favourites.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['artist-favourites'] = [
         $.when.all [artists.fetch($state.params.slug), artists.fetchFavourites($state.params.slug, true)]
 ]
 
-angular.module('ponyfm').controller "artist-favourites", [
+module.exports = angular.module('ponyfm').controller "artist-favourites", [
     '$scope', 'artists', '$state'
     ($scope, artists, $state) ->
         artists.fetchFavourites($state.params.slug).done (artistResponse) ->

resources/assets/scripts/app/controllers/artist-profile.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['artist-profile'] = [
         artists.fetch $state.params.slug, true
 ]
 
-angular.module('ponyfm').controller "artist-profile", [
+module.exports = angular.module('ponyfm').controller "artist-profile", [
     '$scope', 'artists', '$state'
     ($scope, artists, $state) ->
 ]

resources/assets/scripts/app/controllers/artist.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['artist'] = [
         artists.fetch $state.params.slug, true
 ]
 
-angular.module('ponyfm').controller "artist", [
+module.exports = angular.module('ponyfm').controller "artist", [
     '$scope', 'artists', '$state', 'follow'
     ($scope, artists, $state, follow) ->
         artists.fetch($state.params.slug)

resources/assets/scripts/app/controllers/artists-list.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['artists-list'] = [
         artists.fetchList($state.params.page, true)
 ]
 
-angular.module('ponyfm').controller "artists-list", [
+module.exports = angular.module('ponyfm').controller "artists-list", [
     '$scope', 'artists', '$state'
     ($scope, artists, $state) ->
         artists.fetchList($state.params.page).done (list) ->

resources/assets/scripts/app/controllers/artists.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "artists", [
+module.exports = angular.module('ponyfm').controller "artists", [
     '$scope', 'artists', '$state'
     ($scope, artists, $state) ->
 

resources/assets/scripts/app/controllers/credits.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "credits", [
+module.exports = angular.module('ponyfm').controller "credits", [
     '$scope', 'dialog',
     ($scope, dialog) ->
         $scope.close = () -> dialog.close(null)

resources/assets/scripts/app/controllers/dashboard.coffee

@@ -19,7 +19,7 @@ window.pfm.preloaders['dashboard'] = [
     (dashboard) -> dashboard.refresh(true)
 ]
 
-angular.module('ponyfm').controller "dashboard", [
+module.exports = angular.module('ponyfm').controller "dashboard", [
     '$scope', 'dashboard', 'auth', '$http'
     ($scope, dashboard, auth, $http) ->
         $scope.recentTracks = null

resources/assets/scripts/app/controllers/favourites-albums.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['favourites-albums'] = [
         favourites.fetchAlbums(true)
 ]
 
-angular.module('ponyfm').controller "favourites-albums", [
+module.exports = angular.module('ponyfm').controller "favourites-albums", [
     '$scope', 'favourites'
     ($scope, favourites) ->
         favourites.fetchAlbums().done (res) ->

resources/assets/scripts/app/controllers/favourites-playlists.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['favourites-playlists'] = [
         favourites.fetchPlaylists(true)
 ]
 
-angular.module('ponyfm').controller "favourites-playlists", [
+module.exports = angular.module('ponyfm').controller "favourites-playlists", [
     '$scope', 'favourites'
     ($scope, favourites) ->
         favourites.fetchPlaylists().done (res) ->

resources/assets/scripts/app/controllers/favourites-tracks.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['favourites-tracks'] = [
         favourites.fetchTracks(true)
 ]
 
-angular.module('ponyfm').controller "favourites-tracks", [
+module.exports = angular.module('ponyfm').controller "favourites-tracks", [
     '$scope', 'favourites'
     ($scope, favourites) ->
         favourites.fetchTracks().done (res) ->

resources/assets/scripts/app/controllers/home.coffee

@@ -19,7 +19,7 @@ window.pfm.preloaders['home'] = [
     (dashboard) -> dashboard.refresh(true)
 ]
 
-angular.module('ponyfm').controller "home", [
+module.exports = angular.module('ponyfm').controller "home", [
     '$scope', 'dashboard'
     ($scope, dashboard) ->
         $scope.recentTracks = null

resources/assets/scripts/app/controllers/login.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "login", [
+module.exports = angular.module('ponyfm').controller "login", [
     '$scope', 'auth'
     ($scope, auth) ->
 

resources/assets/scripts/app/controllers/playlist-form.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "playlist-form", [
+module.exports = angular.module('ponyfm').controller "playlist-form", [
     '$scope', 'dialog', 'playlists', 'playlist'
     ($scope, dialog, playlists, playlist) ->
         $scope.isLoading = false

resources/assets/scripts/app/controllers/playlist.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['playlist'] = [
         playlists.fetch $state.params.id, true
 ]
 
-angular.module('ponyfm').controller 'playlist', [
+module.exports = angular.module('ponyfm').controller 'playlist', [
     '$scope', '$rootScope', '$state', 'playlists', '$dialog', 'download-cached', '$window', '$timeout'
     ($scope, $rootScope, $state, playlists, $dialog, cachedPlaylist, $window, $timeout) ->
         playlist = null

resources/assets/scripts/app/controllers/playlists-list.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['playlists-list'] = [
         playlists.fetchList($state.params.page, true)
 ]
 
-angular.module('ponyfm').controller "playlists-list", [
+module.exports = angular.module('ponyfm').controller "playlists-list", [
     '$scope', 'playlists', '$state',
     ($scope, playlists, $state) ->
         playlists.fetchList($state.params.page).done (searchResults) ->

resources/assets/scripts/app/controllers/playlists.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "playlists", [
+module.exports = angular.module('ponyfm').controller "playlists", [
     '$scope', 'playlists', '$state'
     ($scope, playlists, $state) ->
 

resources/assets/scripts/app/controllers/sidebar.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "sidebar", [
+module.exports = angular.module('ponyfm').controller "sidebar", [
     '$scope', '$dialog', 'playlists'
     ($scope, $dialog, playlists) ->
         $scope.playlists = playlists.pinnedPlaylists

resources/assets/scripts/app/controllers/track-edit.coffee

@@ -15,7 +15,7 @@
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 
-angular.module('ponyfm').controller "track-edit", [
+module.exports = angular.module('ponyfm').controller "track-edit", [
     '$scope', '$state'
     ($scope, $state) ->
         # All the fun stuff happens in the pfmTrackEditor directive.

resources/assets/scripts/app/controllers/track-show.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['track-show'] = [
     $.when.all [tracks.fetch $state.params.id, playlists.refreshOwned(true)]
 ]
 
-angular.module('ponyfm').controller "track-show", [
+module.exports = angular.module('ponyfm').controller "track-show", [
   '$scope', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$dialog'
   ($scope, tracks, $state, playlists, auth, favourites, $dialog) ->
 ]

resources/assets/scripts/app/controllers/track.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "track", [
+module.exports = angular.module('ponyfm').controller "track", [
     '$scope', '$rootScope', 'tracks', '$state', 'playlists', 'auth', 'favourites', '$dialog', 'download-cached', '$window', '$timeout'
     ($scope, $rootScope, tracks, $state, playlists, auth, favourites, $dialog, cachedTrack, $window, $timeout) ->
         $scope.track

resources/assets/scripts/app/controllers/tracks-list.coffee

@@ -25,7 +25,7 @@ window.pfm.preloaders['tracks-list'] = [
         )
 ]
 
-angular.module('ponyfm').controller "tracks-list", [
+module.exports = angular.module('ponyfm').controller "tracks-list", [
     '$scope', 'tracks', '$state',
     ($scope, tracks, $state) ->
         tracks.mainQuery.fetch().done (searchResults) ->

resources/assets/scripts/app/controllers/tracks.coffee

@@ -20,7 +20,7 @@ window.pfm.preloaders['tracks'] = [
         tracks.loadFilters()
 ]
 
-angular.module('ponyfm').controller "tracks", [
+module.exports = angular.module('ponyfm').controller "tracks", [
     '$scope', 'tracks', '$state', 'focus'
     ($scope, tracks, $state, focus) ->
         $scope.recentTracks = null

resources/assets/scripts/app/controllers/uploader.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').controller "uploader", [
+module.exports = angular.module('ponyfm').controller "uploader", [
     '$scope', 'auth', 'upload', '$state'
     ($scope, auth, upload, $state) ->
         $scope.data = upload

resources/assets/scripts/app/directives/albums-list.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmAlbumsList', () ->
+module.exports = angular.module('ponyfm').directive 'pfmAlbumsList', () ->
     restrict: 'E'
     replace: true
     templateUrl: '/templates/directives/albums-list.html'

resources/assets/scripts/app/directives/colorbox.coffee

@@ -16,7 +16,7 @@
 
 # Based on http://stackoverflow.com/questions/14641791/how-to-use-colorbox-with-angular-js
 
-angular.module('ponyfm').directive 'colorbox', ->
+module.exports = angular.module('ponyfm').directive 'colorbox', ->
     restrict: 'AC'
     link: (scope, element, attrs) ->
       $(element).colorbox({maxWidth:'90%', maxHeight:'90%'})

resources/assets/scripts/app/directives/comments.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmComments', () ->
+module.exports = angular.module('ponyfm').directive 'pfmComments', () ->
     restrict: 'E'
     templateUrl: '/templates/directives/comments.html'
     scope:

resources/assets/scripts/app/directives/eat-click.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmEatClick', () ->
+module.exports = angular.module('ponyfm').directive 'pfmEatClick', () ->
     (scope, element) ->
         $(element).click (e) ->
             e.preventDefault()

resources/assets/scripts/app/directives/favouriteButton.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmFavouriteButton', () ->
+module.exports = angular.module('ponyfm').directive 'pfmFavouriteButton', () ->
     restrict: 'E'
     templateUrl: '/templates/directives/favourite-button.html'
     scope:

resources/assets/scripts/app/directives/image-upload.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmImageUpload', () ->
+module.exports = angular.module('ponyfm').directive 'pfmImageUpload', () ->
     $image = null
     $uploader = null
 

resources/assets/scripts/app/directives/on-enter.coffee

@@ -17,7 +17,7 @@
 
 # This directive calls the given function when Enter is pressed in a
 # standalone input field.
-angular.module('ponyfm').directive 'pfmOnEnter', () ->
+module.exports = angular.module('ponyfm').directive 'pfmOnEnter', () ->
     (scope, element, attrs) ->
         element.bind("keyup", (event) ->
             if (event.which is 13)

resources/assets/scripts/app/directives/player.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmPlayer', () ->
+module.exports = angular.module('ponyfm').directive 'pfmPlayer', () ->
     $element = null
 
     restrict: 'E'

resources/assets/scripts/app/directives/playlists-list.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmPlaylistsList', () ->
+module.exports = angular.module('ponyfm').directive 'pfmPlaylistsList', () ->
     restrict: 'E'
     replace: true
     templateUrl: '/templates/directives/playlists-list.html'

resources/assets/scripts/app/directives/popup.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmPopup', () ->
+module.exports = angular.module('ponyfm').directive 'pfmPopup', () ->
     (scope, element, attrs) ->
         align = 'left'
         elementId = attrs.pfmPopup

resources/assets/scripts/app/directives/progress-bar.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmProgressBar', () ->
+module.exports = angular.module('ponyfm').directive 'pfmProgressBar', () ->
     (scope, element, attrs) ->
         scope.$watch attrs.pfmProgressBar, (val) ->
             return if !val?

resources/assets/scripts/app/directives/scroll-recorder.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmScrollRecorder', () ->
+module.exports = angular.module('ponyfm').directive 'pfmScrollRecorder', () ->
     (scope, element, attrs) ->
         timeout = null
         onScroll = null

resources/assets/scripts/app/directives/search.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmSearch', () ->
+module.exports = angular.module('ponyfm').directive 'pfmSearch', () ->
     restrict: 'E'
     templateUrl: '/templates/directives/search.html'
     scope:

resources/assets/scripts/app/directives/share-buttons.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmShareButtons', () ->
+module.exports = angular.module('ponyfm').directive 'pfmShareButtons', () ->
     (scope, element) ->
         window.setTimeout((->
             Tumblr.activate_share_on_tumblr_buttons()

resources/assets/scripts/app/directives/src-loader.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmSrcLoader', () ->
+module.exports = angular.module('ponyfm').directive 'pfmSrcLoader', () ->
     (scope, element, attrs) ->
         size = attrs.pfmSrcSize || 'normal'
         element.css {opacity: .5}

resources/assets/scripts/app/directives/track-editor.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmTrackEditor', () ->
+module.exports = angular.module('ponyfm').directive 'pfmTrackEditor', () ->
     restrict: 'E'
     templateUrl: '/templates/directives/track-editor.html'
     scope:

resources/assets/scripts/app/directives/track-player.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmTrackPlayer', () ->
+module.exports = angular.module('ponyfm').directive 'pfmTrackPlayer', () ->
     restrict: 'E'
     templateUrl: '/templates/directives/track-player.html'
     scope:

resources/assets/scripts/app/directives/tracks-list.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmTracksList', () ->
+module.exports = angular.module('ponyfm').directive 'pfmTracksList', () ->
     restrict: 'E'
     templateUrl: '/templates/directives/tracks-list.html'
     replace: true

resources/assets/scripts/app/directives/uploader.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'uploader', [
+module.exports = angular.module('ponyfm').directive 'uploader', [
     'upload'
     (upload) -> (scope, element) ->
         $dropzone = $(element)

resources/assets/scripts/app/directives/users-list.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').directive 'pfmUsersList', () ->
+module.exports = angular.module('ponyfm').directive 'pfmUsersList', () ->
     restrict: 'E'
     replace: true
     templateUrl: '/templates/directives/users-list.html'

resources/assets/scripts/app/filters/length.coffee

@@ -14,6 +14,6 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').filter 'pfmLength', () ->
+module.exports = angular.module('ponyfm').filter 'pfmLength', () ->
     (input) ->
         input.length

resources/assets/scripts/app/filters/moment-from-now.coffee

@@ -14,6 +14,6 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').filter 'momentFromNow', () ->
+module.exports = angular.module('ponyfm').filter 'momentFromNow', () ->
     (input) ->
         moment.utc(input).fromNow()

resources/assets/scripts/app/filters/nl2br.coffee

@@ -1,6 +1,6 @@
 # Based on https://gist.github.com/kensnyder/49136af39457445e5982
 
-angular.module('ponyfm').filter 'nl2br', [
+module.exports = angular.module('ponyfm').filter 'nl2br', [
   '$sanitize'
   ($sanitize) ->
     tag = if /xhtml/i.test(document.doctype) then '<br />' else '<br>'

resources/assets/scripts/app/filters/noHTML.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').filter 'noHTML', () ->
+module.exports = angular.module('ponyfm').filter 'noHTML', () ->
     (input) ->
         return '' if !input
 

resources/assets/scripts/app/filters/seconds-display.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').filter 'secondsDisplay', () ->
+module.exports = angular.module('ponyfm').filter 'secondsDisplay', () ->
     (input) ->
         sec_num = parseInt(input, 10)
         return '00:00' if !sec_num

resources/assets/scripts/app/filters/trust.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').filter 'trust', [
+module.exports = angular.module('ponyfm').filter 'trust', [
     '$sce'
     ($sce) ->
         (input) ->

resources/assets/scripts/app/services/account-albums.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('account-albums', [
+module.exports = angular.module('ponyfm').factory('account-albums', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         def = null

resources/assets/scripts/app/services/account-tracks.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('account-tracks', [
+module.exports = angular.module('ponyfm').factory('account-tracks', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         cache = {}

resources/assets/scripts/app/services/admin-genres.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('admin-genres', [
+module.exports = angular.module('ponyfm').factory('admin-genres', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         def = null

resources/assets/scripts/app/services/albums.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('albums', [
+module.exports = angular.module('ponyfm').factory('albums', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         albumPages = []

resources/assets/scripts/app/services/artists.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('artists', [
+module.exports = angular.module('ponyfm').factory('artists', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         artistPage = []

resources/assets/scripts/app/services/auth.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('auth', [
+module.exports = angular.module('ponyfm').factory('auth', [
     '$rootScope'
     ($rootScope) ->
         data: {isLogged: window.pfm.auth.isLogged, user: window.pfm.auth.user}

resources/assets/scripts/app/services/comments.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('comments', [
+module.exports = angular.module('ponyfm').factory('comments', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         commentCache = []

resources/assets/scripts/app/services/dashboard.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('dashboard', [
+module.exports = angular.module('ponyfm').factory('dashboard', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         def = null

resources/assets/scripts/app/services/download-cached.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('download-cached', [
+module.exports = angular.module('ponyfm').factory('download-cached', [
   '$rootScope', '$http', '$log'
   ($rootScope, $http, $log) ->
     download = (type, id, format) ->

resources/assets/scripts/app/services/favourites.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('favourites', [
+module.exports = angular.module('ponyfm').factory('favourites', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         tracksDef = null

resources/assets/scripts/app/services/focus.coffee

@@ -19,7 +19,7 @@
 # using a jQuery selector.
 #
 # Based on: https://stackoverflow.com/a/25597540/3225811
-angular.module('ponyfm').factory('focus', ['$timeout', '$window', ($timeout, $window) ->
+module.exports = angular.module('ponyfm').factory('focus', ['$timeout', '$window', ($timeout, $window) ->
     (selector) ->
         $timeout () ->
             element = $window.jQuery("#{selector}")

resources/assets/scripts/app/services/follow.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('follow', [
+module.exports = angular.module('ponyfm').factory('follow', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         self =

resources/assets/scripts/app/services/images.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('images', [
+module.exports = angular.module('ponyfm').factory('images', [
     '$rootScope'
     ($rootScope) ->
         def = null

resources/assets/scripts/app/services/lightbox.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('lightbox', [
+module.exports = angular.module('ponyfm').factory('lightbox', [
     () ->
         openDataUrl: (src) ->
             $.colorbox

resources/assets/scripts/app/services/player.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('player', [
+module.exports = angular.module('ponyfm').factory('player', [
     '$rootScope'
     ($rootScope) ->
         readyDef = new $.Deferred()

resources/assets/scripts/app/services/playlists.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('playlists', [
+module.exports = angular.module('ponyfm').factory('playlists', [
     '$rootScope', '$state', '$http', 'auth'
     ($rootScope, $state, $http, auth) ->
         playlistDef = null

resources/assets/scripts/app/services/search.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('search', [
+module.exports = angular.module('ponyfm').factory('search', [
     '$http'
     ($http) ->
 

resources/assets/scripts/app/services/taxonomies.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('taxonomies', [
+module.exports = angular.module('ponyfm').factory('taxonomies', [
     '$rootScope', '$http'
     ($rootScope, $http) ->
         def = null

resources/assets/scripts/app/services/tracks.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('tracks', [
+module.exports = angular.module('ponyfm').factory('tracks', [
     '$rootScope', '$http', 'taxonomies'
     ($rootScope, $http, taxonomies) ->
         filterDef = null

resources/assets/scripts/app/services/upload.coffee

@@ -14,7 +14,7 @@
 # You should have received a copy of the GNU Affero General Public License
 # along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-angular.module('ponyfm').factory('upload', [
+module.exports = angular.module('ponyfm').factory('upload', [
     '$rootScope', '$http', '$timeout', 'account-tracks'
     ($rootScope, $http, $timeout, accountTracks) ->
         self =

resources/views/shared/_app_layout.blade.php

@@ -158,9 +158,13 @@
         </script>
     @endif
 
-    {!! Assets::scriptIncludes() !!}
+{{--    {!! Assets::scriptIncludes() !!}--}}
 
-    @if (!Config::get("app.debug"))
+    @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>
+    @else
+        <script src="/build/scripts/app.js"></script>
         <script src="/build/scripts/templates.js"></script>
     @endif
 

webpack.config.js

@@ -0,0 +1,28 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+    module: {
+        loaders: [
+            {test: /\.coffee$/, loader: "coffee"}
+        ]
+    },
+    plugins: [
+        new webpack.ProvidePlugin({
+            $: "jquery",
+            jQuery: "jquery"
+        })
+    ],
+    entry: './resources/assets/scripts/app/app.coffee',
+    output: {
+        path: __dirname + '/public',
+        filename: './build/scripts/app.js',
+        publicPath: 'http://localhost:8080/build/'
+    },
+    //watch: true,
+    //watchDelay: 100,
+    devtool: 'source-map',
+    resolve: {
+        extensions: ["", ".webpack.js", ".web.js", ".js", ".coffee"]
+    }
+};