npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-firestarter

v1.1.2

Published

A Yeoman generator to help kickstart Angular SPA with a Gulp build script.

Downloads

20

Readme

Firestarter has 3 parts:

  1. A Yeoman Generator for generating a default Angular SPA app structure.
  2. An awesome gulp build script for optimization things just like I like them for new Angular SPAs.
  3. (Coming Eventually...!) A (Yeoman) tool for generating additional templated views and controllers, etc to remove the need to write a lot of boilerplate code. These templates are fully customizable.

Yeoman Firestarter Generator

As a pre-requisite, yeoman is required and if you don't already, install it globally:

npm install -g yo

If you'd like to get to know Yeoman better and meet some of his friends, Gulp and Bower, check out the complete Getting Started Guide.

Installation

To install the firestarter generator, from your terminal, run:

npm install -g generator-firestarter

If you're wanting to contribute to development of this package, you can alternatively install it like so:

git clone https://github.com/CWSpear/firestarter.git firestarter
cd firestarter
npm link

npm link will link this local package to your global npm packages.

Finally, initiate the generator:

yo firestarter

Firestarter Gulp Build

Quick start:

npm install
bower install
gulp

Gulp commands:

Production Build

gulp production
# aliases for the same thing
gulp build
gulp prod

Development Build

gulp
# aliases for the same thing
gulp dev
gulp development

Watch for changes

# just add the --watch flag to any command
gulp [production] --watch

Local development server for Angular SPA

gulp serve [--port="port"] # just serves the app
# or
gulp --serve[="port"] # runs dev task + serves (define optional port)
# (--port flag overrides --serve flag)

What does it do?

This particular project was built with an AngularJS Single Page Application (SPA), and these tasks are built with that goal in mind:

  • Cleans dest directory before running other tasks
  • Compile scsscss (minifies if using production task)
  • Runs autoprefixer on compiled css
  • Converts es6 to es5 via babeljs
  • Automatically links js and revisions files (for cachebusting)
  • concat + minify (if using production task)
  • Automatically link bower components (both js and css) (resolving dependencies to determine order)
  • Automatically orders Angular files in order based on module dependencies
  • Copies other static files and images to dest folder
  • Watches all files and runs appropriate tasks and reloads page/injects CSS
  • Uses gulp-plumber to make sure watch doesn't break everything

Firestarter Template Builder

Coming Eventually...

Changelog

  • v1.1.2 (2015-04-21) - Fix URLs in routes for demo JS files.
  • v1.1.1 (2015-04-21) - Fix some typos. I just really wanted to use v.1.1.1.
  • v1.1.0 (2015-04-21) - Add support for using es6 via babeljs, as well as clean up various little things. (Removed undocumented, rarely used --install flag support.)
  • v1.0.4 (2014-12-04) - Add gulp-angular-filesorter to make it automatically resolve Angular module order instead of relying on knowing exactly where module definitions are. This fixed a bug where you'd sometimes get errors about trying to access undefined modules because Firestarter wasn't looking for app.js (or other files that define modules) in the correct place.

License

MIT