Statamic & Laravel Mix with Bootstrap/FontAwesome

gulpfile.js

const elixir = require('laravel-elixir')
const config = require('./package.json')

elixir(mix => {
  mix.sass('./assets/styles/main.scss', `./css/${config.name}.css`)
  mix.webpack('./assets/scripts/main.js', `./js/${config.name}.js`)
  mix.copy('node_modules/font-awesome/fonts', 'fonts')

  mix.browserSync({
    proxy: `${config.name}.dev`,
    files: [`./css/${config.name}.css`, `./js/${config.name}.js`]
  })
})

main.js

// assets/scripts/main.js

window.$ = window.jQuery = require('jquery')
window.Popper = require('popper.js')
require('bootstrap')

main.scss

// assets/styles/main.scss

@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/font-awesome/scss/font-awesome';

package.json

{
  "name": "origin",
  "private": true,
  "scripts": {
    "start": "gulp watch",
    "build": "gulp",
    "build:prod": "gulp --production"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-15",
    "laravel-elixir-browsersync-official": "^1.0.0",
    "laravel-elixir-webpack-official": "^1.0.10",
    "webpack-stream": "^4.0.0"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-beta.2",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.3"
  }
}