Gulpfile: The Basics

The Gulpfile is divided into 4 main sections: One that handles SASS to CSS compilation, JSX to JS compilation, WebFont compilation and the Development server for quick testing and debugging.

We'll handle each section in its own individual doc pages later. However, before we get to that lets discuss the environment options provided:

Option Functionality
--name
(Optional, defaults to app)
Usage: gulp --name somenamehere

A name for your project/app. The necessary file structures need to exist before you can call this command. Consult the documentation on how to scaffold one if you're starting a blank project.

By default we ship a demo project and a app starter project.

Use the demo project as a reference while creating your own project

--rtl
(Optional, defaults to false)
Usage: gulp --rtl

A switch that automatically generates an RTL equivalent of the compiled CSS files using Twitter's css-flip. This is turned off by default. To access the RTL resource point your browser to http://localhost:8080/rtl/#/

--port
(Optional, defaults to 8080)
Usage: gulp --port 5000

Development server port.

--whost
(Optional, defaults to localhost)
Usage: gulp --whost virtual.hostname

Webpack dev server hostname.

--wport
(Optional, defaults to 8079)
Usage: gulp --wport 4999

Webpack dev server port.

--production
(Optional, defaults to false)
Usage: gulp --production

A boolean flag like --rtl. Run this when you are done with development as it compiles, minifies and bundles all the source CSS and JS files. For bundling external plugins please consult Gulpfile.js > External Plugins doc page.

Here is an image of the gulp command (run with above options) executed in a terminal: