Skip to content

Instantly share code, notes, and snippets.

@colingourlay

colingourlay/package.json

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.
Download ZIP
unpackage.json - The crazy self-initialising opinionated app project. Put this into an empty directory and run `npm start`.
Raw
package.json
{
"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

The first time you run npm start, it unpacks the project files and replaces itself with the new npm start.

It then and runs npm init for you to set up basic project stuff.

Finally, it runs the new npm start which runs npm install, then npm run dev, so you can get to work.

@colingourlay
Copy link
Author

Here's a one-liner to try in an empty directory in your console right now:

curl https://gist.githubusercontent.com/colingourlay/9130246/raw/13c8cec9af9e6f833f3a036020d6918d1ba54f09/package.json > package.json && npm start

No sudo. So you can totally trust me.

@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