Skip to main content

Build tools

Requirements

In order to customise Square you will need to download Node JS. If you do not have Node 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

Package management

Now open the terminal and cd to 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.

Build tools

Square comes with two building tool options, Webpack and Gulp, so you can choose the one that fits your project's needs.

  • Gulp is an easy way to get started, especially for novices
  • Laravel Mix is an elegant wrapper around Webpack. It ships everything you need

Both options use the same file structure and produce the same code. If you choose Webpack please follow the steps in the Webpack section. If you choose Gulp, please jump to the Gulp section.

Webpack

Laravel Mix comes with a pre-configured environment, we added everything else you need.
For more information about Laravel Mix please visit the official website.

Compilation

To watch your Sass, JavaScript, image asset, Nunjuck or HTML 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. This command will create a temp folder for you where the server is running.

This is the same command without the watch function. All the HTML, JS, CSS and asset files will go into the temp folder.

When you are ready to go live use the command below and all the CSS and JS resources will be compiled and minified. The HTML files will be minified too. This will create a dist folder along with all of your assets (images, vendor files etc).

Note: within the generated HTML files the CSS and JS file's paths will be automatically created.

Note: When you run 'npm run dev' the temp folder will be deleted. When you run 'npm run build' the dist folder will be deleted.

Gulp

If you choose to use Gulp, first of all please run the following command to intall Gulp globally.
For more information about Gulp please visit the official website.

Compilation

To watch your Sass, JavaScript, image asset, Nunjuck or HTML 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. This command will create a temp folder for you where the server is running.

This is the same command without the watch function. All the HTML, JS, CSS and asset files will go into the temp folder.

If you are ready to go live, use the command below and you will get all the CSS and JS resources compiled and minified. The HTML files will be minified too. This will create a dist folder along with your all assets (images, vendor files etc).

Note: within the generated HTML files the CSS and JS file's paths will be automatically created.

Note: When you run 'gulp dev' the temp folder will be deleted. When you run 'gulp build' the dist folder will be deleted.

Jump to