Flatly with Laravel Mix (#340)

Themes/Flatly/bower.json

-{
-  "name": "demo-theme",
-  "version": "1.0.0",
-  "description": "Demo Theme",
-  "license": "MIT",
-  "private": true,
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "/resources/vendor",
-    "test",
-    "tests"
-  ],
-  "dependencies": {
-    "jquery": ">= 1.9.1",
-    "bootstrap": "~3.3.2",
-    "font-awesome": "~4.3.0",
-    "prism": "~1.5"
-  }
-}

Themes/Flatly/elixir.json

-{
-  "srcDir": "Themes/Flatly",
-  "assetsPath": "resources/",
-  "publicPath": "assets/",
-  "cssOutput": "assets/css/",
-  "jsOutput": "assets/js/",
-  "bowerDir": "resources/vendor/"
-}

Themes/Flatly/gulpfile.js

-var gulp = require("gulp");
-var shell = require('gulp-shell');
-var elixir = require('laravel-elixir');
-var themeInfo = require('./theme.json');
-
-var Task = elixir.Task;
-
-elixir.extend('stylistPublish', function() {
-    new Task('stylistPublish', function() {
-        return gulp.src("").pipe(shell("php ../../artisan stylist:publish " + themeInfo.name));
-    });
-});
-/*
- |--------------------------------------------------------------------------
- | Elixir Asset Management
- |--------------------------------------------------------------------------
- |
- | Elixir provides a clean, fluent API for defining some basic Gulp tasks
- | for your Laravel application. By default, we are compiling the Sass
- | file for our application, as well as publishing vendor resources.
- |
- */
-
-elixir(function (mix) {
-
-    /**
-     * Compile less
-     */
-    mix.less([
-        "main.less"
-    ], 'assets/css/main.css')
-    .stylistPublish();
-
-    /**
-     * Concat scripts
-     */
-    mix.scripts([
-        '/vendor/jquery/dist/jquery.js',
-        '/vendor/bootstrap/dist/js/bootstrap.min.js',
-        '/vendor/prism/prism.js',
-        '/js/bootswatch.js'
-    ], null, 'resources');
-
-    /**
-     * Copy Bootstrap fonts
-     */
-    mix.copy(
-        'resources/vendor/bootstrap/fonts',
-        'assets/fonts'
-    );
-
-    /**
-     * Copy Fontawesome fonts
-     */
-    mix.copy(
-        'resources/vendor/font-awesome/fonts',
-        'assets/fonts'
-    );
-});

Themes/Flatly/mix-manifest.json

+{
+  "/mix.js": "/mix.js",
+  "/assets/css/main.css": "/assets/css/main.css",
+  "assets/js/all.js": "assets/js/all.js"
+}
\ No newline at end of file

Themes/Flatly/package.json

 {
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "watch-poll": "npm run watch -- --watch-poll",
+    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+    "prod": "npm run production",
+    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+  },
   "devDependencies": {
-    "gulp": "^3.8.8",
-    "gulp-shell": "^0.3.0",
-    "laravel-elixir": "^5.0.0"
+    "babel-preset-env": "^1.5.2",
+    "bootstrap": "~3.3.2",
+    "cross-env": "^3.2.3",
+    "font-awesome": "^4.3.0",
+    "jquery": ">= 1.9.1",
+    "laravel-mix": "0.*",
+    "prismjs": "^1.6.0",
+    "webpack-shell-plugin": "^0.5.0"
   }
 }

Themes/Flatly/resources/less/main.less

 @import url("//fonts.googleapis.com/css?family=Lato:400,700,400italic");
 
-@import "../vendor/bootstrap/less/bootstrap.less";
-@import "../vendor/font-awesome/less/font-awesome.less";
-@import (inline) "../vendor/prism/themes/prism.css";
+@import "../../node_modules/bootstrap/less/bootstrap.less";
+@import "../../node_modules/font-awesome/less/font-awesome.less";
+@import (inline) "../../node_modules/prismjs/themes/prism.css";
 @import "variables.less";
 @import "bootswatch";
 

Themes/Flatly/webpack.mix.js

+let mix = require('laravel-mix').mix;
+const WebpackShellPlugin = require('webpack-shell-plugin');
+const themeInfo = require('./theme.json');
+
+/**
+ * Compile less
+ */
+mix.less('resources/less/main.less', 'assets/css/main.css')
+
+/**
+ * Concat scripts
+ */
+mix.scripts([
+  'node_modules/jquery/dist/jquery.js',
+  'node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js',
+  'node_modules/prismjs/prism.js',
+  'resources/js/bootswatch.js'
+], 'assets/js/all.js');
+
+/**
+ * Copy Font directory https://laravel.com/docs/5.4/mix#url-processing
+ */
+mix.copy(
+  'fonts',
+  '../../public/fonts'
+);
+
+/**
+ * Publishing the assets
+ */
+mix.webpackConfig({
+  plugins: [
+    new WebpackShellPlugin({onBuildEnd:['php ../../artisan stylist:publish ' + themeInfo.name]})
+  ]
+});
\ No newline at end of file