Skip to content

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

License

Notifications You must be signed in to change notification settings

nickFalcone/amplify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

49 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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:

License

MIT © 2018 Nick Falcone

Author

Nick Falcone