Eduardo Garcia bio photo

enzo

Eduardo Garcia

Knowmad by definition

Location: Costa Rica

Twitter Facebook  QQ交谈 Google+ Github LinkedIn Feed

Yeoman MarionetteJS + Drupal generator

This generator create a structured HTML 5 application generating modules using RequireJS, includes Grunt support to automate tasks.

Compass is used to generate CSS using bootstrap-sass.

The HTML 5 application is defined using a MVC pattern implemented with MarionetteJS and Backbone.Drupal for data model.

Includes scaffolding commands to create templates, models, collections, views and layouts.

Application Structure

├── Gruntfile.js
├── bower.json
├── node_modules
├── package.json
└── web ( Configurable: web is recommended)
    ├── 404.html
    ├── favicon.ico
    ├── images
    ├── index.html
    ├── js
        ├── scripts (application scripts)
    ├── models
    ├── robots.txt
    ├── scripts
    ├── styles
    ├── templates
    ├── vendor ( Configurable: vendor is recommended)
    └── views

Getting Started

Install Generator

First make sure you have Node, Npm, Yeoman, Bower, Mocha, phantomJS and Grunt installed.

Visit nodejs.org to install node and NPM

Install phantomJS with:

$ brew install phantomjs

Or visit http://phantomjs.org/

To install Yeoman, Bower and Grunt run:

$ npm install -g yo grunt-cli bower

Install mocha-phantomjs:

$ npm install -g mocha-phantomjs

Install mocha generator:

$ npm install -g generator-mocha-amd

Install Marionette Drupal generator

$ npm install -g generator-marionette-drupal

Create a Marionette Drupal project

Finally, initiate the generator in a empty folder

$ yo marionette-drupal

yeoman generator

You have to define where do you want the app installed web is recommended, also you have to define where do you want the Bower components installed vendor is recommended.

Execute sample application

The generator create a simple sample application using an empty model, simple view and render without region.

To execute the sample application you can use the PHP Built-in web server executing the following command.

$ php -S localhost:8080

After execute that command, you just need open the URL http://localhost:8080 and you will see a similar result as shown in following image.

yeoman sample application

The objetive of this sample application is just demostrate the environment is ready to work and you can use the Scaffolding commands to build your application.

Integration with Grunt

This generator provide a initial Grunt file to execute minimal tasks, you can run all tasks available with following command.

$ grunt

If you prefer you can execute any specific command among listed below.

Concat

$ grunt contact

Enable concat all JS files.

Todo: Configure the proper JS files and enable CSS files

Uglify

$ grunt uglify

Minify JS file combined in Contact tasks.

Todo: Configure minify for CSS files.

Imagemin

$ grunt imagemin

Optimize images in your project.

Compass

$ grunt compass

Enable process SASS files to generate CSS files in your project. This project include bootstrap-sass

Watch

$ grunt watch

Monitor when SASS files are modified to generate new CSS files.

Scaffolding

Generate a template

$ yo marionette-drupal:tmpl name

This command will create an empty template inside application folder [app_folder]/templates

Generate a Model

$ yo marionette-drupal:model name

This command will create a simple Backbone module to be used in combination with a View

Generate a View

$ yo marionette-drupal:view name [--with-template]

This command will create a Marionette ItemView, optionally is possible create a template with the same name of view auto related with this template.

When a template is related with a view, Twig.js is used to render the template.

ToDO

  • Improve Drupal Model Scaffolding command
  • Improve View Scaffolding command
  • Create Drupal Collection Scaffolding command
  • Create Region Scaffolding command
  • Create Layout Scaffolding command

Known Issues

When you are trying to create you application, the combination of dependencies between packages require you define what version os underscore you want to install and you will get a message similar to following image.

yeoman generator conflicts

If you only see the question mark symbol, without any indication, you need to change the log level of npm using the folowing command.

$ npm config set loglevel error