node package manager


Zephir GULP Workflow

This is the default Gulp workflow Zephir is working with.

You'll need the following tools preinstalled

If you got permission errors while installing gulp-cli you might use sudo but it is not recommended.


All plugins are listed below.

Node plugins

Gulp plugins

PostCSS plugins



First of all, you need at least these two dependencies in your project:


"dependencies": {
    "gulp": "^3.9.1",
    "zephir-gulp-workflow": "~1.0.3"

Please note that the gulp version in the example above may vary.

You can accomplish that by using the following commands:

npm install --save gulp
npm install --save zephir-gulp-workflow@"~1.0.3"

On Ubuntu the latest versions of nodejs is not available. Install nodejs manually Example install guide


You'll need to set up a simple gulpfile.js:

var zephirWorkflow = require('zephir-gulp-workflow');
zephirWorkflow( require('gulp'), {} );


The second parameter of zephirWorkflow in the example above are options. They'll merge into the existing config object.


zephirWorkflow( require('gulp'), {
    "configs": {
        "baseFontSize": 18,
    "source": {
        "filesToWatch": [
} );

Default config:

    "configs": {
        "enableBrowserSync": true,
        "browserSyncHost": "localhost",
        "pxtorem": {
            "baseFontSize": 16,
            "selectorBlackList": [/^html$/]
    "source": {
        "filesToWatch": [
        "styles": [
        "scripts": [
    "dest": {
        "local": {
            "styles": "local/css/",
            "scripts": "local/js/"
        "dev": {
            "styles": "dev/css/",
            "scripts": "dev/js/"
        "prep": {
            "styles": "prep/css/",
            "scripts": "prep/js/"
        "prod": {
            "styles": "prod/css/",
            "scripts": "prod/js/"


In order to start the gulp workflow, run gulp watch command or for a defined environemnt run gulp watch --prod.


This gulp workflow supports 4 enviroments. These enviroments change the place the compiled stuff is put in.

Enviroment Use case Default folders
--local (default) Local development. Will not be pushed into git repo to prevent merge conflicts. local/
--dev Development. Only visible to developer and designer (agency). Example domain: dev.[domain].[tld] dev/
--prep Preproduction. Visible to the two above and the customer. Example domain: prep.[domain].[tld] prep/
--prod Production / Live. Visible to everyone. prod/

These are all just examples. You don't have to use the enviroments that way!