diff --git a/gulpfile.js b/gulpfile.js index 922ac858..89e62361 100644 --- a/gulpfile.js +++ b/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 listening - gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html"); + // server and middleware options, currently blank + }).listen(61999, "localhost", function (err) { + if (err) + throw new gutil.PluginError("webpack-dev-server", err); - // keep the server alive or continue? - // callback(); + // Server listening + 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) { diff --git a/package.json b/package.json index ea9e79da..7a3d15fb 100644 --- a/package.json +++ b/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", diff --git a/resources/assets/scripts/app/app.coffee b/resources/assets/scripts/app/app.coffee index 7974c029..b2d635d5 100644 --- a/resources/assets/scripts/app/app.coffee +++ b/resources/assets/scripts/app/app.coffee @@ -15,6 +15,17 @@ # along with this program. If not, see . +# 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' diff --git a/resources/views/shared/_app_layout.blade.php b/resources/views/shared/_app_layout.blade.php index 68674c9e..e8b7bbce 100644 --- a/resources/views/shared/_app_layout.blade.php +++ b/resources/views/shared/_app_layout.blade.php @@ -25,7 +25,7 @@ @endif -{{-- {!! Assets::scriptIncludes() !!}--}} - @if (Config::get("app.debug")) - - + + @else diff --git a/webpack.config.js b/webpack.base.config.js similarity index 68% rename from webpack.config.js rename to webpack.base.config.js index cf8426f4..65ebce2a 100644 --- a/webpack.config.js +++ b/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"] } diff --git a/webpack.dev.config.js b/webpack.dev.config.js new file mode 100644 index 00000000..7c9b983b --- /dev/null +++ b/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; diff --git a/webpack.production.config.js b/webpack.production.config.js new file mode 100644 index 00000000..d6ae3156 --- /dev/null +++ b/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;