Developing

So you want to help with the development of Titan Framework? This page will explain the development environment used for Titan and how you can get started.

The Tools

Basically we develop using these awesome tools:

• VVV
• NPM / Node.js
• PHP Code Sniffer
• Bower
• Gulp
• Gettext
• Ruby Sass

Here's a bash script that you can use to install everything you need (except for VVV). After you execute the script, you can run run gulp, unit testing and build Titan Framework right away. The script is for Macs only, if you're developing in Windows, you'll have to set this up yourself.

Make sure you have a master copy of Titan Framework first, then create an install.sh script containing this:

# FILE="/tmp/out.$$"
# GREP="/bin/grep"

# Make sure only root can run our script
if [ "$(id -u)" == "0" ]; then
   echo "This script must be run as a normal user" 1>&2
   exit 1
fi

# Make sure this can only run outside VirtualBox / VVV
if [ "$(dmesg | grep VirtualBox || echo '1')" != '1' ]; then
	echo "This script must be run outside VirtualBox / VVV" 1>&2
	exit 1
fi

# Install Homebrew (needed for gettext & node)
which brew || ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

# Install node.js
npm -v || sudo brew install node

# Install bower
bower -v || sudo npm install -g bower

# Install VASSH for sending commands to VVV
vassh --help || brew install vassh

# Install pear if not installed
pear list || ( curl -O http://pear.php.net/go-pear.phar && sudo php -d detect_unicode=0 go-pear.phar && sudo rm go-pear.phar )

# Install Ruby Sass since we need it for compiling sass (gulp-ruby-sass)
gem list -i sass || sudo gem install sass

# Install Gulp
gulp -v || sudo npm install -g gulp

# Install all the node packages we need for development
npm install -d

# Install PHP Code Sniffer
pear list PHP_CodeSniffer || sudo pear install PHP_CodeSniffer

# Install WordPress Standards for PHPCS
rm -fR wpcs
git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git wpcs && sudo cp -r wpcs/WordPress* $(pear config-get php_dir)/PHP/CodeSniffer/Standards && rm -fR wpcs && phpcs -i

# Sometimes PHPCS fails, make it work: from http://viastudio.com/configure-php-codesniffer-for-mac-os-x/
phpcs -i || ( sudo mkdir -p /Library/Server/Web/Config/php && sudo touch /Library/Server/Web/Config/php/local.ini && echo 'include_path = ".:'`pear config-get php_dir`'"' | sudo tee -a /Library/Server/Web/Config/php/local.ini )

# Install gettext for tranlations
brew list gettext || brew install gettext

Make sure the script is executable, then run it from the command line:

chmod a+x install.sh
./install.sh

(It will ask for your password sometimes)

Developing

So now you have the tools. To start developing, open up your terminal, cd to the directory where you placed Titan Framework, then run Gulp watch:

gulp watch

And start editing the code with your favorite IDE.

Gulp watch listens to the files you're changing and performs actions depending on the files you modified. For example, modifying Javascript files will compile, minify and uglify them. And modifying PHP scripts will prompt WordPress coding standards checks.

If you're interested in how this is done, you can check out our gulpfile.js

Building the Clean Plugin

The Github copy of Titan Framework contains a lot of files needed during development, but aren't necessary for the final version that will go inside the WordPress repo.

You can build a clean copy of Titan Framework using Gulp with the command:

gulp build

Doing that creates a dist folder along with a Titan-Framework.zip file. This zip file contains the clean copy of the framework and it is also the same one committed into the WordPress plugin repository / SVN.