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

gulp-build-system

v1.3.2

Published

Easily installable build process for Node.js using Typescript and ES7.

Downloads

5

Readme

README

This is a pre-configured gulp setup for getting up and running quickly with either a new or existing typescript or ES2017 node.js application (both are supported).

This package has a bunch of dependencies but none of them will run in your production code.

Standalone, this package is designed to be imported into an existing application. If you are starting a new application, feel free to use the associated yeoman generator to scaffold a brand new web application for you, using this package.

generator-gbs-starter

An important assumption in using this tool is that is that your code already is 
(or you're willing to make it) build-friendly, such as in a structure similar to below.
  src/ <- where you house your source code, (typecsript, es7, etc - stuff that wont work in browser)
    server/
      app.js
    client/
  lib/ <- where your files get built to, so that you can run them in development
  dist/ <- where built/minified files go for production deployment  
  .gitignore (required)
  .gulpfile.js
  .package.json
  ...etc

The file paths above are configurable, however, we're also assuming there's a separation between client 
and server code for your app. If you are looking for something isomorphic or universal, this probably isn't
your best choice of build configuration.

Installation


$ npm i --save-dev gulp@github:gulpjs/gulp#4.0 gulp-build-config

Usage

Create a gulpfile (gulpfile.js) and add the below code into it.


// gulpfile.js
const gulp = require('gulp');

const GulpConfig = require('gulp-build-system');
const gulpConfig = new GulpConfig(gulp);
gulpConfig.init();

// end gulpfile.js

// add npm script --> "dev": "gulp dev"

// run your code
$ npm run dev

// test 
$ gulp test

// test watch
$ gulp watch

// deploy to npm (be careful!)
$ npm publish

Commands

These come out of the box. Namespacing is available via configuration. From cli, type: gulp [command]

  • clean: clears the lib and dist folder
  • clean:lib: clears the lib folder
  • clean:dist: clears the dist folder
  • dev: start up dev server
  • build:lib: development build
  • build:dist: production build
  • test: run unit tests
  • test:watch: run unit tests - watching
  • nsp: check security vulnerabilities of deps
  • prepublish: check security, production build

Configuration

How to persionalize:

All configuration is done by using the provided setter API. Do not overwrite!

// setter api
gulpConfig.setConfig({
    key: value
});

// example:
gulpConfig.setConfig({
    clientEntry: './src/public/app.js',
    serverEntry: './src/server/app.js'
});

Options Have fun!

  • serverEntry - entry point for the server app. Important: this must be in the root of your server-side directory.
    • type: string
    • example: './src/server/app.js'
  • clientEntry - entry point for the client app. Important: this must be in the root of your client-side directory.
    • type: string
    • example: './src/client/app.js'
  • nspEnabled - whether or not to check your project dependencies for vulnerabilities before publishing
    • type: bool

Contributing

$ npm i
$ typings i
$ npm run dev

TODOS

Stuff you can help with.

  • Enable more configuration
  • Enable disabling stuff
  • Server side build option
  • Enable disabling some features
  • Make more modular and pluggable
  • Keep up with evolving technologies
  • Build out sample app.

Prior Art