diff --git a/README.md b/README.md index c20e400..699b8f8 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,68 @@ [![Join the chat at https://gitter.im/kosz/generator-modular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kosz/generator-modular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) > Yeoman Generator for AngularJS webapps and modules +> Generates AngularJS webapps and stand alone modules. Uses gulp, follows the Google Recommendation for AngularJS Project File Structure, and provides sub generators, to automate development beyond the initial project scaffolding, generating routes, controllers and other AngularJS objects and tests. ### Under construction -Currently release 0.0.1, still needs work, more information available in the gitter channel : [![Join the chat at https://gitter.im/kosz/generator-modular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kosz/generator-modular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) +Currently release 0.0.2, still needs work, more information available in the gitter channel : [![Join the chat at https://gitter.im/kosz/generator-modular](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/kosz/generator-modular?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) -Version 0.0.2 should be a lot more stable, planned for the end of this week ( Feb 15 ). This is a fork of, and meant to continue/replace: [generator-angular-webapp](https://github.com/kosz/generator-angular-webapp). +Version 0.0.3 planned for the end of this week ( Feb 15 ). New releases on a weekly basis. This is a fork of, and meant to continue/replace: [generator-angular-webapp](https://github.com/kosz/generator-angular-webapp). + +### Installation + +``` +npm install -g generator-modular +``` + +Make sure all prerequisites are installed and up to date : gulp, npm, yeoman, bower, git. + +### Scaffolding a new project + +Create a new dir for your project and cd into it. +``` +mkdir myProject && cd myProject +``` + +Run the main generator. +``` +yo modular +``` + +Start the live reload server with gulp +``` +gulp serve +``` + +Start the karma runner to run jasmine tests. +``` +gulp test:auto +``` + +### Generators + +#### Available: + +- yo modular +- yo modular:route [nameOfYourRoute] +- yo modular:controller [nameOfYourController] +- yo modular:service [nameOfYourService] +- yo modular:template [nameOfYourHtmlTemplate] + +#### Planned + +- yo modular:directive +- yo modular:filter +- yo modular:resource + +many others... + +### Prerequisites + +- gulp `npm install -g gulp` +- npm / node +- yeoman `npm install -g yo` +- bower `npm install -g bower` ## License diff --git a/generators/app/index.js b/generators/app/index.js index 7e86636..389c8a6 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -27,8 +27,8 @@ module.exports = generators.Base.extend({ ], filter: function (val) { var filterMap = { - "Angular Web App": 'Webapp', - "Module to be included in other Angular Web Apps": 'Module' + "Angular Web App": 'app', + "Module to be included in other Web Apps": 'module' } return filterMap[val]; }, @@ -121,11 +121,13 @@ module.exports = generators.Base.extend({ this.template('karma.conf.js', 'karma.conf.js'); this.template('editorconfig', '.editorconfig'); + this.template('src/app/vendor.scss', '.tmp/serve/' + this.projectType + '/vendor.css'); // TODO: vendor.css confusion + }, scaffoldModule: function () { - if ( this.projectType === "Webapp" ) { return; } + if ( this.projectType === "app" ) { return; } this.template('src/demo/demo.js', 'src/demo/demo.js'); this.template('src/module/module.js', 'src/module/module.js'); @@ -148,7 +150,7 @@ module.exports = generators.Base.extend({ scaffoldApp: function () { - if ( this.projectType === "Module" ) { return; } + if ( this.projectType === "module" ) { return; } this.template('src/app/app.js', 'src/app/app.js'); this.template('src/index.html', 'src/index.html'); @@ -171,7 +173,6 @@ module.exports = generators.Base.extend({ this.template('src/routes/main/footer.html', 'src/routes/main/footer.html'); this.template('src/app/app.scss', 'src/app/app.scss'); - this.template('src/app/vendor.scss', '.tmp/serve/app/vendor.css'); // TODO: vendor.css confusion // // example route /exampleRoute @@ -193,15 +194,17 @@ module.exports = generators.Base.extend({ this.installDependencies({ callback: function () { // this.spawnCommand('gulp', ['index','ngdocs']).on('close', function (code) { // TODO - console.log( chalk.bold.green('Finished setting up ' + name + ' run ' + chalk.yellow('gulp serve') + ' to get started\n')); + console.log( chalk.bold.green('\nFinished setting up ' + name + ' run ' + chalk.yellow('gulp serve') + ' to get started\n')); console.log(chalk.bold.yellow('docs :') + chalk.red(' https://github.com/kosz/generator-modular') + '\n' ); - console.log(chalk.bold.yellow('gulp :')); + console.log(chalk.bold.yellow('gulp commands:\n')); console.log(chalk.yellow(' gulp serve') + chalk.green(' - opens up a live reload server, and runs the ') + chalk.cyan('watchers')); + console.log(chalk.yellow(' gulp serve:dist') + chalk.green(' - serves a production build, with minified/concatenated files') + chalk.cyan('watchers')); console.log(chalk.yellow(' gulp') + chalk.green(' - runs the ') + chalk.cyan('watchers') + chalk.green(' but does not open a server')); - console.log(chalk.yellow(' gulp test') + chalk.green(' - runs the jasmine spec suite') + chalk.gray(' alternate command: karma start karma.conf.js')); - console.log(chalk.yellow(' gulp ngdocs-serve') + chalk.green(' - compiles ngDocs from your comments, and opens up a server, serving the documentation page\n')); + console.log(chalk.yellow(' gulp test') + chalk.green(' - runs the jasmine test suite')); + console.log(chalk.yellow(' gulp test:auto') + chalk.green(' - runs a watcher that executes the test suite on every change')); + console.log(chalk.yellow(' gulp serve:ngdocs') + chalk.green(' - compiles ngDocs from your comments, and opens up a server, serving the documentation page\n')); // }); }.bind(this) diff --git a/generators/app/templates/gitignore b/generators/app/templates/gitignore index 4693588..2cf24a2 100644 --- a/generators/app/templates/gitignore +++ b/generators/app/templates/gitignore @@ -2,4 +2,6 @@ node_modules bower_components dist -src/ng-docs +ngDocs +.DS_Store +.tmp diff --git a/generators/app/templates/gulp/build.js b/generators/app/templates/gulp/build.js index 6e1a5a4..4826ca7 100644 --- a/generators/app/templates/gulp/build.js +++ b/generators/app/templates/gulp/build.js @@ -10,6 +10,8 @@ var $ = require('gulp-load-plugins')({ gulp.task('partials', function () { return gulp.src([ + '!' + paths.src + '/index.html', + '!' + paths.tmp + '/serve/index.html', paths.src + '/**/*.html', paths.tmp + '/**/*.html' ]) diff --git a/generators/app/templates/gulp/inject.js b/generators/app/templates/gulp/inject.js index 9ee1d54..a81e623 100644 --- a/generators/app/templates/gulp/inject.js +++ b/generators/app/templates/gulp/inject.js @@ -12,6 +12,7 @@ gulp.task('inject', ['inject-css'], function () { var injectStyles = gulp.src([ paths.tmp + '/serve/**/*.css', + '!' + paths.tmp + '/serve/module/vendor.css', '!' + paths.tmp + '/serve/app/vendor.css' ], { read: false }); @@ -44,6 +45,6 @@ gulp.task('inject-css', ['styles'], function () { var target = gulp.src('./.tmp/serve/index.html'); var sources = gulp.src(['./tmp/**/*.css'], {read: false}); target.pipe($.inject(sources, {ignorePath: 'src', addRootSlash: false })) - .pipe(gulp.dest('./tmp/serve')); + .pipe(gulp.dest('./.tmp/serve')); }); diff --git a/generators/app/templates/gulp/ngdocs.js b/generators/app/templates/gulp/ngdocs.js index a8fefd6..0d3d394 100644 --- a/generators/app/templates/gulp/ngdocs.js +++ b/generators/app/templates/gulp/ngdocs.js @@ -11,7 +11,7 @@ gulp.task('ngdocs-build', function () { //scripts: ['src/app.js'], html5Mode: true, startPage: '/api', - title: 'webapp', + title: '<%= config.get("name") %>', image: "http://swiip.github.io/yeoman-angular/slides/img/yeoman-009.png", imageLink: "/api", titleLink: "http://localhost:3000" diff --git a/generators/app/templates/gulp/server.js b/generators/app/templates/gulp/server.js index bc4614f..2bffdfe 100644 --- a/generators/app/templates/gulp/server.js +++ b/generators/app/templates/gulp/server.js @@ -8,7 +8,8 @@ var util = require('util'); var browserSync = require('browser-sync'); -var middleware = require('./proxy'); +var middleware = require('./proxy'); //TODO: residue from huge refactor +middleware.push(require('connect-history-api-fallback')); function browserSyncInit(baseDir, files, browser) { browser = browser === undefined ? 'default' : browser; diff --git a/generators/app/templates/gulp/styles.js b/generators/app/templates/gulp/styles.js index 4ea2e44..5203549 100644 --- a/generators/app/templates/gulp/styles.js +++ b/generators/app/templates/gulp/styles.js @@ -53,5 +53,5 @@ gulp.task('styles', function () { return gulp.src(src) .pipe($.sass()) .pipe($.concat('css' + '.css')) - .pipe(gulp.dest(paths.tmp + '/serve/app/')); + .pipe(gulp.dest(paths.tmp + '/serve/<%= projectType %>/')); }); diff --git a/generators/app/templates/package.json b/generators/app/templates/package.json index 05dde28..c26c8b0 100644 --- a/generators/app/templates/package.json +++ b/generators/app/templates/package.json @@ -44,6 +44,7 @@ "protractor": "~1.4.0", "gulp-concat": "^2.4.3", "uglify-save-license": "~0.4.1", + "connect-history-api-fallback": "0.0.5", "gulp-ngdocs": "^0.2.10" } } diff --git a/generators/app/templates/src/demo/footer.html b/generators/app/templates/src/demo/footer.html index 028a10b..8713b66 100644 --- a/generators/app/templates/src/demo/footer.html +++ b/generators/app/templates/src/demo/footer.html @@ -1,7 +1,7 @@ diff --git a/generators/app/templates/src/demo/index.html b/generators/app/templates/src/demo/index.html index 299ea73..0883663 100644 --- a/generators/app/templates/src/demo/index.html +++ b/generators/app/templates/src/demo/index.html @@ -1,23 +1,60 @@ - - - - <%= config.get('name') %> Demo - + + + + + <%= config.get('name') %> + + + + - - + + + + + + - - + + + + + + + + - - - - -
- -
- - - +
+ +
+<% if(false) { //TODO %> + + +<% } %> + + + + + + + + + + + + + + + + + diff --git a/generators/app/templates/src/index.html b/generators/app/templates/src/index.html index 54359b7..4af29e8 100644 --- a/generators/app/templates/src/index.html +++ b/generators/app/templates/src/index.html @@ -9,13 +9,13 @@ - + - + diff --git a/generators/template/index.js b/generators/template/index.js index 397c4eb..8a504e4 100644 --- a/generators/template/index.js +++ b/generators/template/index.js @@ -19,8 +19,8 @@ module.exports = generators.Base.extend({ this.prompt({ type : 'input', name : 'path', - message : 'Enter the path for this template\n Default: ' + chalk.yellow('src/app/'), - default : 'src/app/', + message : 'Enter the path for this template\n Default: ' + chalk.yellow('src/<%= projectType %>/'), + default : 'src/<%= projectType %>/', store : true }, function (answers) { this.path = answers.path; diff --git a/package.json b/package.json index 194bc44..d260f14 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "generator-modular", - "version": "0.0.1", + "version": "0.0.2", "author": "Cosmin Ronnin ", "repository": { "type": "git", diff --git a/util/generator-webapp-utils.js b/util/generator-webapp-utils.js index 58f93f2..f233028 100644 --- a/util/generator-webapp-utils.js +++ b/util/generator-webapp-utils.js @@ -1,8 +1,8 @@ -exports.sanitizePath = function (path) { - - if ( path[path.length-1] !== "/" ) { - path = path + "/"; - } +exports.sanitizePath = function (path) { + + if ( path[path.length-1] !== "/" ) { + path = path + "/"; + } return path; }; @@ -14,6 +14,6 @@ exports.wrapAngularMockInjections = function(injections) { return injections; }; -exports.unwrapAngularMockInjection = function(injection) { +exports.unwrapAngularMockInjection = function(injection) { //return injection.replace('_'); } diff --git a/util/reusable-prompts.js b/util/reusable-prompts.js index b1b5843..603d8c3 100644 --- a/util/reusable-prompts.js +++ b/util/reusable-prompts.js @@ -7,8 +7,8 @@ exports.promptPath = function () { this.prompt({ type : 'input', name : 'path', - message : 'Enter the path for this controller\n Default: ' + chalk.yellow('src/app/'), - default : 'src/app/', + message : 'Enter the path for this controller\n Default: ' + chalk.yellow('src/<%= projectType %>/'), + default : 'src/<%= projectType %>/', store : true }, function (answers) {