https://github.com/flashlizi/posthtml-transformer

A posthtml plugin for transforming HTML contents, such as scripts and styles
https://github.com/flashlizi/posthtml-transformer

Last synced: about 2 months ago
JSON representation

A posthtml plugin for transforming HTML contents, such as scripts and styles

• Host: GitHub
• URL: https://github.com/flashlizi/posthtml-transformer
• Owner: flashlizi
• License: mit
• Created: 2015-11-26T08:28:40.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-26T10:19:27.000Z (almost 9 years ago)
• Last Synced: 2024-07-15T13:44:34.258Z (2 months ago)
• Language: JavaScript
• Size: 8.79 KB
• Stars: 9
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# posthtml-transfomer

posthtml-transfomer is plugin for [PostHTML](https://github.com/posthtml/posthtml). It process HTML by special directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc.

## Directives

* `ph-inline` - Load `script` and `link` code and make them inline.

* `ph-remove` - Remove tags which specified this directive.

* `ph-concat-start` and `ph-concat-end` - Concat `script` and `link` code.

## Examples

`ph-inline` directive:

``` javascript

// src/lib.js

console.log('hello posthtml-transformer');

// index.html

// index.html after transform

  console.log('hello posthtml-transformer');

```

`ph-remove` directive:

``` javascript

// index.html

  

// index.html after transform

```

`ph-concat-start` and `ph-concat-end` directive:

``` javascript

// src/mod1.js

console.log('mod1');

// src/mod2.js

console.log('mod2');

// src/mod3.js

console.log('mod3');

// index.html

  

  

  

// index.html after transform

  

    console.log('mod1');

    console.log('mod2');

    console.log('mod3');

  

```

## Gulp Usage

Install posthtml-transformer:

```

npm install posthtml-transformer --save-dev

```

``` javascript

var gulp = require('gulp');

var posthtml = require('gulp-posthtml');

var phTransformer = require('posthtml-transformer');

gulp.task('posthtml', function(){

  var plugins = [

    phTransformer({

      minifyJS: true,

      minifyCSS: true

    }),

    // phTransformer.match({tag:'html'}, function(node){

    //   node.attrs = {'hello': 'world'};

    //   return node;

    // }),

    // phTransformer.walk(function(node){

    //   console.log('walk:', node.tag);

    //   return node;

    // })

  ];

  return gulp.src('index.html')

    .pipe(posthtml(plugins))

    .on('error', function(err){

      console.error('error:', err);

    })

    .pipe(gulp.dest('./build/'))

});

```

## Options

* `minifyJS` - minify javascript in HTML, default is `true`.

* `minifyCSS` - minify css in HTML, default is `true`.

## APIs

* `match` - same as `PostHTML`'s `match`.

* `walk` - same as `PostHTML`'s `walk`.