A generator for Yeoman
A generator for 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 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-boagen from npm, run:
$ npm install -g generator-boagen
Finally, initiate the generator:
$ yo boagen
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.
This is a Yeoman Generator which acts as the starting point for all new BOA websites.
This generator depends on some excellent front-end-friendly command line tools. Don't be scurrred. To use this generator you must have NodeJS, Git, and Yeoman installed and properly configured. If you haven't done that yet please do it now. I'll wait.
Once you have the dependencies installed and configured, follow these steps to scaffold out a new project, pressing ENTER after each command. In the terminal:
$ cd path/to/new/project/folder
Did you follow the steps from Yeoman above? If not you'll need to do this
$ npm install -g generator-boagen
$ yo boagen
Then, Yeoman will ask you 3 questions:
- The name of this project (spaces allowed).
- Do you want to include the Gumby Framework?
- Do you want to include the extensions to the Gumby Framework?
Once these questions have been answered, the project and its dependecies will install. Go get a coffee while this happens.
To start using the amazingness of Grunt, go back to your command line and execute the following command:
$ grunt serve
You are now going to see all of your changes update on the fly, as you make them.
The power of all of this is super obvious when you're developing a new project. The benefits are:
- Automatically start with the latest CSS/LESS Framework files made by Todd.
- Using the GRUNT SERVE task, all open windows will update as you change any html, less, or js file. This means no switching to a window to refresh, this also means that you can watch different browsers update at the same time.
- LESS files are automatically compiled, and if there are errors the terminal will say where the error is.
- Using the GRUNT SERVE task, there is a server started on your machine which runs the project. This minimizes cross-domain problems, and gives you a live shot of how the page will act.
If you want to get some bonus efficiency points, I have build the following tasks:
$ grunt build
When this command is executed a number of efficiency jobs get done. You'll notice in the base index.html file some weird commented areas:
<!-- build:js scripts/main.js --><script src="scripts/main.js"></script><!-- endbuild -->
This is an example of a build block. What this says is that all of the files in this build block will get concatenated into one main.js file in the scripts folder. They get concatenated in the order that they appear here. There are a couple more of these build blocks in the file (css, js).
NOTE If you plan on importing most of your files and code into a CMS (Kentico, for example), a lot of this build task may be useless. What would be of benefit in that situation would be to set up a new task to just concatenate the files that you want, and perhaps uglify certain ones.
This brings us to the next task...
$ grunt cms
I have set up one last task which takes a few files that will for sure be imported into a CMS the way they are, and copied these into a new folder named cms-files. This is one that will likely evolve into something that includes more files when we work with this process some more. But it's there for you to use, look at, and play with.
In order to keep our projects and process up to date, use this generator. Do you have a good piece of workflow that you think everyone would benefit from? Open an issue on this repository, or create a pull request to add it in. Keeping local files and copying and pasting is bad, source control is good. Using git we can keep track of the changes made as well as see the evolution of this project generator. Not to mention we will be able to ensure that every new project start the same, keeping our websites consistent and up to date.
We don't want to have a bunch of versions of Todd's beautiful framework running around each with a life of their own.