How can I modularize the Yeoman + Bootstrap + Sass generator?

Question

I am using Yeoman to auto-generate a project using Bootstrap & Sass. The one thing I am having trouble with is changing the default structure of the project to be more modularized. The generator is here on GitHub.com

Currently the application is structured like so:

/app
    /images/
    /scripts/
        /controllers/
            main.js
        app.js
    /styles/
        main.css
    /views/
        main.html
index.html

I'd rather have it separated into individual directives with a core(shared) folder, so that it would be like so:

/app/
    /directives/
        /home/
           home.html
           homeCtrl.js
           home.sass
index.html
app.module.js
app.route.js

But I am having difficulty figuring out the best method of modularizing the project. Am I supposed to be creating the file structure that I want with the pre-generated application, and then edit it within the Gruntfile.js? Is there a more streamlined way of doing this, or am I SOL doing it manually?

Answer 1

The best and elegant way is to follow their guideline around creating a customised template which you can use to generate apps based on it.

However, if this is a one off thing you probably won't need to bother unless you want to create something decent and share it with community, so other people can use your template and create their app with modularised structure.

Even if you don't try to write your own template you can still read the guide and modify the initial template generator to change the file structure before creating the app for you.

Here is another good article around template customisation:

https://scotch.io/tutorials/create-a-custom-yeoman-generator-in-4-easy-steps

Answer 2

This project appears to be abandoned. The most recent change is a year ago, there are 67 issues and 18 pull requests. It's probably only generating Angular 1.x code as well, and that may not be "up to date" with current Angular 1 best practices.

You can, of course, fork the project and make changes yourself, and even take over maintenance of it, but you might be better to look at something like Angular-cli, which generates Angular2 code, and is being actively developed.