Build AMP Pages. Compress images. AMP validation at build time. Learn more about AMP.
Amplify helps build production-ready AMP pages. Compile SCSS to CSS injected as <style amp-custom>
. Compress images. Minify everything. Feedback/issues and PRs always welcome.
$ git clone https://github.com/nickFalcone/amplify.git
$ cd amplify
$ npm install
$ gulp
Amplify simplifies the process of building AMP pages in four steps:
- Converts scss => css => minified css => piped into the
<style amp-custom>
tag as required by AMP - Minifies html and includes required amp boilerplate/tags
- Compresses images
- Validates AMP using gulp-amphtml-validator
- HTML files from src/components are minified and piped to Public
- images from src/img are compressed and piped to Public/img
- src/style/style.scss is converted to src/style/style.css, minified, and injected into public/index.html Do not edit style.css - this file is generated by Gulp
Amplify
└───public
└───img
└───index.html
└───data
| data.json
└───src
└───components
| index.html
└───img
└───style
| style.scss
| style.css
└───data
| data.json
└──node_modules
| gulpfile.js
| package.json
| README.md
| .gitignore
$ gulp
The default build process. Deletes the Public directory and then recreates it with the current build. This ensures that Public doesn't contain leftover files that were not generated by the current build.$ gulp amphtml:validate
Runs AMP validation test for each HTML file in Public.$ gulp clean
Deletes the Public directory.
Amplify follows SemVer
1.0.0 - create initial gulpfile.js. update README. 1.1.0 - add examples of fetching data and manipulating state.
Amplify uses the following packages:
- browser-sync
- del
- gulp
- gulp-amphtml-validator
- gulp-cssnano
- gulp-htmlmin
- gulp-image
- gulp-inject-string
- gulp-plumber
- gulp-sass
MIT © 2018 Nick Falcone