Working with Gulp

Learn how to included npm scripts to automate your time-consuming tasks in your development workflow with Gulp toolkit.

Quick Start

Block 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 Block s source files and Node. Follow these steps and you should be ready to rock:

  • 1. Download and install Node.js
  • 2. Installing Gulp.
  • 3. Working with Theme Folder
    • a. Installing NPM modules
    • b. Run Gulp
    • c. Build Production Files

1. Download and install Node.js

( Installtion in System )

Almost all tooling for modern JavaScript projects is based in Node.js. The download page has prebuilt installation packages for all platforms.

Node is bundled with npm, the package manager for JavaScript.

To verify the installation, open a new terminal window and run:

$ node --version
$ npm --version

2. Installing Gulp.js

( Global Installtion in System )

Please note, first Gulp should be installed globally and for that reason -g command is used.

$ npm install --global gulp-cli

To verify the installation, open a new terminal window and run:

$ gulp --version

3. Now Working with Theme Folder

Navigate to the root /Block directory and run npm install to install our local dependencies listed in package.json.

a. Installing NPM modules

First, change the command line path into your project where Block folder is located. if you have not done this before, you may check the following article to quick start, you may run package.json file by using the following command: 

$ npm install

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

b. Run Gulp

Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file. To try it out run: 

$ gulp

c. Build Production Files

Generates a /dist with all the production files. 

$ gulp build