trykickoff / generator-kickoff Goto Github PK

View Code? Open in Web Editor NEW

9.0 10.0 1.0 772 KB

:tennis: Yeoman generator for the Kickoff framework

Home Page: http://trykickoff.github.io/learn/yeoman.html

License: MIT License

JavaScript 28.45% HTML 26.48% CSS 45.08%

yeoman kickoff yeoman-generator generator-kickoff front-end front-end-framework javascript

generator-kickoff's Introduction

Yeoman generator for the Kickoff framework

Using our Yeoman Generator is the best and fastest way to get Kickoff each time you want to start a new project. It will ask you a few questions and then build a custom version of Kickoff version 6 for your needs.

What is Yeoman?

Yeoman helps you kickstart new projects, prescribing best practices and tools to help you stay productive. Yeoman is open-source but is maintained by a number of people from Google.

We have created a generator that once installed, allows you to create a custom build of Kickoff whenever you need.

Installation

Install Yeoman

If you haven't installed Yeoman yet, run this command in your terminal:

npm install -g yo

Install the generator

To install generator-kickoff from npm, run:

npm install -g generator-kickoff

Install them both :)

npm install -g yo generator-kickoff

Finally, initiate the generator:

yo kickoff

The Kickoff generator asks for this information:

Project name
Description
Developer's names?
Features
Does this project support IE8?
Include Kickoff's styleguide?
Use Kickoff Statix for static templating and rapid prototyping?
Use Grunticon?
Use Browserify to bundle your Javascript?
Choose your javascript namespace (only seen if above question is false)
Which javascript libraries would you like to use?
jQuery v1.x
jQuery v2.x
trak.js - Universal event tracking API
Swiftclick - Eliminates the 300ms click event delay on touch devices
Include some Javascript polyfills/shims? (These are generated by the grunt shimly command)
Use Modernizr?

The repo and more information can be found at github.com/TryKickoff/generator-kickoff

If you'd like to get to know Yeoman better check out the complete Getting Started Guide.

License

MIT License

generator-kickoff's People

Contributors

Stargazers

Watchers

Forkers

gitter-badger

generator-kickoff's Issues

How to improve maintainability?

Hi guys, with all the options that this generator now provides it is becoming increasingly hard to maintain. Does anyone have any solutions to my if-statement nightmare? See some examples below:

Excerpt from _package.json

    "devDependencies": {
        "chotto": "^0.1.0",
        <% if (jsLibs.indexOf('cookies') != -1) {%>"cookies-js": "^1.2.1",<% } %>
        "glob": "^5.0.5",
        "grunt": "^0.4.5",
        "grunt-autoprefixer": "^3.0.0",
        "grunt-browser-sync": "^1.9.2",
        "grunt-contrib-clean": "^0.6.0",
        "grunt-contrib-copy": "^0.8.0",
        "grunt-contrib-imagemin": "^0.9.4",
        "grunt-contrib-jshint": "^0.11.1",
        "grunt-contrib-uglify": "^0.9.1",
        "grunt-contrib-watch": "^0.6.1",
        "grunt-csso": "^0.7.1",
        "grunt-grunticon": "^2.1.6",
        "grunt-newer": "^1.1.0",
        "grunt-photobox": "^0.8.1",
        "grunt-sass": "^0.18.1",
        "grunt-scss-lint": "^0.3.6",
        "grunt-shimly": "^0.0.7",
        "imagemin-gifsicle": "^4.1.0",
        "imagemin-mozjpeg": "^5.0.0",
        "imagemin-pngquant": "^4.1.0",
        <% if (jsLibs.indexOf('jquery1') != -1) {%>"jquery": "^1.11.1",<% } %><% if (jsLibs.indexOf('jquery2') != -1) {%>"jquery": "^2.1.1",<% } %>
        "load-grunt-configs": "^0.4.3",
        "load-grunt-tasks": "^3.1.0"<% if (jsLibs.indexOf('swiftclick') != -1) {%>,
        "swiftclick": "^1.1.5"<% } %><% if (jsLibs.indexOf('trak') != -1) {%>,
        "trak.js": "^0.4.0"<% } %><% if (statix == true) {%>,
        "assemble": "^0.4.42"<% } %><% if (browserify == true) {%>,
        "grunt-browserify": "^3.3.0",
        "uglifyify": "^3.0.1"<% } %>
    }

Excerpt from _watch.js:

        js: {
            files: [
            <% if (browserify == true) {%>
                '<%%=config.srcDir%>/js/**/*.js'<% if (statix == true) {%>,
                '!<%%= config.statix.dir%>/assets/js/dist/**/*.js'<% } %>
            <% } else { %>'<%%=config.js.fileList%>'<% } %>
            ],
            tasks: [
            <% if (browserify == true) {%>'browserify:dev'<% } else { %>
                'uglify',
                'newer:copy:modernizr'<% } %><% if (statix == true) {%>,
                'copy:js'<% } %>
            ],
            options: {
                interrupt: true,
                spawn: false
            }
        },

Excerpt from _config.js:

        fileList : [
            <% if (jsLibs.indexOf('jquery1') != -1 || jsLibs.indexOf('jquery2') != -1) {%>'./node_modules/jquery/dist/jquery.js',<% if (jsLibs.indexOf('jquery1') != -1) {%> /* jQuery v1.x */<% } %><% if (jsLibs.indexOf('jquery2') != -1) {%> /* jQuery v2.x */<% } %><% } %>
            <% if (shims === true) {%>'<%%=config.srcDir%>/js/helpers/shims.js',<% } %>
            '<%%=config.srcDir%>/js/helpers/console.js',<% if (jsLibs.indexOf('swiftclick') != -1) {%>
            './node_modules/swiftclick/js/libs/swiftclick.js',<% } %><% if (jsLibs.indexOf('trak') != -1) {%>
            './node_modules/trak.js/dist/trak.js',<% } %><% if (jsLibs.indexOf('cookies') != -1) {%>
            './node_modules/cookies-js/dist/cookies.js',<% } %>
            '<%%=config.srcDir%>/js/script.js'
        ]<% } %>

cc @nicbell @ashleynolan

Updating styleguide css with statix

We need to include a line of code to ensure the styleguide page auto updates when the watch task is being run with Statix.

The line that needs to be added should be at:
https://github.com/tmwagency/kickoff/blob/master/_grunt-configs/watch.js#L21

and it should add – 'copy:css' – much like the watch:scss task has above it, to ensure the css gets copied to the dist directory once compiled.

Change css naming in assets

Currently (after v5 kickoff update), the final compiled CSS file is named after the project, rather than as kickoff.css.

I would prefer it stayed the same across projects, especially as this can produce weirder results on ocassion – like when the project name is lengthy.

Know this is a bit of an opinion/preference thing, but would it be ok to change this back to the standard kickoff.css as default – allowing people to then change the name in the config?

Thoughts @mrmartineau ?

Generator updates from v6.0.0 of Kickoff

Add Modernizr question
Update scss
Ensure all changes from TryKickoff/kickoff#60 are added

More to come

Any plan for v.8?

First of all: Awesome project! Thanks.
A note: the latest documentation is all about version 8, but the generator build a v6.
For example, some variables listed in http://trykickoff.com/learn/checklist.html aren't present.
Also, the workflow is builded around grunt and doc refer to gulp.
Users can become confused.
Can i help?

A small addition to the grunt-configs/server.js ?

Hi,

Just a suggestion for a small addition to grunt-configs/server.js (unless you excluded it with a purpose :)
The current config is:

    assemble: {
        options: {
********************** removed ******************
        },

        default: {
            files: [{
                cwd: './<%= config.statix.dir%>/src/templates/pages/',
                dest: '<%= site.destination %>',
                expand: true,
                src: ['**/*.hbs']
            }]
        }
    }
};

Shouldn't be as below (added .md to src) in order assemble to pick up the *.md files?

        default: {
            files: [{
                cwd: './<%= config.statix.dir%>/src/templates/pages/',
                dest: '<%= site.destination %>',
                expand: true,
                src: ['**/*.{hbs,md}']
            }]
        }

The watch config is fine (.md is included). :)

Maximum call stack size exceeded error

Hi,

Thank you for the fantastic generator. Nice to see an yo generator that combines
a good framework with assemble.

Just installed on a Linux and everything looks fine so far expect a small issue
when using grunt serve:

Warning: watch ENOSPC
(node) warning: Recursive process.nextTick detected. This will break in the next version of node. Please use setImmediate for recursive deferral.
***********
Fatal error: Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded

I guess it is related to this:
http://gruntjs.com/frequently-asked-questions#why-am-i-getting-a-maximum-call-stack-size-exceeded-error
but I just couldn't find which task causes the issue.
Maybe you would have some idea? :)

Including a JS test framework

On the back of the discussion on the standalone Kickoff build, will look to implement this as part of the generator.

Am planning on doing some work on testing frameworks at JE in December, so should be more informed as to what to include then and will look to use that in Kickoff then.

Generator questions

Hi guys, I have been updating the generator's questions and need you opinion on them.

Are they the right questions? Should we add more; should we remove some; should we change any?
What should the default values be?

[
    {
        name: 'projectName',
        message: 'Project name',
        default: 'Your project name'
    },
    {
        name: 'projectDescription',
        message: 'Project description',
        default: 'Your project description'
    },
    {
        name: 'devNames',
        message: 'What are the project developer\'s names?',
        default: 'The Avengers'
    },
    {
        name: 'oldIE',
        type: 'confirm',
        message: 'Does this project support IE8?',
        default: true,
        store: true
    },
    {
        name: 'styleguide',
        type: 'confirm',
        message: 'Include Kickoff\'s styleguide?',
        default: true,
        store: true
    },
    {
        name: 'jsNamespace',
        message: 'Choose your javascript namespace',
        default: 'KO',
        store: true
    },
    {
        name: 'statix',
        type: 'confirm',
        message: 'Do you want to use Kickoff Statix?',
        default: false,
        store: true
    },
    {
        name: 'browserify',
        type: 'confirm',
        message: 'Do you want to use Browserify?',
        default: false,
        store: true
    },
    {
        name: 'jsLibs',
        type: 'checkbox',
        message: 'Which Javascript libraries would you like to use?',
        choices: [
            {
                name: 'jQuery 1.x - only choose one jQuery version',
                value: 'jquery1'
            },
            {
                name: 'jQuery 2.x - only choose one jQuery version',
                value: 'jquery2'
            },
            {
                name: 'trak.js - Universal event tracking API',
                value: 'trak'
            },
            {
                name: 'Swiftclick - Eliminates the 300ms click event delay on touch devices',
                value: 'swiftclick'
            },
            {
                name: 'Cookies - JavaScript Client-Side Cookie Manipulation Library',
                value: 'cookies'
            }
        ],
        store: true
    },
    {
        name: 'grunticon',
        type: 'confirm',
        message: 'Would you like to use Grunticon?',
        default: true,
        store: true
    },
    {
        name: 'shims',
        type: 'confirm',
        message: 'Do you want to include the default Javascript shims? (These are generated by the \'grunt shimly\' command)',
        default: false,
        store: true
    }
];

By the way, these are in the Inquirer.js format that Yeoman uses

cc @nicbell @ashleynolan @CiaranPark @munkychop @AshleyJSheridan