Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelschwobe/gulp-nunjucks-boilerplate
A scalable Gulp generated Nunjucks boilerplate.
https://github.com/michaelschwobe/gulp-nunjucks-boilerplate
boilerplate gulp minimal nunjucks skeleton
Last synced: 4 months ago
JSON representation
A scalable Gulp generated Nunjucks boilerplate.
- Host: GitHub
- URL: https://github.com/michaelschwobe/gulp-nunjucks-boilerplate
- Owner: michaelschwobe
- License: mit
- Created: 2016-07-25T02:13:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-19T20:53:28.000Z (almost 7 years ago)
- Last Synced: 2024-09-27T07:43:57.136Z (4 months ago)
- Topics: boilerplate, gulp, minimal, nunjucks, skeleton
- Language: JavaScript
- Homepage:
- Size: 122 KB
- Stars: 13
- Watchers: 3
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-nunjucks-boilerplate
> A scalable [Gulp](http://gulpjs.com/) generated [Nunjucks](https://mozilla.github.io/nunjucks/) boilerplate.
__Includes:__
- Nunjucks/HTML compilation.
- Image optimization (imagemin).
- CSS/Sass processing and minification (sourcemaps, autoprefixer, clean-css).
- JavaScript bundling and minification (webpack, babel-minify).
- Delivery folder generation - clean and ready for distribution to staging, production, etc.
- Fully configurable build process.
## Installation
__Step 1:__ Add global packages to your computer.
- Required: [node & npm](https://nodejs.org/), [gulp-cli](http://gulpjs.com/)
- Optional: [yarn](https://yarnpkg.com/)
__Step 2:__ Install dependencies:
```sh
yarn
```
## Configuration
Default paths and plugin-configurations can be modified to your liking, but anything beyond that may require some Gulp file refactoring. Additional documentation provided via comments within `gulpfile.js`.
An example file structure with [include-media](https://www.npmjs.com/package/include-media), [normalize.css](https://www.npmjs.com/package/normalize.css), [flexboxgrid](https://www.npmjs.com/package/flexboxgrid), and [jQuery](https://www.npmjs.com/package/jquery) (via node_modules) have been added to the project. To reduce build size, feel free to remove these extra files and packages if they go unused.
```
src/
├── media/
│ └── *.gif, *.jpg, *.png, *.svg
├── public/
│ └── *.ico, *.xml, etc...
├── scripts/
│ └── *.js (or *.module.js - for exports only)
├── styles/
│ └── *.css, *.scss
└── views/
└── *.html, *.njk, *.nunjucks
```
Do __NOT__ remove or rename the immediate folders within `src` unless you plan to modify the gulp configuration.
## Development
__Default script:__
Processes source files, starts a BrowerSync server (defaults to port 3000), and watches for file changes.
```sh
yarn start
```
__Other scripts:__
Deletes the generated output folder. This is your reset button.
```sh
yarn clean
```
## Staging/Production
__Default script:__
Processes/minifies/moves files to the configured output folder for distribution.
```sh
yarn build
```
__Notes:__
- Use a bang to avoid comments from being stripped out of stylesheets, ex: `/*! ... */`
- Individual production tasks can be run seperately, ex:
```sh
# Move public files and (sub)folders.
yarn build:public
# Nunjucks compilation.
yarn build:views
# Image optimization.
yarn build:media
# CSS/Sass processing and minification.
yarn build:styles
# JavaScript bundling and minification.
yarn build:scripts
```