All Projects → johnfmorton → Generator Buildabanner

johnfmorton / Generator Buildabanner

Licence: mit
Yeoman workflow to get a standard or DoubleClick banner started quickly.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Generator Buildabanner

generator-yeomify-landing
Yeoman generator for landing project powered by Gulp
Stars: ✭ 29 (-40.82%)
Mutual labels:  gulp, yeoman
Weflow
A web developer workflow tool by WeChat team based on tmt-workflow, with cross-platform supported and environment ready.
Stars: ✭ 3,225 (+6481.63%)
Mutual labels:  gulp, workflow
generator-phaser-browserify
A generator for Phaser using Gulp and Browserify
Stars: ✭ 36 (-26.53%)
Mutual labels:  gulp, yeoman
bootstrap-gulp-starter-template
Bootstrap 4 + Gulp 4 + Panini for improve front-end development workflow
Stars: ✭ 67 (+36.73%)
Mutual labels:  gulp, workflow
Wordpress Gulp Starter Kit
[NOT MAINTAINED] A starter kit for developing WordPress themes with Gulp.
Stars: ✭ 674 (+1275.51%)
Mutual labels:  gulp, workflow
generator-angular-pro
AngularJS project generator for scalable, enterprise-grade web and mobile applications
Stars: ✭ 43 (-12.24%)
Mutual labels:  gulp, yeoman
Generator Webappstarter
Quick start a web app for mobile.Automatically adjusts according to a device’s screen size without any extra work.
Stars: ✭ 298 (+508.16%)
Mutual labels:  gulp, yeoman
kibe
A simple Yeoman Generator to start projects with the most common tasks of my workflow using Gulp.
Stars: ✭ 33 (-32.65%)
Mutual labels:  gulp, yeoman
Fastshell
Fiercely quick front-end boilerplate and workflows, HTML5, Gulp, Sass
Stars: ✭ 563 (+1048.98%)
Mutual labels:  gulp, workflow
Generator Webapp
A gulp.js generator for modern webapps
Stars: ✭ 3,784 (+7622.45%)
Mutual labels:  gulp, yeoman
generator-veams
Scaffold modern frontend web apps or web pages with a static site generator (Assemble or Mangony), Grunt and/or Gulp, Sass and Bower. Use modern frameworks like Bourbon, Bootstrap or Foundation and structure your JavaScript with ES Harmony support.
Stars: ✭ 45 (-8.16%)
Mutual labels:  gulp, yeoman
Generator Gulp Express Webapp
Yeoman generator for building a simple web app using express + gulp. This project contains proper project and build structure to be easily extensible.
Stars: ✭ 8 (-83.67%)
Mutual labels:  gulp, yeoman
generator-vars-jekyll
Generator for raw web app with CircleCI, Jekyll, Webpack, Express + more.
Stars: ✭ 18 (-63.27%)
Mutual labels:  gulp, yeoman
generator-vintage-frontend
Modern front-end workflow
Stars: ✭ 15 (-69.39%)
Mutual labels:  gulp, yeoman
generator-sf
Yeoman generator that scaffolds out a Symfony PHP app including Browsersync, various CSS preprocessors, jspm, webpack, browserify and Service Worker
Stars: ✭ 14 (-71.43%)
Mutual labels:  gulp, yeoman
genesis-sample-task-runner
Gulp workflow for Auto prefixing, Sass compiling, CSS minification, automatic browser reloading and more
Stars: ✭ 23 (-53.06%)
Mutual labels:  gulp, workflow
Weapp Workflow
基于Gulp 的微信小程序前端开发工作流 💯
Stars: ✭ 241 (+391.84%)
Mutual labels:  gulp, workflow
generator-fountain-react
Yeoman 'fountain' generator to start a webapp with React
Stars: ✭ 36 (-26.53%)
Mutual labels:  gulp, yeoman
Generator Jekyllized
A Yeoman generator for Jekyll to rapidly build sites using Gulp
Stars: ✭ 332 (+577.55%)
Mutual labels:  gulp, yeoman
Feflow
🚀 A command line tool aims to improve front-end engineer workflow and standard, powered by TypeScript.
Stars: ✭ 942 (+1822.45%)
Mutual labels:  workflow, yeoman

generator-buildabanner

This is a Yeoman generator to get a starter standard, AdWords, Sizmek or DoubleClick banner scaffolded out quickly.

Version 2

After 37 releases, Build A Banner has jumped to the 2.0 version. There was never a version 1 in all the previous 37 releases. It had always been version 0 although at some point it should have graduated to version 1. It just didn't happen.

In the Version 2, the Yeoman generator has been rewritten. It has moved to Gulp 4. How you use BAB should remain basically the same though. There have been a lot of updating of the tools behind the scenes to keep current.

Let me show you how this works.

Click the image for a video walk through.

Video Walk Thru

Notes

This is an evolving work in progress. I refine it as I discover better processes. It is an opinionated workflow to speed the production of building a banner. It includes options for HTML banners for standard, AdWords, or DoubleClick HTML banners.

Basic usage

You may install this Yeoman workflow through npm.

npm install -g generator-buildabanner

You may also link this workflow locally into your own NPM installation using npm link when you are in the generator-buildabanner directory from within your terminal.

To get started use yo buildabanner and answer the prompts.

gulp commands

gulp : This is the most basic command. It will spin up a server in your 'dev' folder. It will compile your SCSS into CSS. It will also watch for changes in the index.html, scripts.js and style.scss files and reload Google Chrome.

gulp check : This command is useful to check for some basic consistency in your banner. It will confirm that the metadata ad.size matches the size of your backup image. It also checks to see if you have a single image in the backImage directory.

gulp build : This command will create a 'dist' folder and fill it with minified versions of your files. It will also compress these same files into a zip file in the 'delivery' folder. NOTE: If you've used files starting with "comp", like "comp1.png" or "comp2.jpg", which can be used for positioning elements in your banner, they will not be included in your 'dist' folder. This is important to know if you happen to have a file called "competition.jpg" in your banner build because it will excluded.

gulp archive : This command will create an 'archive' folder and a single zip file that contains the contents of your dev, dist and delivery directories plus your package.json, gulpfile.js and your Sublime Text project file. These are the necessary files to archive your banner once it is finished. (Your node_modules directory can be recreated later with npm install.)

gulp ba : This is a shortcut for running check, build, archive in sequence.

gulp man : Will provide info on the available comands.

About offline usage

The workflow offers to download a copy of the Greensock library for off-line use. Since Greensock is offered via npm, it will be placed in the 'node_modules' folder.

Working on a DoubleClick banner requires that you have an Internet connection to load the Enabler.js. The workflow offers to download a copy of the Enabler.js. If you choose to do this, it places a copy of Enabler.js in a folder called "offline". (This option is only present if you choose to build a DoubleClick banner.)

Both of these prompts for offline use default to "yes". The downloaded code is not referenced in the HTML though. You will need to manually update the HTML to load them. I've included the download of these files because I sometimes find that I need to work on these projects when having a stable Internet connection isn't possible. Having the files downloaded into my project is a failsafe for those situations.

Roadmap

Below are some goal posts for the future of this workflow.

  1. I plan on adding an option to inline the CSS and JS into the main index.html file.

Tips

Be sure to check out the gulp check command. If you make resizes by duplicating a banner’s folder the metadata ad.size value is easy to overlook and this will help you catch that error. That's what prompted the creation of that command.

But it doesn't work

Be sure you have the latest Gulp command line interface installed. See the gulp-cli homepage.

npm install gulp-cli -g

You may also need to update your Yeoman installation as well.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].