nickFalcone / amplify

Build AMP pages quickly. Compress images. AMP validation at build time.

Amplify

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.

Getting Started

$ git clone https://github.com/nickFalcone/amplify.git
$ cd amplify
$ npm install
$ gulp

What Amplify does

Amplify simplifies the process of building AMP pages in four steps:

1. Converts scss => css => minified css => piped into the <style amp-custom> tag as required by AMP
2. Minifies html and includes required amp boilerplate/tags
3. Compresses images
4. Validates AMP using gulp-amphtml-validator

Project Process/Structure

• 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

Tasks

• $ 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.

Versioning

Amplify follows SemVer

1.0.0 - create initial gulpfile.js. update README. 1.1.0 - add examples of fetching data and manipulating state.

Dependencies

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

License

MIT © 2018 Nick Falcone

Author

Nick Falcone