grunt-inline

2019-10-12

grunt-inline是什么

什么是grunt-inline,Inlines img, script and link tags into the same file.

grunt-inline使用教程帮助文档

build status">grunt-inlinebuild status

Brings externally referenced resources, such as js, css and images, into a single file.

For exmample:

<link href="css/style.css?__inline=true" rel="stylesheet" />

is replaced with

<style>
/* contents of css/style.css */
</style>

Javascript references are brought inline, and images in the html and css blocks are converted to base-64 data: urls.

By default, only urls marked with __inlineare converted, however this behavior can be overrided via the tag:option.

Getting Started

This plugin requires Grunt ~0.4.1

If you haven't used Gruntbefore, be sure to check out the Getting Startedguide, as it explains how to create a Gruntfileas well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-inline --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-inline');

The "grunt-inline" task

Overview

In your project's Gruntfile, add a section named inlineto the data object passed into grunt.initConfig().

grunt.initConfig({
  inline: {
    dist: {
      src: 'src/index.html',
      dest: 'dist/index.html'
    }
  }
})

Options

dest

If dest is assigned, the the source file will be copied to the destination path. eg: src/index.htmlwill be processed and then copied to dist/index.html

grunt.initConfig({
  inline: {
    dist: {
      src: 'src/index.html',
      dest: 'dist/index.html'
    }
  } 
});

cssmin

If cssmin is assigned true, .csswill be minified before inlined.

grunt.initConfig({
  inline: {
    dist: {
      options:{
        cssmin: true
      },
      src: 'src/index.html',
      dest: 'dist/index.html'
    }
  }
});

tag (defaults to __inline)

Only URLs that contain the value for tagwill be inlined. Specify tag: ''to include all urls.

grunt.initConfig({
  inline: {
    dist: {
      options:{
        tag: ''
      },
      src: 'src/index.html',
      dest: 'dist/index.html']
    }
  }
});

inlineTagAttributes

Ability to add attributes string to inline tag.

grunt.initConfig({
  inline: {
    dist: {
      options:{
        inlineTagAttributes: {
          js: 'data-inlined="true"',    // Adds ```<script data-inlined="true">...</script>
css: 'data-inlined="true"'    // Adds ```<style data-inlined="true">...</style>```
    },
    src: 'src/index.html',
    dest: 'dist/index.html'
 }

} });

### uglify

If uglify is assigned true, `.js` file will be minified before inlined.

```source-js
grunt.initConfig({
  inline: {
    dist: {
      options:{
        uglify: true
      },
      src: 'src/index.html',
      dest: 'dist/index.html'
    }
  }
});

exts

Setting an exts array allows multiple file extensions to be processed as html.

grunt.initConfig({
  inline: {
    dist: {
      options:{
        exts: ['jade'],
        uglify: true
      },
      src: 'src/index.jade',
      dest: 'dist/index.jade'
    }
  }
});

Usage Examples

config

grunt.initConfig({
  inline: {
    dist: {
      src: 'src/index.html'
    }
  }
})

src/index.html

<html>
<head>
  <title>demo</title>
  <link href="css/style.css?__inline=true" rel="stylesheet" />
</head>
<body>
  <img src="img/icon.png?__inline=true" />

  <script src="js/erport.js?__inline=true"></script>
</body>
</html>

after grunt inlinewas run, it will be something like

<html>
<head>
  <title>demo</title>
  <style>
  .container{
    padding: 0;
    }
  </style>
</head>
<body>
  <! -- base64, a terrible mass you know…so just show a little bit ...--> 
  <img src="idata:image/png;base64data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAYCAYAAAChg0BHAA..." />

  <script>
  var Report = (function(){ 
    return {
      init: function(){
      }
    };
  })();
</script>
</body>
</html>

inline tag

Suppose there is an <inline>tag in index.htmllike bellow

<!-- inline tag -->
<inline src="test.html" />

The content of test.htmlis

<p>I'm inline html</p>
<span>hello world!</span>

Then, after the inlinetask is run, the original content in index.htmlwill be replaced with

<p>I'm inline html</p>
<span>hello world!</span>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

  • 2015-01-09 v0.3.3 bug fix: when processing files of a folder and then copy the processed content to another destination, the original files are changed unexpectedly, as mentioned in this issue Support file globbing for input and output
  • 2014-06-16 v0.3.1 bug fix: protocol-relative urls in css are messed up
  • 2014-06-15 v0.3.1 bug fix: when options.tag is '', then all img tags, whose src attribute has already been inlined will be matched.
  • 2014-05-19 v0.3.0 support for new options.exts
  • 2014-05-19 v0.2.9 bug fix: options.tag is assigned '', bug image url in css are not converted to base64 formate
  • 2014-03-06 v0.2.6 bug fix: script tags like <script src="index.js?__inline">\n</script> were not inlined
  • 2014-01-31 v0.2.3 radded tag option, encode url(..) images.
  • 2013-10-31  v0.2.2 bug fix: img urls like 'background: url(http://www.example.com/img/bg.png)' will be transformed to 'background: url(url(http://www.example.com/img/bg.png))'
  • 2013-10-30  v0.2.1 bug fix: when processing relative file path of img url in css stylesheet, forgot to transform "" to "/" for windows users
  • 2013-10-30  v0.2.0 new feature: Support for minifing js、css when they ar inlined into html.
  • 2013-08-30  v0.1.9 bug fix: stylesheets ended with ">" cannot be inlined
  • 2013-09-02  v0.1.9 add feature: add options.dest to assign a destination path where the source file will be copied
  • 2013-09-02  v0.1.8 add feature: support for <inline>tag

上一篇:grunt-jw-uglify
下一篇:grunt-jstools
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部