I’ve been using Codekit for a long time. Before that I used Hammer. Both these apps did a job of compiling files ready for deployment. They basically take one set of files and process them into something else. I used them for compiling SASS into CSS and creating template files during the design process.
Laravel Mix is a similar app. Except it runs in the dreaded Terminal. Sleeves up again. Pass the forceps.
Mix basically watches your files and does things when they change. It runs over a more complex technology called Webpack. No, me neither.
Mix is installed through something called NPM or Yarn. Again, yes, I think this is ridiculous. It's like being on Betamax when all the video nasties are on VHS.
NPM is easy to install. Browse to your project folder and enter the following code in the Terminal: npm install.
There should now (or already) be a file in your root folder called webpack.mix.js. This is the config file for what happens when Mix kicks into action.
The default config in the statamic/statamic install will process Javascript and CSS files. It takes any files in your resources folders, does its magic, and then sticks them in the public folder. Browsers can then access those files to show off your website about Fancy Mice or whatever.
Mix does not constantly run in the background like a Desktop App might do. You need to enable this. Back to the Terminal Robin: Run npm run watch. This now watches for any changes to the files listed in your webpack.mix.js file. Simples. You might want to run this in another Terminal window as it effectively hogs the command line.
If you want to compile just the once then use npm run dev.
There's lots more you can do and the Mix documentation, like all Laravel apps, is impeccibly informative.
One thing I have added is something called BrowserSync. This refreshes your browser so that any changes to code are updated live. Code editor to the left, Browsers to the right!
This is my config. Yours will be different. I hope. Yes I like Firefox. Whatevs.
mix.browserSync({
proxy: 'ellimondo.test',
browser: ['firefox'],
files: [
'public/js/app.js',
'app/**/*',
'routes/**/*',
'resources/css/**/*',
'resources/views/**/*',
'resources/lang/**/*',
'content/collections/pages/**/*'
]
})
There is also a production mode:
if (mix.inProduction()) {
mix.version();
mix.purgeCss({ enabled: true });
}
This can run alternative processes you might want to do when you are going into production. You can run this this locally with npm run production but it's probably better to run on your live server. But then what do I know?*.
Remember folks, that however disheartening all this code tinkering might be, you only need to do it once. I am the king of copy/paste! And a Lord of the Future but that's another story.
* Not much.