Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
142 lines (105 sloc) 2.75 KB

Installing pHTML Image Size

pHTML Image Size runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Node

Add pHTML Image Size to your project:

npm install @phtml/image-size --save-dev

Use pHTML Image Size to process your HTML:

const phtmlImageSize = require('@phtml/image-size')

phtmlImageSize.process(YOUR_HTML /*, processOptions, pluginOptions */)

Or use it as a pHTML plugin:

const phtml = require('phtml')
const phtmlImageSize = require('@phtml/image-size')

phtml([
  phtmlImageSize(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */)

CLI

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/image-size

Alternatively, add pHTML Image Size to your phtml.config.js configuration file:

module.exports = {
  plugins: [
    ['@phtml/image-size', /* pluginOptions */]
  ]
}

Eleventy

Add pHTML Eleventy and pHTML Image Size to your Eleventy project:

npm install @phtml/image-size @phtml/11ty --save-dev

Use pHTML Eleventy and pHTML Image Size in your Eleventy configuration:

const phtml11ty = require('@phtml/11ty')
const phtmlImageSize = require('@phtml/image-size')

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(phtml11ty, {
    use: [
      phtmlImageSize(/* pluginOptions */)
    ]
  })
}

Gulp

Add Gulp pHTML and pHTML Image Size to your project:

npm install @phtml/image-size gulp-phtml --save-dev

Use Gulp pHTML and pHTML Image Size in your Gulpfile:

const gulp = require('gulp')
const gulpPhtml = require('gulp-phtml')
const phtmlImageSize = require('@phtml/image-size')

gulp.task('html',
  () => gulp.src('./src/*.html').pipe(
    gulpPhtml({
      plugins: [
        phtmlImageSize(/* pluginOptions */)
      ]
    })
  ).pipe(
    gulp.dest('dist')
  )
)

Grunt

Add Grunt pHTML to your project:

npm install grunt-phtml --save-dev

Use Grunt pHTML and pHTML Image Size in your Gruntfile:

const phtmlImageSize = require('@phtml/image-size')

grunt.loadNpmTasks('grunt-phtml')

grunt.initConfig({
  phtml: {
    options: {
      plugins: [
        phtmlImageSize(/* pluginOptions */)
      ]
    },
    dist: {
      files: [{
        expand: true,
        src: 'src/*.html',
        dest: 'dest'
      }]
    }
  }
})
You can’t perform that action at this time.