Learn how to use Front's included npm scripts to automate your time-consuming tasks in your development workflow with Gulp toolkit.
Front uses NPM scripts for its build system. Our
package.json includes convenient methods for working with the framework, including compiling code, minification js/css files and more.
TL;DR To use our build system and run our documentation locally, you'll need a copy of Front's source files and NodeJS. Follow these steps and you should be ready to rock:
- Download and install Node.js , which we use to manage our dependencies. If Node.js is already installed in your machine, please make sure the installed version is
v12.x and jump to step 2.
npm install --global gulp-cli command. If you already installed
Gulp CLI previously, you can skip this step and jump to step 3.
- Navigate to the root
/front directory and run
npm install to install our local dependencies listed in
Yup, that's it.
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 CLI globally
Now, we need to install
Gulp CLI globally. If you already installed
Gulp CLI previously, you can skip this step.
npm install --global gulp-cli
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:
This time, we're installing Gulp with its all dependency plugins like
gulp-autoprefixer and etc. It might take a couple of minutes depends on your internet connection.
If you check the project folder when the command has finished executing, you should see that Gulp has created a
Now we have an integrated workflow. To try it out run:
Now you can try making some changes in your custom sass files at
assets/scss/_user.scss and save it.
Explanation of how
gulp dist function in the Front Template works. The
gulp dist function contains 3 main functions that create the
dist folder and perform the following processes:
- Minifies CSS files from
theme.min.css file and saves to
theme.min.js file and saves to
- Updates available libraries from NPM packages and copies the updated libraries to
To try it out run:
As for the
assets/vendor/.. folder, note that these libraries are extracted from NPM, and some libraries are not updated in NPM, so we only extract up-to-date libraries from NPM, and this is the main reason that all libraries are not included in folder
All NPM libraries that are used in the Front template can be seen in the
Front uses Autoprefixer (included in our build process) to automatically add vendor prefixes to some CSS properties at build time. Doing so saves us time and code by allowing us to write key parts of our CSS a single time while eliminating the need for vendor mixins.