Build tools

Learn how to use Bootstrap’s included npm scripts to build our documentation, compile source code, run tests, and more.

Bootstrap Documentation

Tooling setup

Front uses NPM scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.

To use our build system and run our documentation locally, Follow the below steps:

  1. Download and install Node.js , which we use to manage our dependencies.
  2. Download and install Gulp.js , which we use to manage our dependencies.
  3. Navigate to the root /profit directory and run npm install to install our local dependencies listed in package.json.

When completed, you'll be able to run the various commands provided from the command line.

Installing Node.js

If you do not have Node installed already, you can get it by downloading the package installer from Node's website. Please download the stable version of Node.js (LTS) NOT the latest.

You need to have Node.js (Node) installed onto your computer before you can install Gulp. When you're done with installing Node, you can install Gulp by using the following command in the command line:

Installing gulp

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.

copy

npm install gulp-cli -g
Note: If you are using MacOS please use sudo keyword in the command because they need administrator rights to install Gulp globally.

Installing NPM modules

First, change the command line path into your project where Front folder is located. if you have not done this before, you may check the following article to quick start Command Prompt - How to use the simple, basic commands .

Once the path of your workflow is changed to Front folder, you may run package.json file by using the following command:

copy

npm i

If you check the project folder when the command has finished executing, you should see that Gulp has created a node_modules folder.

Run gulp

Now we have an integrated workflow. To try it out run:

copy

gulp

Now you can try making some changes to assets/scss/components/ and save it.

Gulp dist

Run gulp dist to minify CSS, merge JS files into one dist folder.

copy

gulp dist
Note: All npm libraries that are used in the Profit template can be seen in the package.json file.