Use Laravel Mix (#9)

app/controllers/App.php

@@ -12,7 +12,7 @@ class App extends Controller
         if (has_custom_logo()) {
             return wp_get_attachment_image($custom_logo_id, 'original');
         } else {
-            return file_get_contents(get_theme_file_path() . '/dist/' . svg_path('images/logo.svg'));
+            return file_get_contents(get_theme_file_path() . '/dist/' . asset_dir('images/logo.svg'));
         }
     }
 

app/helpers.php

@@ -76,16 +76,16 @@ function template_path($file, $data = [])
  */
 function asset_path($asset)
 {
-    return sage('assets')->getUri($asset);
+    return fix_path(sage('assets')->getUri('/' . $asset));
 }
 
 /**
  * @param $asset
  * @return string
  */
-function svg_path($asset)
+function asset_dir($asset)
 {
-    return sage('assets')->get($asset);
+    return fix_path(sage('assets')->get('/' . $asset));
 }
 
 /**
@@ -195,3 +195,8 @@ function contact_form_submission()
     }
     return false;
 }
+
+function fix_path($path)
+{
+    return str_replace('/dist//', '/dist/', $path);
+}

config/assets.php

@@ -14,7 +14,7 @@ return [
     |
     */
 
-    'manifest' => get_theme_file_path().'/dist/assets.json',
+    'manifest' => get_theme_file_path().'/dist/mix-manifest.json',
 
     /*
     |--------------------------------------------------------------------------

package.json

@@ -75,56 +75,32 @@
     }
   },
   "scripts": {
-    "build": "webpack --progress --config resources/assets/build/webpack.config.js",
-    "build:production": "webpack --progress -p --config resources/assets/build/webpack.config.js",
-    "build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
-    "start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
+    "build": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "build:production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "build:profile": "cross-env NODE_ENV=production webpack --progress --profile --json --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "start": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "rmdist": "rimraf dist",
     "lint": "npm run -s lint:scripts && npm run -s lint:styles",
-    "lint:scripts": "eslint resources/assets/scripts resources/assets/build",
-    "lint:styles": "stylelint 'resources/assets/styles/**/*.{css,sass,scss,sss,less}'",
+    "lint:scripts": "eslint \"resources/assets/scripts\"",
+    "lint:styles": "stylelint \"resources/assets/styles/**/*.scss\"",
     "test": "npm run -s lint"
   },
   "engines": {
     "node": ">= 6.9.4"
   },
   "devDependencies": {
-    "autoprefixer": "~7.1",
-    "browser-sync": "~2.18",
-    "browsersync-webpack-plugin": "^0.6.0",
-    "bs-html-injector": "~3.0",
-    "buble-loader": "^0.4.1",
-    "cache-loader": "~1.0",
-    "clean-webpack-plugin": "^0.1.16",
-    "copy-globs-webpack-plugin": "^0.2.0",
-    "css-loader": "^0.28.4",
-    "cssnano": "~4.0.0-rc.1",
+    "browser-sync": "^2.18.13",
+    "browser-sync-webpack-plugin": "^1.2.0",
+    "cross-env": "*",
     "eslint": "~4.2",
     "eslint-loader": "~1.9",
     "eslint-plugin-import": "~2.7",
     "extract-text-webpack-plugin": "~3.0",
-    "file-loader": "^0.11.2",
-    "friendly-errors-webpack-plugin": "^1.6.1",
-    "imagemin-mozjpeg": "~6.0",
-    "imagemin-webpack-plugin": "~1.5.0-beta.0",
-    "import-glob": "~1.5",
-    "node-sass": "~4.5",
-    "postcss-loader": "~2.0",
-    "postcss-safe-parser": "~3.0",
-    "resolve-url-loader": "~2.1",
+    "laravel-mix": "~1.4",
     "rimraf": "~2.6",
-    "sass-loader": "~6.0",
-    "style-loader": "^0.18.2",
     "stylelint": "~7.12",
     "stylelint-config-standard": "~16.0",
-    "stylelint-webpack-plugin": "^0.8.0",
-    "url-loader": "^0.5.9",
-    "webpack": "~3.3",
-    "webpack-assets-manifest": "^0.7.0",
-    "webpack-dev-middleware": "~1.11",
-    "webpack-hot-middleware": "~2.18",
-    "webpack-merge": "~4.1",
-    "yargs": "~8.0"
+    "stylelint-webpack-plugin": "^0.8.0"
   },
   "dependencies": {
     "isotope-layout": "^3.0.4",

resources/assets/styles/autoload/_tachyons.scss

@@ -1,4 +0,0 @@
-// `sage preset` installed this file automatically.
-// Running `sage preset` again could result in automatic deletion of this file.
-// Because of this, we do not recommend editing this file.
-@import "~tachyons-sass/tachyons";

resources/assets/styles/main.scss

@@ -1,14 +1,12 @@
 @import "common/variables";
 
-/** Import everything from autoload */
-@import "./autoload/**/*";
-
 /**
  * Import npm dependencies
  *
  * Prefix your imports with `~` to grab from node_modules/
  * @see https://github.com/webpack-contrib/sass-loader#imports
  */
+@import "~tachyons-sass/tachyons";
 
 /** Import theme styles */
 @import "common/functions";

resources/views/front-page.blade.php

@@ -29,12 +29,12 @@
         </div>
         @if($previous_page)
           <a class="previous" data-page="{{ $previous_page }}" href="{{ network_home_url("/page/$previous_page/#latest-titles") }}">
-            @php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg'))
+            @php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/left-arrow.svg'))
           </a>
         @endif
         @if($next_page <= $catalog_data['pages'])
           <a class="next" data-page="{{ $next_page }}" href="{{ network_home_url("/page/$next_page/#latest-titles") }}">
-            @php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))
+            @php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/right-arrow.svg'))
           </a>
         @endif
       </div>

resources/views/page-catalog.blade.php

@@ -50,7 +50,7 @@
     </div>
     @if($catalog_data['pages'] > 1)
     <nav class="catalog-navigation">
-      @if($previous_page)<a class="previous" data-page="{{ $previous_page }}" href="{{ network_home_url("/catalog/page/$previous_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/left-arrow.svg')) {{ __('Previous', 'aldine') }}</a>@endif
+      @if($previous_page)<a class="previous" data-page="{{ $previous_page }}" href="{{ network_home_url("/catalog/page/$previous_page/") }}">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/left-arrow.svg')) {{ __('Previous', 'aldine') }}</a>@endif
       <div class="pages">
       @for($i = 1; $i <= $catalog_data['pages']; $i++)
         @if($i === $current_page)
@@ -60,7 +60,7 @@
         @endif
       @endfor
       </div>
-      @if($next_page <= $catalog_data['pages'])<a class="next" data-page="{{ $next_page }}" href="{{ network_home_url("/catalog/page/$next_page/") }}">{{ __('Next', 'aldine') }} @php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/right-arrow.svg'))</a>@endif
+      @if($next_page <= $catalog_data['pages'])<a class="next" data-page="{{ $next_page }}" href="{{ network_home_url("/catalog/page/$next_page/") }}">{{ __('Next', 'aldine') }} @php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/right-arrow.svg'))</a>@endif
     </nav>
     @endif
   </section>

resources/views/partials/footer.blade.php

@@ -31,7 +31,7 @@
       </div>
     </section>
     <section class="pressbooks-footer">
-      <a class="pressbooks-icon" href="https://pressbooks.com" title="Pressbooks">@php(include get_theme_file_path() . '/dist/' . Aldine\svg_path('images/pb.svg'))</a>
+      <a class="pressbooks-icon" href="https://pressbooks.com" title="Pressbooks">@php(include get_theme_file_path() . '/dist/' . Aldine\asset_dir('images/pb.svg'))</a>
       <div class="pressbooks-links">
         <h1><a href="https://pressbooks.com">{!! sprintf(__('Powered by %s', 'aldine'), '<span class="pressbooks">Pressbooks</span>') !!}</a></h1>
         <ul>

webpack.mix.js

@@ -0,0 +1,73 @@
+let mix = require('laravel-mix');
+
+/*
+ |--------------------------------------------------------------------------
+ | Mix Asset Management
+ |--------------------------------------------------------------------------
+ |
+ | Mix provides a clean, fluent API for defining some Webpack build steps
+ | for your Laravel application. By default, we are compiling the Sass
+ | file for your application, as well as bundling up your JS files.
+ |
+ */
+
+const app = 'app';
+const resources = 'resources';
+const assets = `${resources}/assets`;
+const dist = 'dist';
+
+mix.setPublicPath(dist);
+mix.setResourceRoot('../');
+
+// BrowserSync
+mix.browserSync({
+  host: 'localhost',
+  proxy: 'http://pressbooks.dev',
+  port: 3000,
+  files: [
+    `${app}/**/*.php`,
+    `${resources}/**/*.php`,
+    `${dist}/**/*.css`,
+    `${dist}/**/*.js`,
+  ],
+});
+
+// Sass
+mix.sass(`${assets}/styles/main.scss`, `${dist}/styles/main.css`);
+
+// Javascript
+mix.autoload({
+   jquery: ['$', 'window.jQuery', 'jQuery'],
+});
+
+mix.js(`${assets}/scripts/main.js`, `${dist}/scripts`)
+   .js(`${assets}/scripts/customizer.js`, `${dist}/scripts`);
+
+// Assets
+mix.copy(`${assets}/fonts`, `${dist}/fonts`, false)
+  .copy(`${assets}/images`, `${dist}/images`, false);
+
+// Options
+mix.options({
+  processCssUrls: false,
+});
+
+// Source maps when not in production.
+if (!mix.inProduction()) {
+  mix.sourceMaps();
+}
+
+// Hash and version files in production.
+if (mix.inProduction()) {
+  mix.version();
+}
+
+// Add Isotope support.
+mix.webpackConfig({
+  resolve: {
+    alias: {
+      'masonry': 'masonry-layout',
+      'isotope': 'isotope-layout',
+    },
+  },
+});