geraldgrafik / generator-doubleclick-studio

A boilerplate for DoubleClick Studio ads

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

generator-doubleclick-studio

A generator for Yeoman which scaffolds a Doubleclick Studio HTML5 Ad

Getting Started

What is Yeoman?

Trick question. It's not a thing. It's this guy:

Basically, he wears a top hat, lives in your computer, and waits for you to tell him what kind of application you wish to create.

Not every new computer comes with a Yeoman pre-installed. He lives in the npm package repository. You only have to ask for him once, then he packs up and moves into your hard drive. Make sure you clean up, he likes new and shiny things.

$ npm install -g yo

Yeoman Generators

Yeoman travels light. He didn't pack any generators when he moved in. You can think of a generator like a plug-in. You get to choose what type of application you wish to create, such as a Backbone application or even a Chrome extension.

To install generator-doubleclick-studio from npm, run:

$ npm install -g generator-doubleclick-studio

Because we are using private repository, the above command won't work. The work around is this:

$ npm install /your/folder_path/to/generator-doubleclick-studio

Finally, initiate the generator:

$ yo doubleclick-studio

After entering the above command line, it will ask with these few questions:

[?] Which type do you want to create? In-page // (types are In-page and Expanding)
[?] Width? 320
[?] Height? 250
[?] Would you like to enable TweenLite.js? No

This will:

  1. Yeoman will scaffold your template
  2. Create .css with proper width/height
  3. will include or not the TweenLite.js.

You can now start developing in folder /dev.

Contents

  • /dev: Development directory
  • /node_modules: node.js module
  • /pub: Publishing catalog, generated by the "grunt build", for uploading to DC platform
  • package.json: node.js dependencies
  • Gruntfile.js: grunt profile

Test

To test your build:

$ grunt serve

This will:

  1. open browser, with link: http://localhost:9000/.
  2. Every edit/save you made inside of your project folder will automatically transmit to your browser(s).
  3. You can test in multiple browser in multiple devices.

Build

To build your project for uploading to DC platform.

$ grunt build

This will:

  1. minify your .js and .css files
  2. optimize your .png, .gif, .jpg files
  3. put your ready for publish files in /pub folder.

Getting To Know Yeoman

Yeoman has a heart of gold. He's a person with feelings and opinions, but he's very easy to work with. If you think he's too opinionated, he can be easily convinced.

If you'd like to get to know Yeoman better and meet some of his friends, Grunt and Bower, check out the complete Getting Started Guide.

License

MIT License

About

A boilerplate for DoubleClick Studio ads

License:MIT License


Languages

Language:JavaScript 69.3%Language:HTML 15.5%Language:CSS 15.2%