Automate painful or time-consuming tasks in your development workflow, so you can stop messing around and build something using Gulp
Before diving into the technical stuff you need to know that Purpose comes with a couple of building tool options so you can choose the one that fits your project’t needs. You can choose between Gulp and Laravel Mix and, therefore, you will need to get a few things done.
But first, choose which one are you going to wok with from now on: Gulp or Laravel Mix. Afterwards, follow the instructions as given for the selected option.
Now let’s install Node.js:
In order to use our build tools you will need to download and install Node.js. If you do not have Node.js installed already, you can get it by downloading the package installer from the official website. Please download the stable version of Node.js (LTS).
After Node is installed on your system you can now proceed to Gulp installation. To do that simply run the command below in your terminal. This will install Gulp globally.
Now open the terminal and
cd ro your project’s root. Once the path of your workflow is changed you have to install all the packages needed. You can do this with NPM or Yarn.
- Gulp, an easy way to get started, especially if you are at the beginning
- Laravel Mix, an elegant wrapper around Webpack for the 80% use case.
Though Laravel Mix is optimized for Laravel usage, it may be used for any type of application. So, if you love Laravel as we do, then this is the way to go.
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.
For development we set a Gulp command that will compile the sources to dist then start a local Browsersync instance on port 3000 to serve and auto-refresh your pages as you edit.
For production we set a Gulp command that will compile and minify the CSS and JS files ready to be included in your project
Laravel Mix is an elegant wrapper around Webpack for the 80% use case.
Purpose comes with Laravel Mix already installed and configured. You should now have the following directory structure:
The webpack.mix.js file is your configuration layer on top of webpack. Most of your time will be spent here.
Head over to your webpack.mix.js file and customize the configuration file for your needs. Check out all the options you have on the official Laravel Mix website.
Purpose comes with a few pre-included NPM scripts to your package.json file, to speed up your workflow.
With the provided Laravel Mix scripts you may do the follwing:
Once that finishes, you should now see:
Ready to go live? Use the command below and you will get all the CSS and JS resources compiled and minified. Also, you will get the bundle version if you want to have a single JS file used in production.