generator-typescript-npm-bower

Generator Typescript NPM Bower

Yeoman generator for creating TypeScript Node module (Client/Server) and Bower component

lets quickly set up a project with the best practices of

• automatic api documentation.
• unit test coverage.
• variety of code quality steps.

Table of Contents

• Installation
• Features
• Scaffold Complete Directory Layout
• Usage
• Publishing Your Code
• Extend this Generator
  • Options
  • Sub Generators
• Getting to Know Yeoman
• Issues
• Changelog
• License

Installation

First, install Yeoman, Gulp and generator-typescript-npm-bower using npm (we assume you have pre-installed node.js v4 or higher).

npm install -g yo gulp generator-typescript-npm-bower

Then generate your new project:

yo typescript-npm-bower

Features

Scaffold Complete Directory Layout

.
├── /bower/                     # The folder for compiled output for bower component consume
├── /coverage/                  # Code coverage for source files of the project
├── /docs/                      # Documentation files for the project
├── /example/                   # The folder contains Html file and example.js file to test the bower component
├── /gulp/                      # The folder contains gulp tasks required to build the project
│   ├── /build.js               # Builds the project from source to output and bower folder
│   ├── /clean.js               # Contain clean tasks required for the prject
│   ├── /conf.js                # Contains the variables used in other gulp files
│   ├── /css.js                 # Concat and minify .css files in styles folder with css lint support
│   ├── /copy.js                # Copies .css build output to lib and bower folders
│   ├── /inject.js              # Injects minified js file and css file to index.html in example folder
│   ├── /lint.js                # Common lint support with jshint and tslint
|   |── /scss.js                # Builds all the .scss or .sass files with sass lint support
│   ├── /scripts.js             # Build scripts
│   ├── /tests.js               # Run tests and generate coverage reports
│   ├── /tsconfig.js            # Updates tsconfig.json with project sources
│   ├── /tsdocs.js              # Generates documentation for the project
│   ├── /version.js             # Updated version
│   └── /watch.js               # Watches all the .ts, .js, .scss or .sass and .css files for changes
├── /lib/                       # The folder for compiled output with typings for node module consume
├── /node_modules/              # 3rd-party libraries and utilities
├── /src/                       # The source code(.ts) of the application
│   ├── /sub_srcs               # Contain any sub sources(files or folders)
│   └── /index.ts               # Expose the acceseble properties by outside
|── /styles/                    # Styling .scss or .sass and .css files for the project
├── /test/                      # Contain tests(.ts) for all the source files
├── /typings/                   # Typings files for specific node modules for the project
|── .bowerrc                    # Configuration variables for execution in general(like command-line flags)
├── .editorconfig               # Define and maintain consistent coding styles between different editors and IDEs
├── .gitattributes              # Defining attributes per path
├── .gitignore                  # Contains files to be ignored when pushing to git
├── .jshintrc                   # JShint rules for the project
├── .npmignore                  # Contains files to be ignored when pushing to npm
├── .npmrc                      # NPM config file
├── .travis.yml                 # Travis CI configuration file
|── bower.json                  # Configuring packages that can be used as a dependency of another package
├── CHANGELOG.md                # Detailed recent changes in the versions
├── gulpfile.js                 # Link all splittered gulp tasks  
├── karma.conf.js               # Test runner in .ts format
├── karma-coverage.conf         # Test runner and generate coverage for compiled .js files
├── LICENSE                     # Contains License Agreement file
├── package.json                # Holds various metadata relevant to the project
├── README.md                   # Contains the details of the generated project
├── tsconfig.json               # Contains typescript compiler options
├── tslint.json                 # Lint rules for the project
└── typings.json                # Typings information to generate typings folder

Usage

yo generator-typescript-npm-bower

Note that this template will generate files in the current directory, so be sure to change to a new directory first if you don't want to overwrite existing files.

That'll generate a project with all the common tools setup. This includes:

• Filled package.json file
• Gulp task runner
• Typescript javascript transpiler
• Jasmine, Mocha and Chai unit testing
• Karma test runner
• TSLint, JShint, CSS Lint and SASS Lint linting and code style checking
• SASS CSS extension
• Browserify bring browser compatibility
• Istanbul code coverage
• Typedoc documentation generator
• Travis CI continuous integration
• License

Publishing Your Code

Once your tests are passing (ideally with a Travis CI green run), you might be ready to publish your code to npm.

Bumping version number and tagging the repository with it can be done as mentioned below. For more details read http://semver.org/

Available options to update version

npm run patch     # makes v0.1.0 → v0.1.1
npm run feature   # makes v0.1.1 → v0.2.0
npm run release   # makes v0.2.1 → v1.0.0

Publishing updated version can be done via,

npm run <release | feature | patch>
npm publish

Extend This Generator

First of all, make sure you're comfortable with Yeoman composability feature. Then in your own generator:

module.exports = generators.Base.extend({
  default: function () {
    this.composeWith('generator-typescript-npm-bower:app', {
      options: {/* provide the options you want */}
    }, {
      local: require.resolve('generator-typescript-npm-bower/generators/app')
    });
  }
});

Options

Here's a list of our supported options:

• name (String, default current working directory) set project name
• boilerplate (Boolean, default true) include or not the boilerplate files (src, example, test and styles).
• editorconfig (Boolean, default true) include or not a .editorconfig file.
• git (Boolean, default true) include or not the git files (.gitattributes, .gitignore).
• gulp (Boolean, default true) include or not a gulpfile.js.
• styles (Boolean, default false) include CSS.
• scss (Boolean, default true) include SASS extension.
• bower (Boolean, default true) include bower component files.
• license (Boolean, default true) include or not a LICENSE file.
• travis (Boolean, default true) include or not a .travis.yml file.
• githubAccount (String) Account name for GitHub repo location.
• readme (String) content of the README.md file. Given this option, generator-typescript-npm-bower will generate license section.

Sub Generators

If you don't need all the features provided by the main generator, you can still use a limited set of features by composing with our sub generators directly.

Remember you can see the options of each sub generators by running yo typescript-npm-bower:sub --help.

• typescript-npm-bower:boilerplate
• typescript-npm-bower:bower-conf
• typescript-npm-bower:editor-conf
• typescript-npm-bower:git
• typescript-npm-bower:gulp
• typescript-npm-bower:karma-conf
• typescript-npm-bower:lint
• typescript-npm-bower:npm-conf
• typescript-npm-bower:readme
• typescript-npm-bower:typescript-conf

Getting to Know Yeoman

• Yeoman has a heart of gold.
• Yeoman is a person with feelings and opinions, but is very easy to work with.
• Yeoman can be too opinionated at times but is easily convinced not to be.
• Feel free to learn more about Yeoman.

Issues

• SASS Lint is not fully supported in windows platform. Please make sure to remove the watch-scss-scripts task form watch sequence if errors occur.
• Documentation generation task will emit console errors for external module references but documentation will be generated properly.

Changelog

Recent changes can be viewed on Github on the CHANGELOG.md

License

MIT © Yohan Gomez, Lahiru Sampath