{"id":13397888,"url":"https://github.com/damonbauer/npm-build-boilerplate","last_synced_at":"2025-04-12T19:45:40.561Z","repository":{"id":79140152,"uuid":"50251677","full_name":"damonbauer/npm-build-boilerplate","owner":"damonbauer","description":"A collection of packages that build a website using npm scripts.","archived":false,"fork":false,"pushed_at":"2020-04-16T17:55:18.000Z","size":1108,"stargazers_count":992,"open_issues_count":4,"forks_count":164,"subscribers_count":47,"default_branch":"master","last_synced_at":"2025-04-03T22:11:10.132Z","etag":null,"topics":["build","cli","npm","task","watch"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damonbauer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-23T18:19:39.000Z","updated_at":"2025-03-25T09:54:11.000Z","dependencies_parsed_at":"2023-04-05T21:01:07.834Z","dependency_job_id":null,"html_url":"https://github.com/damonbauer/npm-build-boilerplate","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fnpm-build-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fnpm-build-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fnpm-build-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damonbauer%2Fnpm-build-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damonbauer","download_url":"https://codeload.github.com/damonbauer/npm-build-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625491,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build","cli","npm","task","watch"],"created_at":"2024-07-30T18:01:51.333Z","updated_at":"2025-04-12T19:45:40.538Z","avatar_url":"https://github.com/damonbauer.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# npm-build-boilerplate\n\nA collection of packages that build a website using `npm scripts`.\n\n* [List of packages used](#list-of-packages-used)\n* [Using in your project](#using-in-your-project)\n* [List of available tasks](#list-of-available-tasks)\n* [Need help?](#need-help)\n\n## List of packages used\n[autoprefixer](https://github.com/postcss/autoprefixer), [browser-sync](https://github.com/Browsersync/browser-sync), [eslint](https://github.com/eslint/eslint), [imagemin-cli](https://github.com/imagemin/imagemin-cli), [node-sass](https://github.com/sass/node-sass), [onchange](https://github.com/Qard/onchange), [npm-run-all](https://github.com/mysticatea/npm-run-all), [postcss-cli](https://github.com/code42day/postcss-cli), [svgo](https://github.com/svg/svgo), [svg-sprite-generator](https://github.com/frexy/svg-sprite-generator), [uglify-js](https://github.com/mishoo/UglifyJS2).\n\nMany, many thanks go out to Keith Cirkel for [his post](http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/) and his useful CLI tools!\n\n## Using in your project\n* First, ensure that node.js \u0026 npm are both installed. If not, choose your OS and installation method from [this page](https://nodejs.org/en/download/package-manager/) and follow the instructions.\n* Next, use your command line to enter your project directory.\n  * If this a new project (without a `package.json` file), start by running `npm init`. This will ask a few questions and use your responses to build a basic `package.json` file. Next, copy the `\"devDependencies\"` object into your `package.json`.\n  * If this is an existing project, copy the contents of `\"devDependencies\"` into your `package.json`.\n* Now, copy any tasks you want from the `\"scripts\"` object into your `package.json` `\"scripts\"` object.\n* Finally, run `npm install` to install all of the dependencies into your project.\n\nYou're ready to go! Run any task by typing `npm run task` (where \"task\" is the name of the task in the `\"scripts\"` object). The most useful task for rapid development is `watch`. It will start a new server, open up a browser and watch for any SCSS or JS changes in the `src` directory; once it compiles those changes, the browser will automatically inject the changed file(s)!\n\n## List of available tasks\n### `clean`\n  `rm -f dist/{css/*,js/*,images/*}`\n\n  Delete existing dist files\n\n### `autoprefixer`\n  `postcss -u autoprefixer -r dist/css/*`\n\n  Add vendor prefixes to your CSS automatically\n\n### `scss`\n  `node-sass --output-style compressed -o dist/css src/scss`\n\n  Compile Scss to CSS\n\n### `lint`\n  `eslint src/js`\n\n  \"Lint\" your JavaScript to enforce a uniform style and find errors\n\n### `uglify`\n  `mkdir -p dist/js \u0026\u0026 uglifyjs src/js/*.js -m -o dist/js/app.js \u0026\u0026 uglifyjs src/js/*.js -m -c -o dist/js/app.min.js`\n\n  Uglify (minify) a production ready bundle of JavaScript\n\n### `imagemin`\n  `imagemin src/images/* -o dist/images`\n\n  Compress all types of images\n\n### `icons`\n  `svgo -f src/images/icons \u0026\u0026 mkdir -p dist/images \u0026\u0026 svg-sprite-generate -d src/images/icons -o dist/images/icons.svg`\n\n  Compress separate SVG files and combine them into one SVG \"sprite\"\n\n### `serve`\n  `browser-sync start --server --files 'dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html'`\n\n  Start a new server and watch for CSS \u0026 JS file changes in the `dist` folder\n\n### `build:css`\n  `run-s scss autoprefixer`\n\n  Alias to run the `scss` and `autoprefixer` tasks. Compiles Scss to CSS \u0026 add vendor prefixes\n\n### `build:js`\n  `run-s lint concat uglify`\n\n  Alias to run the `lint`, `concat` and `uglify` tasks. Lints JS, combines `src` JS files \u0026 uglifies the output\n\n### `build:images`\n  `run-s imagemin icons`\n\n  Alias to run the `imagemin` and `icons` tasks. Compresses images, generates an SVG sprite from a folder of separate SVGs\n\n### `build`\n  `run-s build:*`\n\n  Alias to run all of the `build` commands\n\n### `watch:css`\n  `onchange 'src/**/*.scss' -- run-s build:css`\n\n  Watches for any .scss file in `src` to change, then runs the `build:css` task\n\n### `watch:js`\n  `onchange 'src/**/*.js' -- run-s build:js`\n\n  Watches for any .js file in `src` to change, then runs the `build:js` task\n\n### `watch:images`\n  `onchange 'src/images/**/*' -- run-s build:images`\n\n  Watches for any images in `src` to change, then runs the `build:images` task\n\n### `watch`\n  `run-p serve watch:*`\n\n  Run the following tasks simultaneously: `serve`, `watch:css`, `watch:js` \u0026 `watch:images`. When a .scss or .js file changes in `src` or an image changes in `src/images`, the task will compile the changes to `dist`, and the server will be notified of the change. Any browser connected to the server will then inject the new file from `dist`\n\n### `postinstall`\n  `run-s build watch`\n\n  Runs `watch` after `npm install` is finished\n\n\n## Need help?\nFeel free to [create an issue](http://github.com/damonbauer/npm-build-boilerplate/issues), [tweet me](http://twitter.com/damon_bauer), or [send me an email](mailto:hello@damonbauer.me). I'd be glad to help where I can!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamonbauer%2Fnpm-build-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamonbauer%2Fnpm-build-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamonbauer%2Fnpm-build-boilerplate/lists"}