Gulp AMP HTML tag importer
A Gulp plugin for automating the import of required custom-element
<script/>
tags in AMPHTML files.
Installation
Install package with NPM and add it to your development dependencies:
npm install --save-dev amphtml-import-tags
Usage
-
Add placeholder to your source files:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
${ampjs}
<title>Hello, amphtml-import-tags!</title>
-
Incorporate the package in your gulpfile:
const importTags = require('amphtml-import-tags').create();
gulp.task('tag', () => {
return gulp.src('*.html')
.pipe(importTags)
.pipe(gulp.dest('dist/'));
});
-
Generated AMP HTML now includes any required custom-element
<script/>
tags:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-latest.js"></script>
<title>Hello, amphtml-import-tags!</title>
Using custom placeholder
By default source files should use the placeholder ${ampjs}
to mark where <script/>
tags should be inserted.
To specify a different placeholder, pass an argument to .create()
, for example:
const importTags = require('amphtml-import-tags').create('[AMP-JS]');
Release Notes
1.1.0
- Added detection for more non-standard import scenarios.
1.0.2
1.0.1
- Version bump for release to npmjs.
1.0.0