├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .stylelintrc
├── CONTRIBUTING.md
├── README.md
├── index.html
├── package.json
└── src
├── images
├── .DS_Store
├── icons
│ ├── book.svg
│ ├── twitter.svg
│ └── weather.svg
├── sandwich.png
└── sunset.jpg
├── js
├── main.js
└── sub.js
└── scss
├── _utilities.scss
├── _variables.scss
└── main.scss
/.editorconfig:
--------------------------------------------------------------------------------
1 | # This file is for unifying the coding style for different editors and IDEs
2 | # editorconfig.org
3 |
4 | root = true
5 |
6 | [*]
7 | charset = utf-8
8 | indent_size = 2
9 | indent_style = space
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "extends": "standard",
3 | "plugins": [
4 | "standard"
5 | ],
6 | "rules": {
7 | semi: [2, "always"]
8 | }
9 | };
10 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | npm-debug.log
4 | .sass-cache
5 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | "rules": {
2 | "block-no-empty": true,
3 | "color-hex-case": "lower",
4 | "color-hex-length": "short",
5 | "color-no-invalid-hex": true,
6 | "declaration-colon-space-after": "always",
7 | "max-empty-lines": 2,
8 | }
9 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 | Thanks for considering a contribution!
3 |
4 | ## Bug Reports & Feature Requests
5 | Please use the [issue tracker](https://github.com/damonbauer/npm-build-boilerplate/issues) to report any bugs or file feature requests.
6 |
7 | When filing a bug, please include as many details as possible. Your configuration options and any error messages are helpful.
8 |
9 | For a feature request, please provide a detailed description of what you're looking for. If you have any examples, feel free to include them.
10 |
11 | ## Pull Requests
12 | If you've found a bug, I'd love some help to fix it! Here are the steps to follow in order to get your pull request added.
13 |
14 | Fork the repo:
15 |
16 | ```
17 | git clone git@github.com:damonbauer/npm-build-boilerplate.git
18 | ```
19 |
20 | Install dependencies:
21 |
22 | ```
23 | npm install
24 | ```
25 |
26 | Author your changes.
27 |
28 | Finally, commit your changes to your fork. Then, submit a pull request! We'll review, ask questions and suggest changes (if we have any). If everything looks good, we'll pull your changes in.
29 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # npm-build-boilerplate
2 |
3 | A collection of packages that build a website using `npm scripts`.
4 |
5 | * [List of packages used](#list-of-packages-used)
6 | * [Using in your project](#using-in-your-project)
7 | * [List of available tasks](#list-of-available-tasks)
8 | * [Need help?](#need-help)
9 |
10 | ## List of packages used
11 | [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).
12 |
13 | Many, 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!
14 |
15 | ## Using in your project
16 | * First, ensure that node.js & 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.
17 | * Next, use your command line to enter your project directory.
18 | * 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`.
19 | * If this is an existing project, copy the contents of `"devDependencies"` into your `package.json`.
20 | * Now, copy any tasks you want from the `"scripts"` object into your `package.json` `"scripts"` object.
21 | * Finally, run `npm install` to install all of the dependencies into your project.
22 |
23 | You'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)!
24 |
25 | ## List of available tasks
26 | ### `clean`
27 | `rm -f dist/{css/*,js/*,images/*}`
28 |
29 | Delete existing dist files
30 |
31 | ### `autoprefixer`
32 | `postcss -u autoprefixer -r dist/css/*`
33 |
34 | Add vendor prefixes to your CSS automatically
35 |
36 | ### `scss`
37 | `node-sass --output-style compressed -o dist/css src/scss`
38 |
39 | Compile Scss to CSS
40 |
41 | ### `lint`
42 | `eslint src/js`
43 |
44 | "Lint" your JavaScript to enforce a uniform style and find errors
45 |
46 | ### `uglify`
47 | `mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js`
48 |
49 | Uglify (minify) a production ready bundle of JavaScript
50 |
51 | ### `imagemin`
52 | `imagemin src/images/* -o dist/images`
53 |
54 | Compress all types of images
55 |
56 | ### `icons`
57 | `svgo -f src/images/icons && mkdir -p dist/images && svg-sprite-generate -d src/images/icons -o dist/images/icons.svg`
58 |
59 | Compress separate SVG files and combine them into one SVG "sprite"
60 |
61 | ### `serve`
62 | `browser-sync start --server --files 'dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html'`
63 |
64 | Start a new server and watch for CSS & JS file changes in the `dist` folder
65 |
66 | ### `build:css`
67 | `run-s scss autoprefixer`
68 |
69 | Alias to run the `scss` and `autoprefixer` tasks. Compiles Scss to CSS & add vendor prefixes
70 |
71 | ### `build:js`
72 | `run-s lint concat uglify`
73 |
74 | Alias to run the `lint`, `concat` and `uglify` tasks. Lints JS, combines `src` JS files & uglifies the output
75 |
76 | ### `build:images`
77 | `run-s imagemin icons`
78 |
79 | Alias to run the `imagemin` and `icons` tasks. Compresses images, generates an SVG sprite from a folder of separate SVGs
80 |
81 | ### `build`
82 | `run-s build:*`
83 |
84 | Alias to run all of the `build` commands
85 |
86 | ### `watch:css`
87 | `onchange 'src/**/*.scss' -- run-s build:css`
88 |
89 | Watches for any .scss file in `src` to change, then runs the `build:css` task
90 |
91 | ### `watch:js`
92 | `onchange 'src/**/*.js' -- run-s build:js`
93 |
94 | Watches for any .js file in `src` to change, then runs the `build:js` task
95 |
96 | ### `watch:images`
97 | `onchange 'src/images/**/*' -- run-s build:images`
98 |
99 | Watches for any images in `src` to change, then runs the `build:images` task
100 |
101 | ### `watch`
102 | `run-p serve watch:*`
103 |
104 | Run the following tasks simultaneously: `serve`, `watch:css`, `watch:js` & `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`
105 |
106 | ### `postinstall`
107 | `run-s build watch`
108 |
109 | Runs `watch` after `npm install` is finished
110 |
111 |
112 | ## Need help?
113 | Feel 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!
114 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |