gis

gulp-inline-source-from

Tool for inlining flagged js, css, and img sources in html

Showing:

Popularity

Downloads/wk

9

GitHub Stars

0

Maintenance

Last Commit

5yrs ago

Contributors

7

Package

Dependencies

7

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

NPM Version

gulp-inline-source-from

Inline tags that contain the from attribute. Supports <script>, <link>, and especialy <style>. This module was created because I wanted to use CSS preprocessors like LESS or SASS for my Polymer project and I needed a way to inline my compiled styles into my source *.html over and over. With this module you can place <style from='./path/to.css'> inside your html souce file and when you run the gulp task it it will pickup the file referenced in from attribute and inline it inside the element, while preserving the from attribute. This module is forked and modified from excelent module inline-source and it's gulp variant gulp-inline-source I make no claim to their code and I thak them very much.

How it works

<!-- located at /elements/my-element.html -->
<dom-module is="my-element">
    <!-- inline ./my-element.css generated from ./my-element.less -->
    <style from="./my-element.css"></style>
  <template>
  </template>
  <!-- inline ./my-element.js generated from ./my-element.ts -->
  <script from="./my-element.js"></script>
</dom-module>
/* located at ./my-element.css */

:host {
  color: blue;
}
// located at ./my-element.js

Polymer({
      is: 'my-element'
    });

Output:

<!-- located at /elements/my-element.html -->
<dom-module is="my-element">
    <!-- inline ./my-element.css generated from ./my-element.less -->
    <style from="./my-element.css">
      :host {
        color: blue;
      }
    </style>
  <template>
  </template>
  <!-- inline ./my-element.js generated from ./my-element.ts -->
  <script from="./my-element.js">
    Polymer({
      is: 'my-element'
    });
  </script>
</dom-module>

Install

$ npm install gulp-inline-source-from --save-dev

Usage

var gulp = require('gulp');
var inlinefrom = require('gulp-inline-source-from');

gulp.task('inline', function () {
    return gulp.src("./elements/**/*.html").pipe(inlinefrom()).pipe(gulp.dest("./out/"));
    //return gulp.src("./elements/**/*.html").pipe(inline()).pipe(gulp.dest("./elements/")); //WARNING this will starts to overwrite your files, use with causion when you are confident it works as you expect it to.
});

Optionally, you can provide some options through an options object, BUT BE WARNED: I have made some braking changes to the original code, so some functionality is lost.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100