monkeycode/microsite-template

Installs: 11

Dependents: 0

Stars: 2

Watches: 1

Language: JavaScript

v0.1.4 2014-09-02 09:08 UTC

README

Build Status

A bootstrapped Silex/Javascript setup. Targeted at small sites and for use as a JS playground.

The purpose of this template is mainly to provide preconfigured Javascript, Less, and Testing toolchains along with a basic Silex/Twig setup. While you can easily remove, add, or modify individual features, it may make sense to take a look at other approaches that are more focused on Silex itself if you are not planning to use at least some of these tools.

The main components are:

  • Silex to tie everything together and to provide Twig support.
  • gulp.js as a JS build system
  • browserify to handle JS components
  • AngularJS as a JS Framework (can be easily removed if not needed)
  • Less for CSS handling
  • Behat configured to use PhantomJS for functional testing

Requirements

To install, build, and test the project, you will need the following tools:

  • Composer
  • Node.js
  • npm
  • Bower
  • A global install of gulp
  • PhantomJS (optional)

Installation

$ composer create-project monkeycode/microsite-template myProject
$ cd myProject
$ npm install
$ bower install

Where to find what

All non-PHP code is located in /resources, all PHP files in src.

  • /resources/js: Javascript application files (note that library files are under /node_modules because of the napa install).
  • /resources/less: Less files. Already includes imports for Bootstrap v3.
  • /resources/views: Twig templates.
  • /src/app.php: Silex application setup.
  • /src/controllers.php: Controllers & routing.
  • /config: Silex application configuration.
  • /web: Document root. Front controllers and generated JS/CSS assets.

Building

The provided basic gulpfile.js lets you run the following tasks:

  • gulp: Default task - watch both Less and Javascript sources for changes and rebuild assets on the fly for dev use.
  • gulp prod: Compile & minify Less and Javascript for production use.

Some additional tasks are available, but will generally be called implicitly as dependencies of the two previous tasks:

  • gulp less: Compile Less to CSS in /web/css/main.css.
  • gulp lint: Run JSHint on the Javascript files.
  • gulp js-dev-lib: Concatenate all vendor libraries separately from the application JS for dev use.
  • gulp js-dev-app: Concatenate all scripts separately from the vendor libraries for dev use.
  • gulp dev: Runs less, js-dev-lib, and js-dev-lib.

Testing

A sample test is provided in Behat, and configured for use with PhantomJS. The suite can be run locally by calling ./testlocal.sh.