Simple pure npm scripts build process

package.json

{
  "name": "project-name",
  "description": "Template for static sites",
  "version": "1.0.0",
  "homepage": "http://www.project-name.com",
  "author": {
    "name": "Adam Reis",
    "url": "http://adam.reis.nz"
  },
  "license": "UNLICENSED",
  "private": true,
  "repository": {
    "type": "git",
    "url": ""
  },
  "bugs": {
    "url": ""
  },
  "engines": {
    "node": ">=6.3.0",
    "npm": ">=3.10.5"
  },
  "scripts": {
    "//": " --- GENERAL ---",
    "reinstall": "rimraf node_modules && npm cache clean && npm install",
    "start": "run-p serve watch",

    "//": " --- CSS --- ",
    "css:dev": "node-sass src/scss/index.scss --output-style compressed > dist/css/app.css",
    "css:prod": "node-sass src/scss/index.scss --output-style compressed | postcss -u autoprefixer -b 'last 2 versions' > dist/css/app.css",

    "//": " --- JAVASCRIPT --- ",
    "js:dev": "babel src/js | uglifyjs > dist/js/app.js",
    "js:prod": "babel src/js | uglifyjs -m -c > dist/js/app.js",
    "js:vendor": "uglifyjs vendor/*.js > dist/js/vendor.js",

    "//": " --- BUILD (GENERIC) --- ",
    "clean": "rimraf dist",
    "mkdirs": "mkdir -p dist/js && mkdir -p dist/css",
    "copy:assets": "cp -r assets/* dist",
    "copy:html": "find src -name '*.html' -type f -exec cp {} dist \\;",
    "copy": "npm run copy:assets && npm run copy:html",

    "//": " --- BUILD (DEVELOPMENT) --- ",
    "prebuild:dev": "npm run clean && npm run mkdirs && npm run copy",
    "build:dev": "npm run css:dev && npm run js:dev && npm run js:vendor",

    "//": " --- BUILD (PRODUCTION) --- ",
    "prebuild:prod": "npm run clean && npm run mkdirs && npm run copy",
    "build:prod": "npm run css:prod && npm run js:prod && npm run js:vendor",
    "postbuild:prod": "npm run hash",

    "//": " --- HASHING --- ",
    "hash": "hashmark **/(app|vendor).* -d md5 -l 8 -c dist '{dir}/{name}.{hash}{ext}' | replaceinfiles -S -s dist/**/*.html",
    "posthash": "rm dist/css/app.css && rm dist/js/app.js",

    "//": " --- LINTING & TESTING --- ",
    "lint": "eslint src/js --fix",
    "pretest": "npm run lint",
    "test": "npm run istanbul -s",
    "posttest": "npm run coverage -s",
    "istanbul": "istanbul cover ./node_modules/mocha/bin/_mocha 'test/**/*.spec.js'",
    "coverage": "open -a 'Google Chrome' ./coverage/lcov-report/index.html",

    "//": " --- SERVING --- ",
    "kill": "lsof -n -i:8080 | grep LISTEN | awk '{print $2}' | xargs kill -9",
    "preserve": "npm run build:dev && npm run kill",
    "serve": "browser-sync start -s --files 'dist/**/*.(js|css|html)' --ss 'dist' --port 8080 --reload-debounce 500",

    "//": " --- WATCHING --- ",
    "watch:assets": "onchange 'assets/**/*' -- npm run copy:assets",
    "watch:vendor": "onchange 'vendor/**/*.js' -- npm run js:vendor",
    "watch:html": "onchange 'src/**/*.html' -- npm run copy:html",
    "watch:css": "onchange 'src/**/*.scss' -- npm run css:dev",
    "watch:js": "onchange 'src/**/*.js' -- npm run js:dev",
    "watch": "run-p watch:css watch:js watch:html watch:assets",

    "//": " --- DEPLOYMENT & ZIP --- ",
    "postversion": "git push && git push --tags",
    "predeploy": "npm run build:prod",
    "deploy": "firebase deploy --project project-name",
    "prezip": "npm run build:prod",
    "zip": "cd dist && zip -r -X ../app.zip ."
  },
  "devDependencies": {
    "autoprefixer": "^6.3.7",
    "babel-cli": "^6.11.4",
    "babel-preset-es2015": "^6.9.0",
    "browser-sync": "^2.14.0",
    "chai": "^3.5.0",
    "chai-as-promised": "^5.3.0",
    "dirty-chai": "^1.2.2",
    "eslint": "^3.2.2",
    "firebase-tools": "^3.0.5",
    "hashmark": "^3.1.0",
    "istanbul": "^1.0.0-alpha.2",
    "mocha": "^2.5.3",
    "mocha-clean": "^1.0.0",
    "npm-run-all": "^4.1.5",
    "node-sass": "^3.8.0",
    "onchange": "^2.5.0",
    "postcss-cli": "^2.5.2",
    "replaceinfiles": "^1.1.4",
    "rimraf": "^2.5.4",
    "uglify-js": "^2.7.0"
  }
}

when dealing with generic assets, when you delete a file (say, a .png one), the file still remains in the dist folder, right?

It shouldn't, as the dist folder is cleaned up with the clean command on each build, but it probably won't happen with the watchers.

Thanks for sharing @adamreisnz, does this minify html files as well?

@viztastic no I don't think so, not much minification to do on HTML anyway, but I guess you could include a stage to strip comments etc.

Amazing gist.
Let me add some CSS optimizing scripts for normal css
$ cleancss --format beautify src/index.css -o disk/css/style.css
$ cleancss src/index.css -o disk/css/style.min.css
Source: https://www.npmjs.com/package/clean-css-cli

Cheers!

For anybody else coming across this, it's worth knowing that mkdir -p, cp -p, find, rm, ... won't work on Windows, so if you value a diverse dev team, this'll need some tweaking. (It's using rimraf, which is a cross-platform equivalent of rm -rf, but the others aren't cross-platform.)

Another problem for Windows are all the single quotes, like 'npm run serve'.
Windows users will need to use escaped double quotes \"npm run serve\".

Working on windows right now, and yes this obviously needs to be adjusted, but even on windows it's a nice starting point for projects that aren't using something like webpack or a framework cli that uses similar under the hood. Thank you for creating this gist!

I'm porting the scripts to windows at the moment, and I was having issues with the reinstall. I am not sure if it is windows specific. If you run rimraf on node_modules when it is installed as a dev dependency, it will try to delete the directory where it lives. I mean it does delete the whole directory, but then the script breaks, and you can only run npm i at that point.

Also, newer versions of npm warn that npm's cache self heals, and I have found that nowadays very little has to be done after you blow away the node_modules folder and restore it. I would remove the npm cache clean, and at the end add npm cache verify if you are worried about cache corruption or garbage.

I ended up with "reinstall:win": "(rd /S/Q node_modules || echo) && npm install && npm cache verify".
The || echo is not actually needed if you only use this when the node_modules folder exists (there are probably nicer ways to do this, I just found || echo to be most terse).

I just started porting this, and I have not gotten into the real meat of it yet, so that is all the feedback I have at this point. Most changes have been swapping 's with \"s, as @OSUblake pointed out.

I am debating whether I want to continue making win specific versions of scripts that require it, and use an env. variable (via something like this SO answer) to determine which environment specific script to branch to, or trying to make a single set of scripts by replacing nix specific commands with cross platform npm commands.

Thanks again for sharing this template!!!

p.s. @adamreisnz Why did you choose parallelshell over concurrently or npm-run-all?

I think the easiest way to do unix like commands is with shx.
https://www.npmjs.com/package/shx

I created this quite some time ago, at the time parallelshell did what I needed it to, but I am lately using run-p for that purpose. Feel free to use whatever you see fit though.

@OSUblake Thank you. I spent a few hours searching for something like shx before I saw your response. Having near duplicate scripts and branching based on platform clearly doesn't scale well.

I created this quite some time ago, at the time parallelshell did what I needed it to, but I am lately using run-p for that purpose. Feel free to use whatever you see fit though.

Thanks so much for this @adamreisnz (also NZ represent! ;) ) - very helpful! Any particular reason for the switch to run-p ? Any other changes since then?

@sjclark Sorry I meant I am using npm-run-all recently. From memory, I think it was better maintained and more in use than parallelshell, or perhaps easier to use, I am not sure anymore it was quite a few years ago that I made the switch ;)

It's worth noting that I don't maintain this gist actively anymore as I do tend to work more with JS frameworks that include their own build tools or that need more complex build processes, but happy to make a few updates based on suggestions if needed.

does it work on windows os?

Hi ya'll, I just wrote an article that might be helpful to this discussion:
https://dev.to/yaireo/automate-npm-package-publish-git-versioning-5cfp

L41 is not working - in VSCode terminal (Windows) I have error:

find: missing argument to `-exec'

Trying this code with no success:

"copy:html": "find src -name \"*.html\" -type f -exec cp {} dist \\;"