Purpose Website UI Kit - Purpose is a unique and beautiful collection of UI elements that are all flexible and modular. A complete and customizable solution to building the website of your dreams.

Build tools

Automate painful or time-consuming tasks in your development workflow, so you can stop messing around and build something using Gulp

Requirements

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:

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).

Download Node.js

Gulp CLI

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.

npm install gulp-cli -g

Package management

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.

npm install

Build tools

Currently, we offer several methods for Sass and Javascript compiling. You can choose between:

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

Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

Commands

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.

gulp

For production we set a Gulp command that will compile and minify the CSS and JS files ready to be included in your project

gulp build

Laravel Mix

Laravel Mix is an elegant wrapper around Webpack for the 80% use case.

Configuration

Purpose comes with Laravel Mix already installed and configured. You should now have the following directory structure:

node_modules/
package.json
webpack.mix.js

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.

NPM scripts

Purpose comes with a few pre-included NPM scripts to your package.json file, to speed up your workflow.

"scripts": {
    "dev": "NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
}

Compilation

With the provided Laravel Mix scripts you may do the follwing:

npm run dev

Once that finishes, you should now see:

assets/js/core.js
assets/js/purpose.js
assets/css/purpose.css

To watch your Sass, JavaScript and HTML for changes, run the command below. It will start a local Browsersync instance on port 3000 to serve and auto-refresh your pages as you edit.

npm run watch

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.

npm run production