Skip to content

Instantly share code, notes, and snippets.

@colingourlay
Last active August 29, 2015 13:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save colingourlay/9130246 to your computer and use it in GitHub Desktop.
Save colingourlay/9130246 to your computer and use it in GitHub Desktop.
unpackage.json - The crazy self-initialising opinionated app project. Put this into an empty directory and run `npm start`.
{
"dependencies": {
"browserify": "~3.30.1"
},
"devDependencies": {
"clean-css": "~2.1.1",
"gazer": "0.0.3",
"myth": "~0.3.0",
"rework-npm-cli": "0.0.1",
"st": "~0.3.1",
"uglifyjs": "~2.3.6",
"watchify": "~0.6.1"
},
"scripts": {
"build-assets": "rsync -a src/assets/ app",
"build-styles": "cd src/styles && rework-npm index.css | myth | cleancss -o ../../app/index.css",
"build-scripts": "browserify src/scripts/index.js | uglifyjs -mc > app/index.js",
"build": "npm run clean && npm run build-assets && npm run build-styles && npm run build-scripts",
"devbuild-assets": "rsync -av src/assets/ app",
"devbuild-styles": "cd src/styles && rework-npm index.css | myth -v > ../../app/index.css",
"devbuild-scripts": "browserify src/scripts/index.js -d -o app/index.js",
"devbuild": "npm run clean && npm run devbuild-assets && npm run devbuild-styles && npm run devbuild-scripts",
"watch-assets": "gazer -p src/assets/**/* npm run devbuild-assets",
"watch-styles": "gazer -p src/styles/**/* npm run devbuild-styles",
"watch-scripts": "watchify src/scripts/index.js -o app/index.js -dv",
"watch": "npm run watch-assets & npm run watch-styles & npm run watch-scripts",
"server": "st -d app -i index.html -p 8000",
"clean": "rm -rf app && mkdir app",
"dev": "npm run devbuild && npm run server & npm run watch",
"start": "echo ${PWD##*/} > README.md && echo 'node_modules\napp\nnpmdebug.log' > .gitignore && mkdir -p src/assets src/scripts src/styles && echo '<!DOCTYPE html>\n<html>\n<head>\n\t<meta charset=\"utf-8\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<title>:)</title>\n\t<meta name=\"description\" content=\"\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<link rel=\"stylesheet\" href=\"/index.css\" />\n</head>\n<body>\n\t<script src=\"/index.js\"></script>\n</body>\n</html>' > src/assets/index.html && echo 'body { color: red; }' > src/styles/index.css && echo 'document.write(\":)\");' > src/scripts/index.js && sed -i .bak -e '30s/.*/ \"start\": \"npm install \\&\\& npm run dev\"/g' package.json && rm package.json.bak && npm init && npm start"
}
}
@colingourlay
Copy link
Author

This is a rather convoluted way of using npm start to generate a project directory and get up and running. There're a million other ways to do this that are nowhere near as archaic.

I guess, if I'm crazy enough to put an entire project directory into an npm script, I may as well put the entire eventual package.json file in there too.

I present the updated (and even more silly) package.json:

{
  "scripts": {
    "start": "echo ${PWD##*/} > README.md && echo 'node_modules\napp\nnpmdebug.log' > .gitignore && mkdir -p src/assets src/scripts src/styles && echo '<!DOCTYPE html>\n<html>\n<head>\n\t<meta charset=\"utf-8\">\n\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\t<title>:)</title>\n\t<meta name=\"description\" content=\"\">\n\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\t<link rel=\"stylesheet\" href=\"/index.css\" />\n</head>\n<body>\n\t<script src=\"/index.js\"></script>\n</body>\n</html>' > src/assets/index.html && echo 'body { color: red; }' > src/styles/index.css && echo 'document.write(\":)\");' > src/scripts/index.js && echo '{\n  \"dependencies\": {\n    \"browserify\": \"~3.30.1\"\n  },\n  \"devDependencies\": {\n    \"clean-css\": \"~2.1.1\",\n    \"gazer\": \"0.0.3\",\n    \"myth\": \"~0.3.0\",\n    \"rework-npm-cli\": \"0.0.1\",\n    \"st\": \"~0.3.1\",\n    \"uglifyjs\": \"~2.3.6\",\n    \"watchify\": \"~0.6.1\"\n  },\n  \"scripts\": {\n    \"build-assets\": \"rsync -a src/assets/ app\",\n    \"build-styles\": \"cd src/styles && rework-npm index.css | myth | cleancss -o ../../app/index.css\",\n    \"build-scripts\": \"browserify src/scripts/index.js | uglifyjs -mc > app/index.js\",\n    \"build\": \"npm run clean && npm run build-assets && npm run build-styles && npm run build-scripts\",\n    \"devbuild-assets\": \"rsync -av src/assets/ app\",\n    \"devbuild-styles\": \"cd src/styles && rework-npm index.css | myth -v > ../../app/index.css\",\n    \"devbuild-scripts\": \"browserify src/scripts/index.js -d -o app/index.js\",\n    \"devbuild\": \"npm run clean && npm run devbuild-assets && npm run devbuild-styles && npm run devbuild-scripts\",\n    \"watch-assets\": \"gazer -p src/assets/**/* npm run devbuild-assets\",\n    \"watch-styles\": \"gazer -p src/styles/**/* npm run devbuild-styles\",\n    \"watch-scripts\": \"watchify src/scripts/index.js -o app/index.js -dv\",\n    \"watch\": \"npm run watch-assets & npm run watch-styles & npm run watch-scripts\",\n    \"server\": \"st -d app -i index.html -p 8000\",\n    \"clean\": \"rm -rf app && mkdir app\",\n    \"dev\": \"npm run devbuild && npm run server & npm run watch\",\n    \"start\": \"npm install && npm run dev\"\n  }\n}\n' > package.json && npm init && npm start"
  }
}

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