Skip to content

Instantly share code, notes, and snippets.

@AshKyd

AshKyd/README.md

Last active September 22, 2015 19:39
Show Gist options
  • Save AshKyd/957247e6b439ceed9d65 to your computer and use it in GitHub Desktop.
Save AshKyd/957247e6b439ceed9d65 to your computer and use it in GitHub Desktop.
Download ZIP
NPM-based project workflow
Raw
README.md

Had enough of Grunt and Gulp because they're difficult to configure and especially difficult to debug.

After a discussion with some BrisJS peers last month I've come up with a bunch of NPM scripts to do a bunch of common browserify+uglify+misc stuff. This is based around my own workflow and doesn't cover all the bases so ymmv, but it's been working for me for a while now so I figured I'd share.

Getting started

First you need to ensure you've got your tools installed:

npm install -g browserify uglify-js beefy

  • Run the commands from startup-repo.sh
  • Add the "scripts" section to your package.json
  • Run npm watch to get started.

The watch task uses the node watch module for platform agnosticism, and runs a beefy server so you don't get out-of-date Browserify builds on load, and have the option of livereloading.

Contributing

Use this however you want. If you have a suggestion, chuck it in the comments.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="style.css"> </head>
<script src="index.js" defer></script>
<body>
</body>
</html>
Raw
package.json
{
"scripts": {
"clean": "rm dist -rf;mkdir dist;",
"browserify": "browserify src/scripts/index.js | uglifyjs > dist/index.js",
"copy": "cp src/index.html src/style/style.css dist/",
"zip": "zip dist.zip dist/* && ls -lah dist.zip",
"build": "npm run clean; npm run browserify & npm run copy; wait; npm run zip",
"server": "mkdir dist; cd dist; node ../node_modules/http-server/bin/http-server;",
"watch": "npm run server & node node_modules/watch/cli.js 'npm run build' src"
}
}
Raw
setup-repo.sh
mkdir -p src/scripts
mkdir -p src/style
curl -L "https://gist.githubusercontent.com/AshKyd/957247e6b439ceed9d65/raw/9c78226f8a0d393aadd322ef4f68accc15f289ee/index.html" > src/index.html
touch src/scripts/index.js
touch src/style/style.css
npm init &&
npm install watch http-server ---save-dev
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment