npm Front-End Workflow

Useful resources for npm based front-end development workflows and using npm as a build tool.

Articles

• Introduction to NPM Scripts Author: Mohammed Ajmal Siddiqui
• How to Use npm as a Build Tool Author: Keith Cirkel
• npm based front-end workflow Author: Youssef Kababe
• Utilising Node.js and npm for front-end development workflow Author: Ben Howdle
• Why npm Scripts? Author: Damon Bauer
• Why I Left Gulp and Grunt for npm Scripts Author: Cory House

Live Server - Autoreload

• Browsersync Browsers are automatically updated as you change HTML, CSS, images and other project files.
• browser-refresh Node.js module to enable server restart and browser refresh in response to file modifications.
• reload Refresh and reload your code in your browser when your code changes. No browser plugins required.
• live-server A simple development http server with live reload capability.
• live-reload A live reload server & client

File Watcher

• rerun-script Invoke npm scripts upon file changes.
• onchange Use glob patterns to watch file sets and run a command when anything is added, changed or deleted.
• watch Utilities for watching file trees.
• npm-watch Run scripts from package.json when files change.

Run Scripts in Paralell

• npm-run-all A CLI tool to run multiple npm-scripts in parallel or sequential.
• better-npm-run Better NPM scripts runner
• concurrently Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better.

Copy / Synchronize Files

• cpx A cli tool to watch and copy file globs.
• copyfiles Copy files on the command line
• cpy-cli User-friendly by accepting globs and creating non-existant destination directories.
• ncp Asynchronous recursive file & directory copying.
• node-sync-files Synchronize files or folders locally, with a watch option.

CSS Processors

• postcss-cli Postcss Command Line Iterface
• stylus Robust, expressive, and feature-rich CSS superset
• node-sass Node.js bindings to libsass
• less.js This is the JavaScript, official, stable version of Less.

CSS Optimization

• clean-CSS Fast and efficient CSS optimizer for node.js and the Web
• Purgecss Purgecss removes unused selectors from your css, resulting in smaller css files.
• PurifyCSS A function that takes content (HTML/JS/PHP/etc) and CSS, and returns a file made up of only the selectors you use.
• PurifyCSS Extended Fork from the original purifycss
• uncss UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.
• dropcss A simple, thorough and fast unused-CSS cleaner

Image Optimization

• imagemin-cli Minify images seamlessly
• imageoptim-cli Automates ImageOptim, ImageAlpha, and JPEGmini (commercial software) for Mac to make batch optimisation of images part of your automated build process.

Cross-platform Utilities

Utilities to perform common command-line tasks without worrying about cross-platform compatibility.

• rimraf - Delete files or directories; like rm -rf.
• del-cli - Safer file and folder deletion.
• mkdirp - Create a directory, creating parent directories if needed; like mkdir -p.
• cpy-cli - File/directory copying/renaming.
• copyfiles - Copy a list of files into a directory.
• sync-files - rsync-like directory syncing with watch mode.
• echo-cli - Cross-platform echo with JS escape sequence support.
• clear-cli - Clear the terminal.
• cross-env - Set environment variables for scripts, unix-style.
• cross-os - Run platform-specific npm scripts.
• ntee - Utility that reads from standard input and writes to standard output and files; like Unix tee.
• catw - Print a file to stdout, with optional watch mode; sorta like Unix cat.

Styleguide Generators

• postcss-style-guide PostCSS plugin to generate a style guide automatically. CSS comments will be parsed through Markdown and displayed in a generated HTML document.
• markdown-styleguide-generator Will search all your (s)css files for comments and generate a single page html styleguide.
• styledown Markdown-based styleguide generator.
• kss-node To get you up and running quickly, a style guide generator is included that can be used from the command line. It parses stylesheets and spits out a set of static HTML files.

Useful npm packages

• grunty Run any grunt plugin as NPM script without Gruntfile.js
• nps All the benefits of npm scripts without the cost of a bloated package.json and limits of json

npm Resources and Tips

• awesome npm A curated list
• awesome npm scripts Everything awesome for using npm as a build tool

License