Project Information

Install

$ npm install -g ngwp

Example

https://github.com/DavidKk/ngwp-todo

Nginx config file generation and import

Config file in project, .ngwprc.json

$ vi project/.ngwprc.json
$ ngwp nginx

Features

Multiple Modules

You can define multiple entry/modules in folder src/modules/. Different modules must define different nginx configurations, see .ngwprc.json.

Image Sprites Auto-Generate

Put all image-sprites to folder src/assets/sprites/images/, it will combine them to only one image (dist/path/assets/panels/sprite.{hashcode}.png).

The base unit is percentage (%) not px or rem. You can change it by file src/assets/sprites/images/sprite.scss.template.handlebars

SVG Sprites Auto-Generate

Put all svg-sprites to folder src/assets/sprites/svg/, it will combine them to only one svg (dist/path/assets/panels/svgsprite.{hashcode}.svg).

And the SVGO config file is in src/assets/sprites/svg/svgstore.config.js

Compatibility must be known:

svg in webkit old browser, it not support use (reference)
it must use '<use xlink:href="url#id"></use>'
and because svgo(https://github.com/svg/svgo) do not set
'xmlns:xlink="http://www.w3.org/1999/xlink"', so it make
origin svg content with use tag lack 'namespace' 'prefix',
and it make svg display success.

Error Code:
This page contains the following errors:
error on line 1 at column 15734: Namespace prefix xlink for href on use is not defined
Below is a rendering of the page up to the first error.
Browser: Chrome 48.0.2564.23:
Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/48.0.2564.23
Mobile Safari/537.36
wechatdevtools/0.7.0
MicroMessenger/6.3.22
webview/0

Docs : https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md#3-plugins
API  : https://github.com/svg/svgo/blob/master/docs/how-it-works/en.md#32-api