A17 FE Boilerplate - 5.x.x
Introduction
The rebuild of A17 FE Boilerplate.
Highly inspired by kcd-scripts and react-scripts
Installation
No more clone. It is an npm package : https://www.npmjs.com/package/@area17/a17-boilerplate
Via a17-generator
Please see instructions here a17-generator.
Manual install
Go to the project root, and run:
$ npm install @area17/a17-boilerplate
After the package is installed please run:
$ npx a17-bp init
Tasks
All avaliable tasks are listed in package.json
file as npm tasks.
Configuration
A17 BP 4.x has a bunch of config files located in the /config
folder. If not specified, A17 BP 4.x will use default configurations with it.
Custom configuration is enabled via adding corresponding configuration file in the right place.
For example, place manifest.json
file into the project's frontend folder will have A17 BP 4.x use this file instead of the default one in the /config
folder.
That is to say, it works the way that it will look for configuration file or use default. No commands for configuration.
Update Log
5.0.1
- New manifest.json updates to pass through ports to browsersync:
{
"config": {
"browsersyncPort": 1312,
"browsersyncUiPort": 1313
}
}
5.0.0
- Added new type styles handing with baseline-baseline fixing and margin functions to space baseline-baseline. See ttps://codepen.io/13twelve/pen/WYgrYE?editors=1000
4.1.2
- Update Webpack to latest version and remove hardcoded 'frontend' folder in watch task. (There are still some hardcoded 'frontend' to be removed)
4.1.1
-
Updated breakpoint
mixin to help generate IE11 and hover based breakpoints
@include breakpoint('medium+') {
}
@include breakpoint(null,'hover') {
}
@include breakpoint(null,'ie11') {
}
@include breakpoint('medium+','hover') {
}
@include breakpoint('medium+','ie11') {
}
4.1.0
-
Add a way to specify custom entry points in the webpack config via the manifest :
"scripts": {
"app.js": "js/app.js",
"map.js": "js/map.js",
"head.js": "js/head.js"
}
If no "scripts" are found it will fallback on the js/app.js and the js/head.js file.
4.0.1
- Update node-sass so this support Node v11
4.0.0
- Webpack 4 is now used to generate JS
3.2.1
- Rev asset task: add a way to pass files into rev task (in addition to default .css and .js files)
3.2.0
- Update Babel version to 7.x.x.
3.1.1
3.1
3.0.3
- Fix a manifest file path bug.
3.0.2
- Prevent svgo from removing viewBox attribute from svgs.
3.0.1
- Exclude a17-helpers package from being compiled by babel (needs to install latest a17-helpers package which is compiled already).
3.0.0-rc.7
- Remove babel-polyfill from app.js by default
3.0.0-rc.6
3.0.0-rc.5
- Scripts and Watch tasks must be plugged to the dist folder config via the manifest
- Fonts and Images tasks : empty the folder before copying
- Remove unused packages
3.0.0-rc.4
- Update icon task so ids of the svg symbols are prefixed with
icon--
.
3.0.0-rc.3
-
Add non-frontend file watch support. In manifest.json
, just add bs
options to config
like the following example (it is using relative path to the root of frontend
folder):
{
"config": {
"bs" : {
"watchExtra" : [
"./*.php"
]
}
}
}
3.0.0-rc.2
- Fix warning in Sass, typography mixin : "&&" means two copies of the parent selector. You probably want to use "and" instead.
3.0.0-rc.1
- Safely update packages
- Watch images
3.0.0-beta.8
-
Clean dist folder before doing a build
-
Add the rev task : a rev-manifest.json file will be added at the root of the dist folder to map assets with revisioned ones
-
In dev the rev-manifest.json will look like this npm run build
:
{
"styles/app.css":"styles/app.css",
"styles/html4css.css":"styles/html4css.css",
"scripts/app.js":"scripts/app.js",
"scripts/head.js":"scripts/head.js"
}
-
In production npm run prod
:
{
"styles/app.css":"styles/app-7ad77318e2.css",
"styles/html4css.css":"styles/html4css-894eb0106a.css",
"scripts/app.js":"scripts/app-e82b5c7421.js",
"scripts/head.js":"scripts/head-b39adeb404.js"
}
3.0.0-beta.7
3.0.0-beta.6
- Refactor icon task so it is only using svg-store and svgo (it remove the phantomjs dependency)
3.0.0-beta.5
3.0.0-beta.4
- Use Webpack to watch scripts (other files are still watchting via package watch)
3.0.0-beta.3
- Add icon watch and revise some readme info.
3.0.0-beta.2
- Updated some instructions
3.0.0-beta.1
Publish
For publishing to npm, please see this guide.