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

productionline-web

v1.1.8

Published

An extension of productionline, providing common web/UI build capabilities.

Downloads

16

Readme

productionline-web Build Status Greenkeeper badge

npm install productionline-web --save-dev

An extension to productionline that adds common tasks for build web applications (ie minification, munging, concatenation, etc).

The are a number of additional methods this class adds to productionline, including:

  • sourcemapurl attribute (Sourcemap URL root)
  • transpile(filepath) - Transpile a file to ES5 (Babel)
  • minify() - Minify a block of CSS code.

There are also a number of additional tasks:

  • clean() - Clears the output directory.
  • copyAssets() - Copies a common assets directory from the source to the output directory.
  • buildHTML() - Copies HTML to the output directory.
  • buildJavaScript() - Copies a transpiled version of JS files to the output directory.
  • buildCSS() - Copies a minified version of CSS files to the output directory.
  • make() (see below)

Standard "Make" Process

It is worth looking at the source for the make() method. By default, this method will copy assets from the source to destination and minify CSS/JS. This can and often will be overridden with logic suitable for your build process (example: adding transpilation or code concatenation).

Examples

See the examples, and feel free to submit PR's with new examples.

Basic Use

The source code is well documented with several feature methods.

The following would go in a file called build.js.

const Builder = ('productionline-web')
const path = require('path')
const builder = new Builder({
  commands: {
    '--make': () => {
      console.log('Running Build Process:')

      // The following are not explicitly necessary since the source,
      // assets, and destination are all being set to their defaults.
      // However; the code is written so you can supply your own
      // folder structure.
      builder.source = path.resolve('./src')
      builder.assets = path.resolve('./assets') // Relative to source!
      builder.destination = path.resolve('./dist')

      // Queue the built-in build process.
      builder.make()
      builder.run()
    }
  }
})

In the package.json file, add an npm command like:

{
  "scripts": {
    "test": "...",
    "build": "node build.js --make"
  }
}

The entire process can then be run using npm run build.

Live Builds

During development, it's often useful to monitor source code and rebuild whenever a file changes. To support this, productionline contains a watch task, which will remain running and respond to file system changes.

For example:

builder.watch((action, filepath) => {
  builder.make()
  builder.run()
})