Skip to content

Commit

Permalink
Add initial generator-webapp
Browse files Browse the repository at this point in the history
  • Loading branch information
addyosmani committed Feb 2, 2014
1 parent 999b615 commit 6dd842b
Show file tree
Hide file tree
Showing 27 changed files with 2,145 additions and 3 deletions.
10 changes: 10 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
temp/
16 changes: 16 additions & 0 deletions .jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"node": true,
"esnext": true,
"bitwise": false,
"curly": false,
"eqeqeq": true,
"eqnull": true,
"immed": true,
"latedef": true,
"newcap": true,
"noarg": true,
"undef": true,
"strict": false,
"trailing": true,
"smarttabs": true
}
7 changes: 7 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.npmignore
.editorconfig
.travis.yml
.jshintrc
.gitattributes
contributing.md
test
3 changes: 3 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
language: node_js
node_js:
- '0.10'
78 changes: 75 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,76 @@
generator-gulp-webapp
=====================
# Web app generator [![Build Status](https://secure.travis-ci.org/yeoman/generator-webapp.png?branch=master)](http://travis-ci.org/yeoman/generator-webapp) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)

WIP. Don't use just yet.
[Yeoman](http://yeoman.io) generator that scaffolds out a front-end web app.

![](http://i.imgur.com/uKTT2Hj.png)

## Features

* CSS Autoprefixing *(new)*
* Built-in preview server with LiveReload
* Automagically compile CoffeeScript & Compass
* Automagically lint your scripts
* Automagically wire up your Bower components with [bower-install](#third-party-dependencies).
* Awesome Image Optimization (via OptiPNG, pngquant, jpegtran and gifsicle)
* Mocha Unit Testing with PhantomJS
* Optional - Twitter Bootstrap for SASS
* Optional - Leaner Modernizr builds *(new)*

For more information on what `generator-webapp` can do for you, take a look at the [Grunt tasks](https://github.com/yeoman/generator-webapp/blob/master/app/templates/_package.json) used in our `package.json`.


## Getting Started

- Install: `npm install -g generator-webapp`
- Run: `yo webapp`
- Run `grunt` for building and `grunt serve` for preview [*](#serve-note)


#### Third-Party Dependencies

*(HTML/CSS/JS/Images/etc)*

Third-party dependencies are managed with [bower-install](https://github.com/stephenplusplus/grunt-bower-install). Add new dependencies using **Bower** and then run the **Grunt** task to load them:

```bash
bower install --save jquery
grunt bower-install
```

This works if the package author has followed the [Bower spec](https://github.com/bower/bower.json-spec). If the files are not automatically added to your index.html, check with the package's repo for support and/or file an issue with them to have it updated.

To manually add dependencies, `bower install depName --save` to get the files, then add a `script` or `style` tag to your `index.html` or an other appropriate place.


#### Grunt Serve Note

Note: `grunt server` was previously used for previewing in earlier versions of the project and is being deprecated in favor of `grunt serve`.


## Options

* `--skip-install`

Skips the automatic execution of `bower` and `npm` after scaffolding has finished.

* `--test-framework=<framework>`

Defaults to `mocha`. Can be switched for another supported testing framework like `jasmine`.

* `--coffee`

Add support for [CoffeeScript](http://coffeescript.org/).


## Contribute

See the [contributing docs](https://github.com/yeoman/yeoman/blob/master/contributing.md)

Note: We are regularly asked whether we can add or take away features. If a change is good enough to have a positive impact on all users, we are happy to consider it.

If not, `generator-webapp` is fork-friendly and you can always maintain a custom version which you `npm install && npm link` to continue using via `yo webapp` or a name of your choosing.


## License

[BSD license](http://opensource.org/licenses/bsd-license.php)
16 changes: 16 additions & 0 deletions app/USAGE
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
Description:
Creates a new basic front-end web application.

Options:
Twitter Bootstrap: Include Twitter Bootstrap for Sass

Example:
yo webapp [--coffee]

This will create:
Gruntfile.js: Configuration for the task runner.
bower.json: Front-end packages installed by bower.
package.json: Development packages installed by npm.

app/: Your application files.
test/: Unit tests for your application.
180 changes: 180 additions & 0 deletions app/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
'use strict';
var util = require('util');
var path = require('path');
var spawn = require('child_process').spawn;
var yeoman = require('yeoman-generator');
var chalk = require('chalk');


var AppGenerator = module.exports = function Appgenerator(args, options, config) {
yeoman.generators.Base.apply(this, arguments);

// setup the test-framework property, Gruntfile template will need this
this.testFramework = options['test-framework'] || 'mocha';
this.coffee = options.coffee;

// for hooks to resolve on mocha by default
options['test-framework'] = this.testFramework;

// resolved to mocha by default (could be switched to jasmine for instance)
this.hookFor('test-framework', {
as: 'app',
options: {
options: {
'skip-install': options['skip-install-message'],
'skip-message': options['skip-install']
}
}
});

this.options = options;

this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json')));
};

util.inherits(AppGenerator, yeoman.generators.Base);

AppGenerator.prototype.askFor = function askFor() {
var cb = this.async();

// welcome message
if (!this.options['skip-welcome-message']) {
console.log(this.yeoman);
console.log(chalk.magenta('Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to build your app.'));
}

var prompts = [{
type: 'checkbox',
name: 'features',
message: 'What more would you like?',
choices: [{
name: 'Sass with Compass',
value: 'includeCompass',
checked: true
}, {
name: 'Bootstrap',
value: 'includeBootstrap',
checked: true
}, {
name: 'Modernizr',
value: 'includeModernizr',
checked: true
}]
}];

this.prompt(prompts, function (answers) {
var features = answers.features;

function hasFeature(feat) { return features.indexOf(feat) !== -1; }

// manually deal with the response, get back and store the results.
// we change a bit this way of doing to automatically do this in the self.prompt() method.
this.includeCompass = hasFeature('includeCompass');
this.includeBootstrap = hasFeature('includeBootstrap');
this.includeModernizr = hasFeature('includeModernizr');

cb();
}.bind(this));
};

AppGenerator.prototype.gruntfile = function gruntfile() {
this.template('Gruntfile.js');
};

AppGenerator.prototype.packageJSON = function packageJSON() {
this.template('_package.json', 'package.json');
};

AppGenerator.prototype.git = function git() {
this.copy('gitignore', '.gitignore');
this.copy('gitattributes', '.gitattributes');
};

AppGenerator.prototype.bower = function bower() {
this.copy('bowerrc', '.bowerrc');
this.copy('_bower.json', 'bower.json');
};

AppGenerator.prototype.jshint = function jshint() {
this.copy('jshintrc', '.jshintrc');
};

AppGenerator.prototype.editorConfig = function editorConfig() {
this.copy('editorconfig', '.editorconfig');
};

AppGenerator.prototype.h5bp = function h5bp() {
this.copy('favicon.ico', 'app/favicon.ico');
this.copy('404.html', 'app/404.html');
this.copy('robots.txt', 'app/robots.txt');
this.copy('htaccess', 'app/.htaccess');
};

AppGenerator.prototype.mainStylesheet = function mainStylesheet() {
var css = 'main.' + (this.includeCompass ? 's' : '') + 'css';
this.copy(css, 'app/styles/' + css);
};

AppGenerator.prototype.writeIndex = function writeIndex() {

this.indexFile = this.readFileAsString(path.join(this.sourceRoot(), 'index.html'));
this.indexFile = this.engine(this.indexFile, this);

// wire Twitter Bootstrap plugins
if (this.includeBootstrap) {
var bs = 'bower_components/bootstrap' + (this.includeCompass ? '-sass/vendor/assets/javascripts/bootstrap/' : '/js/');
this.indexFile = this.appendScripts(this.indexFile, 'scripts/plugins.js', [
bs + 'affix.js',
bs + 'alert.js',
bs + 'dropdown.js',
bs + 'tooltip.js',
bs + 'modal.js',
bs + 'transition.js',
bs + 'button.js',
bs + 'popover.js',
bs + 'carousel.js',
bs + 'scrollspy.js',
bs + 'collapse.js',
bs + 'tab.js'
]);
}

this.indexFile = this.appendFiles({
html: this.indexFile,
fileType: 'js',
optimizedPath: 'scripts/main.js',
sourceFileList: ['scripts/main.js'],
searchPath: '{app,.tmp}'
});
};

AppGenerator.prototype.app = function app() {
this.mkdir('app');
this.mkdir('app/scripts');
this.mkdir('app/styles');
this.mkdir('app/images');
this.write('app/index.html', this.indexFile);

if (this.coffee) {
this.write(
'app/scripts/main.coffee',
'console.log "\'Allo from CoffeeScript!"'
);
}
else {
this.write('app/scripts/main.js', 'console.log(\'\\\'Allo \\\'Allo!\');');
}
};

AppGenerator.prototype.install = function () {
if (this.options['skip-install']) {
return;
}

var done = this.async();
this.installDependencies({
skipMessage: this.options['skip-install-message'],
skipInstall: this.options['skip-install'],
callback: done
});
};
Loading

0 comments on commit 6dd842b

Please sign in to comment.