node package manager

zephir-gulp-workflow

Zephir GULP Workflow

This is the default Gulp workflow Zephir is working with.

You'll need the following tools preinstalled

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

Plugins

All plugins are listed below.

Node plugins

Gulp plugins

PostCSS plugins

How-To

Dependencies

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

packages.json

"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

Gulpfile

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

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

Options

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

Example:

zephirWorkflow( require('gulp'), {
    "configs": {
        "baseFontSize": 18,
    },
    "source": {
        "filesToWatch": [
            "**/*.php"
        ],
    }
} );

Default config:

{
    "configs": {
        "enableBrowserSync": true,
        "browserSyncHost": "localhost",
        "pxtorem": {
            "baseFontSize": 16,
            "selectorBlackList": [/^html$/]
        }
    },
 
    "source": {
        "filesToWatch": [
            "../**/*.php",
            "../**/*.html"
        ],
        "styles": [
            "scss/**/*.scss"
        ],
        "scripts": [
            "js/libs/1/*.js",
            "js/libs/2/*.js",
            "js/libs/3/*.js",
            "js/libs/*.js",
            "js/*.js"
        ]
    },
 
    "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/"
        }
    }
}
 

Run

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

Enviroments

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!