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-jabl

v0.10.0

Published

A generator for Yeoman to build a website with Jade, AngularJS, Bootstrap and LESS

Downloads

5

Readme

JABL

JABL is a generator for Yeoman.

If you love working with Jade, AngularJS, Bootstrap and LESS, then JABL might just be something for you!

It allows you to quickly build a static website that can easily be hosted on any kind of webserver (no Node.js, PHP, etc required).

Learn how to get your website up and running in just seconds...

Getting Started

First install yeoman:

$ npm install -g yo

Then install generator-jabl:

$ npm install -g generator-jabl

Finally, initiate the setup wizard:

$ yo jabl

Welcome

JABL will automatically generate a complete website for you.

Getting help

After running the setup wizard, you can display a help screen with the available options:

$ yo jabl

Welcome

Creating AngularJS subcomponents

All commands to generate AngularJS subcomponents look like jabl:a:<command>.

Create an AngularJS controller

$ yo jabl:a:controller

AngularJS controller

Create an AngularJS directive

$ yo jabl:a:directive

AngularJS directive

Create an AngularJS service

$ yo jabl:a:service

AngularJS service

Building the JavaScript library

For unit testing purposes, JABL automatically generates components and their unit tests in the src directory.

To build the Javascript library in the public/js directory for use in the website, just run:

$ yo jabl --build

Build

JABL will automatically check your code and build a library in the `public/js' directory.

Testing the JavaScript code

JABL is designed to work with Karma and the setup wizard will automatically configure Karma for you.

When generating AngularJS subcomponents, JABL automatically generates unit tests for your AngularJS components in the /src/js/test directory.

You are free to add your own tests or edit those generated by JABL.

To run all unit test:

$ yo jabl --karma

Karma

Creating Jade subcomponents

All commands to generate AngularJS subcomponents look like jabl:j:<command>.

Create a Jade layout

$ yo jabl:j:layout

Jade layout

Create a Jade view

$ yo jabl:j:view

Jade view

Building the HTML

JABL automatically generates Jade components in the src/jade directory.

To build the resulting HTML in the public directory, just run:

$ yo jabl --build

Build

JABL will automatically generate all HTML files and put them in the `public' directory.

The hierarchy of your Jade views will be respected, so:

src/jade/public/index.jade
src/jade/public/products/index.jade

will be compiled to

public/index.html
public/products/index.html

Start local server

JABL includes a server to view your website locally. To start the server:

grunt serve

Then open your browser to view your website:

http://localhost:9000

Change log

0.10.0

  • Added support for local development with the grunt serve task

0.9.1

  • Fixed bug in bower.json generation

0.9.0

  • Added the ability to customize Bootstrap with LESS

0.8.0

  • Added default AppCtrl when AngularJS is added
  • Added Bootstrap support

0.7.0

  • Added Jade view scaffolding
  • Updated readme

0.6.0

  • Added Jade layout scaffolding
  • Refactored some method names

0.5.0

  • Added AngularJS filter scaffolding
  • Updated readme

0.4.0

  • Added AngularJS service scaffolding
  • Updated readme

0.3.0

  • Added AngularJS directive scaffolding
  • Added automatic Gruntfile.js generation
  • Added yo:jabl --build options
  • Fixed some bugs
  • Updated readme

0.2.0

  • Added AngularJS controller scaffolding

0.1.0

  • Initial tryout release

License

MIT License