Skip to content

Instantly share code, notes, and snippets.

@adamreisnz
Last active January 19, 2024 13:01
Show Gist options
  • Save adamreisnz/9edf1f48e19c104b81f8102a27de0940 to your computer and use it in GitHub Desktop.
Save adamreisnz/9edf1f48e19c104b81f8102a27de0940 to your computer and use it in GitHub Desktop.
Simple pure npm scripts build process
{
"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"
}
}
@adamreisnz
Copy link
Author

@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.

@alexey-sh
Copy link

does it work on windows os?

@yairEO
Copy link

yairEO commented Jan 20, 2021

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

@viT-1
Copy link

viT-1 commented Jul 9, 2021

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 \\;"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment