Gulp
Learn how to use Space's included npm scripts to automate your time-consuming tasks in your development workflow with Gulp toolkit.
Tooling setup
Space 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, you'll need a copy of Space's source files and Node. Follow these steps and you should be ready to rock:
- Download and install Node.js, which we use to manage our dependencies.
- Download and install Gulp.js, which we use to manage our dependencies.
- Navigate to the root
/Space
directory and runnpm install
to install our local dependencies listed inpackage.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.js
Please note, first Gulp should be installed globally and for that reason -g
command is used.
npm install gulp-cli -g
Important
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 Unify 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 Unify folder, you may runpackage.json
file by using the following command:
npm install
This time, we're installing Gulp with its all dependency plugins like gulp-sass
, 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 node_modules
folder.
Run Gulp
Now we have an integrated workflow. To try it out run:
gulp
Now you can try making some changes to assets/include/scss/theme.scss
and save it.
Gulp dist
Run gulp dist
to minify CSS, merge JS files into one file, compress images size and also updates the npm libraries to their available latest npm version.
gulp dist
Note
All npm libraries that are used in the Space template can be seen in the package.json
file.
Autoprefixer
Space 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.