当前位置： 文江博客 Node Package Readme @667/grunt-processhtml 中文文档教程

@667/grunt-processhtml 中文文档教程

发布于 4年前 浏览 24 项目主页 更新于 3年前

grunt-processhtml

NPM 版本”></a> <a href=构建状态”></a> <a href= NPM 下载

Join the chat at https://gitter.im/dciccale/grunt-processhtml

在构建时处理 html 文件以根据发布环境修改它们

Looking for the stand-alone version?

使用 node-htmlprocessor

Getting Started

这个插件需要 Grunt ^1.0.1

如果您以前没有使用过 Grunt，请务必查看 入门 指南，因为它解释了如何创建 Gruntfile 以及安装和使用 Grunt 插件。 一旦你熟悉了这个过程，你就可以用这个命令安装这个插件：

npm install grunt-processhtml --save-dev

一旦插件被安装，它可以在你的 Gruntfile 中用这行 JavaScript 启用：

grunt.loadNpmTasks('grunt-processhtml');

The "processhtml" task

使用特殊的处理 html 文件评论：

<!-- build:<type>[:target] [inline] [value] -->
...
<!-- /build -->
type

这是必需的。

类型：js、css、remove、template、include 或任何 html 属性如果这样写：[href]、[src]等。

target

这是可选的。

是您的 grunt 任务的目标名称，例如：dist。 支持所有类型，因此您始终可以根据需要指定目标。

您可以传递多个以逗号分隔的目标，例如 并且将为每个目标解析块。

inline

此修饰符可用于 js 和 css 类型。

如果使用，样式或脚本将包含在输出 html 文件中。

value

类型必需：js、css、include 和 [attr]。

可选类型：remove、template、js 和 css 带有 inline 修饰符的类型.

可以是文件名：script.min.js 或路径（如果指定了类似 [src] 的属性以保持原始文件名不变但替换其路径）。

Simple examples

build:js[:targets] [inline] <value>

将许多脚本标签替换为一个。

[:targets] 可选的构建目标。

inline 可选修饰符。

必需值：文件路径。

<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script src="app.min.js"></script>

您可以嵌入您的 javascript：

<!-- build:js inline app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script>
  // app.min.js code here
</script>

或

<!-- build:js inline -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script>
  // my/lib/path/lib.js code here then...
  // my/deep/development/path/script.js code goes here
</script>
build:css[:targets] [inline] <value>

将多个样式表链接标记替换为一个。

[:targets] 可选的构建目标。

inline 可选修饰符。

必需值：文件路径。

<!-- build:css style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->

<!-- changed to -->
<link rel="stylesheet" href="style.min.css">

您可以像上面的 js 类型一样嵌入您的样式：

<!-- build:css inline -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->

<!-- changed to -->
<style>
  /* path/to/normalize.css */
  /* path/to/main.css */
</style>

或

<!-- build:css inline style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->

<!-- changed to -->
<style>
  /* style.min.css */
</style>
build:<[attr]>[:targets] <value>

更改属性的值。 在大多数情况下，使用 [src] 和 [href] 就足够了，但它适用于任何 html 属性。

<[attr]> 必需的 html 属性，即 [src]、[href]。

[:targets] 可选的构建目标。

所需值：路径、文件路径或任何字符串值

<!-- If only a path is used, the original file name will remain -->

<!-- build:[src] js/ -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed the src attribute path -->
<script src="js/lib.js"></script>
<script src="js/script.js"></script>

<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="skins/demo/img/icon.png">
<link rel="apple-touch-icon-precomposed" href="skins/demo/img/icon-72x72.png" sizes="72x72">
<!-- /build -->

<!-- changed the href attribute path -->
<link rel="apple-touch-icon-precomposed" href="img/icon.png">
<link rel="apple-touch-icon-precomposed" href="img/icon-72x72.png" sizes="72x72">

<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

<!-- this will change the class to 'production' only when the 'dist' build is executed -->
<html class="production">
build:include[:targets] <value>

包括外部文件。

[:targets] 可选的构建目标。

必需值：文件路径。

<!-- build:include header.html -->
This will be replaced by the content of header.html
<!-- /build -->

<!-- build:include:dev dev/content.html -->
This will be replaced by the content of dev/content.html
<!-- /build -->

<!-- build:include:dist dist/content.html -->
This will be replaced by the content of dist/content.html
<!-- /build -->
build:template[:targets]

使用 options.data 中的数据对象处理模板块。

[:targets] 可选的构建目标。

<!-- build:template
<p>Hello, <%= name %></p>
/build -->

<!--
notice that the template block is commented
to prevent breaking the html file and keeping it functional
-->
build:remove[:targets]

删除一个块。

[:targets] 可选构建目标

<!-- build:remove -->
<p>This will be removed when any processhtml target is done</p>
<!-- /build -->

<!-- build:remove:dist -->
<p>But this one only when doing processhtml:dist target</p>
<!-- /build -->

Overview

在项目的 Gruntfile 中，将名为 processhtml 的部分添加到传递到 grunt.initConfig() 的数据对象中。

grunt.initConfig({
  processhtml: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options

options.process

类型：布尔值 默认值：false

通过grunt.template.process处理整个html文件，一个带有构建目标的默认对象将被传递给 {environment: target} 形式的模板，其中 environment 将是 grunt 任务的构建目标。

重要说明：如果您不想处理整个 html 文件，则不需要 process 选项。 看例子 在下面看到您可以处理模板块。

如果您确实想将整个文件作为模板处理，它将在编译内部模板块后进行编译 如果有的话。

options.environment

类型：<代码>对象 默认值：target

环境变量可以在注释中使用，它默认为任务目标。

options.data

类型：<代码>对象 默认值：{}

传递给 html 文件的对象 data 用于编译所有模板块和整个文件，如果 过程 是真的。

options.templateSettings

类型：<代码>对象 默认值：null（将使用默认的 lodash 模板分隔符 <% 和 %>）

定义 templateSettings选项与 lodash templateSettings 选项来自定义 模板语法。

templateSettings: {
  interpolate: /{{([\s\S]+?)}}/g // mustache
}

options.includeBase

类型：<代码>字符串 默认值：null（将使用包含文件的路径）

指定一个可选路径来查找包含文件。 即，app/assets/includes/

options.commentMarker

类型：String 默认值：build

指定用于指示特殊开始/结束注释的词。 如果你想使用这个插件，这很有用 与使用类似的、冲突的 build: 注释的其他插件一起使用 （例如 grunt-usemin）。

将 options.commentMarker 设置为 process 后，典型的评论如下所示：

<!-- process:<type>[:targets] [value] -->
...
<!-- /process -->

options.strip

类型：Boolean 默认值：null

指定 true 将去除与当前目标不匹配的注释：

strip: true

options.recursive

类型：Boolean 默认值：false

递归处理使用 build:include 包含的文件。

recursive: true

options.customBlockTypes

类型：数组 默认值：[]

定义定义自定义块类型的 .js 文件数组。

customBlockTypes: ['custom-blocktype.js']

自定义块类型示例：

custom-blocktype.js

'use strict';

module.exports = function (processor) {
  // This will allow to use this <!-- build:customBlock[:target] <value> --> syntax
  processor.registerBlockType('customBlock', function (content, block, blockLine, blockContent) {
    var title = '<h1>' + block.asset + '</h1>';
    var result = content.replace(blockLine, title);

    return result;
  });
};

file.html

<!-- build:customBlock myValue -->
<p>This will be replaced with the result of the custom block above</p>
<!-- /build -->

结果将是

<h1>myValue</h1>

Usage Examples

Default Options

在您的 grunt 文件中设置任务，该任务将处理 索引。 html 文件并将输出保存到 dest/index.html

grunt.initConfig({
  processhtml: {
    options: {
      data: {
        message: 'Hello world!'
      }
    },
    dist: {
      files: {
        'dest/index.html': ['index.html']
      }
    }
  }
});

What will be processed?

按照前面的任务配置，index.html 可能如下所示：

<!doctype html>
<title>title</title>

<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- /build -->

<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->

<!-- build:js app.min.js -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->

<!-- build:include header.html -->
This will be replaced by the content of header.html
<!-- /build -->

<!-- build:template
<p><%= message %></p>
/build -->

<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- /build -->

处理此文件后，输出将是：

<!doctype html>
<title>title</title>

<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<link rel="stylesheet" href="style.min.css">

<script src="app.min.js"></script>

<h1>Content from header.html</h1>

<p>Hello world!</p>

Advanced example

在这个例子中有多个我们可以根据正在运行的目标处理 html 文件的目标。

grunt.initConfig({
  processhtml: {
    dev: {
      options: {
        data: {
          message: 'This is development environment'
        }
      },
      files: {
        'dev/index.html': ['index.html']
      }
    },
    dist: {
      options: {
        process: true,
        data: {
          title: 'My app',
          message: 'This is production distribution'
        }
      },
      files: {
        'dest/index.html': ['index.html']
      }
    },
    custom: {
      options: {
        templateSettings: {
          interpolate: /{{([\s\S]+?)}}/g // mustache
        },
        data: {
          message: 'This has custom template delimiters'
        }
      },
      files: {
        'custom/custom.html': ['custom.html']
      }
    }
  }
});

待处理的index.html（custom.html如下）：

<!doctype html>
<!-- notice that no special comment is used here, as process is true.
if you don't mind having <%= title %> as the title of your app
when not being processed; is a perfectly valid title string -->
<title><%= title %></title>

<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->

<!-- build:template
<p><%= message %></p>
/build -->

<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- /build -->

<!-- build:remove:dist -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->

<!-- build:template
<% if (environment === 'dev') { %>
<script src="app.js"></script>
<% } else { %>
<script src="app.min.js"></script>
<% } %>
/build -->

待处理的custom.html：

<!doctype html>
<html>
  <head>
    <title>Custom template delimiters example</title>
  </head>

  <body>
    <!-- build:template
    {{ message }}
    /build -->
  </body>
</html>

Contributing

代替正式 文件styleguide，注意维护现有的编码风格。 为任何新的或更改的功能添加单元测试。 使用 Grunt 检查和测试您的代码。

Release History

  • 0.4.1 node-htmlprocessor@0.2.4
  • 0.4.0 Update Grunt to 1.0
  • 0.3.13 node-htmlprocessor@0.2.3 and clone data object (#85)
  • 0.3.12 Update node-htmlprocessor to version 0.2.2 (escape regex from remove)
  • 0.3.11 get ready for grunt v1.0.0
  • 0.3.10 Update node-htmlprocessor to version 0.2.1
  • 0.3.9 Update node-htmlprocessor to version 0.2.0
  • 0.3.8 Fix #74
  • 0.3.7 Update node-htmlprocessor dependency with added inline modifier
  • 0.3.6 Update node-htmlprocessor version and add specific test for templates
  • 0.3.5 Fixes issue when passing data to a template
  • 0.3.4 Fixes issue when passing a path te replace an [attr]
  • 0.3.3 Add node-htmlprocessor as a dependency
  • 0.3.2 Fix/feature #39
  • 0.3.1 Fix #35
  • 0.3.0 Allow creating custom block types.
  • 0.2.9 Added recursive option
  • 0.2.8 Changed include to not use replace()
  • 0.2.7 Added commentMarker option
  • 0.2.6 Fix #14 and added grunt-release
  • 0.2.5 Create first tag using grunt-release
  • 0.2.3 Fix #8
  • 0.2.2 Small code refactor
  • 0.2.1 Added templateSettings option tu customize template delimiters
  • 0.2.0 Added the build:include feature to include any external file
  • 0.1.1 Lint js files inside tasks/lib/
  • 0.1.0 Initial release
原文

grunt-processhtml

NPM version Build Status NPM downloads

Join the chat at https://gitter.im/dciccale/grunt-processhtml

Process html files at build time to modify them depending on the release environment

Looking for the stand-alone version?

Use node-htmlprocessor

Getting Started

This plugin requires Grunt ^1.0.1

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as 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-processhtml --save-dev

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

grunt.loadNpmTasks('grunt-processhtml');

The "processhtml" task

Process html files with special comments:

<!-- build:<type>[:target] [inline] [value] -->
...
<!-- /build -->
type

This is required.

Types: js, css, remove, template, include or any html attribute if written like this: [href], [src], etc.

target

This is optional.

Is the target name of your grunt task, for example: dist. Is supported for all types, so you can always specify the target if needed.

You can pass multiple comma-separated targets, e.g. <!-- build:remove:dist,dev,prod --> and block will be parsed for each.

inline

This modifier can be used with js and css types.

If used, the styles or scripts will be included in the output html file.

value

Required for types: js, css, include and [attr].

Optional for types: remove, template, js and css types with inline modifier.

Could be a file name: script.min.js or a path if an attribute like [src] is specified to keep the original file name intact but replace its path.

Simple examples

build:js[:targets] [inline] <value>

Replace many script tags into one.

[:targets] Optional build targets.

inline Optional modifier.

<value> Required value: A file path.

<!-- build:js app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script src="app.min.js"></script>

You can embed your javascript:

<!-- build:js inline app.min.js -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script>
  // app.min.js code here
</script>

or

<!-- build:js inline -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed to -->
<script>
  // my/lib/path/lib.js code here then...
  // my/deep/development/path/script.js code goes here
</script>
build:css[:targets] [inline] <value>

Replace many stylesheet link tags into one.

[:targets] Optional build targets.

inline Optional modifier.

<value> Required value: A file path.

<!-- build:css style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->

<!-- changed to -->
<link rel="stylesheet" href="style.min.css">

You can embed your styles like with js type above:

<!-- build:css inline -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->

<!-- changed to -->
<style>
  /* path/to/normalize.css */
  /* path/to/main.css */
</style>

or

<!-- build:css inline style.min.css -->
<link rel="stylesheet" href="path/to/normalize.css">
<link rel="stylesheet" href="path/to/main.css">
<!-- /build -->

<!-- changed to -->
<style>
  /* style.min.css */
</style>
build:<[attr]>[:targets] <value>

Change the value of an attribute. In most cases using [src] and [href] will be enough but it works with any html attribute.

<[attr]> Required html attribute, i.e. [src], [href].

[:targets] Optional build targets.

<value> Required value: A path, a file path or any string value

<!-- If only a path is used, the original file name will remain -->

<!-- build:[src] js/ -->
<script src="my/lib/path/lib.js"></script>
<script src="my/deep/development/path/script.js"></script>
<!-- /build -->

<!-- changed the src attribute path -->
<script src="js/lib.js"></script>
<script src="js/script.js"></script>

<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="skins/demo/img/icon.png">
<link rel="apple-touch-icon-precomposed" href="skins/demo/img/icon-72x72.png" sizes="72x72">
<!-- /build -->

<!-- changed the href attribute path -->
<link rel="apple-touch-icon-precomposed" href="img/icon.png">
<link rel="apple-touch-icon-precomposed" href="img/icon-72x72.png" sizes="72x72">

<!-- build:[class]:dist production -->
<html class="debug_mode">
<!-- /build -->

<!-- this will change the class to 'production' only when the 'dist' build is executed -->
<html class="production">
build:include[:targets] <value>

Include an external file.

[:targets] Optional build targets.

<value> Required value: A file path.

<!-- build:include header.html -->
This will be replaced by the content of header.html
<!-- /build -->

<!-- build:include:dev dev/content.html -->
This will be replaced by the content of dev/content.html
<!-- /build -->

<!-- build:include:dist dist/content.html -->
This will be replaced by the content of dist/content.html
<!-- /build -->
build:template[:targets]

Process a template block with a data object inside options.data.

[:targets] Optional build targets.

<!-- build:template
<p>Hello, <%= name %></p>
/build -->

<!--
notice that the template block is commented
to prevent breaking the html file and keeping it functional
-->
build:remove[:targets]

Remove a block.

[:targets] Optional build targets

<!-- build:remove -->
<p>This will be removed when any processhtml target is done</p>
<!-- /build -->

<!-- build:remove:dist -->
<p>But this one only when doing processhtml:dist target</p>
<!-- /build -->

Overview

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

grunt.initConfig({
  processhtml: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
})

Options

options.process

Type: Boolean Default value: false

Process the entire html file through grunt.template.process, a default object with the build target will be passed to the template in the form of {environment: target} where environment will be the build target of the grunt task.

Important note: The process option is not needed if you don't want to process the entire html file. See the example below to see that you can have templates blocks to be processed.

If you do want to process the whole file as a template, it will be compiled after compiling the inside template blocks if any.

options.environment

Type: Object Default value: target

The environemnt variable will be available to use in the comments, it defaults to the task target.

options.data

Type: Object Default value: {}

An object data that is passed to the html file used to compile all template blocks and the entire file if process is true.

options.templateSettings

Type: Object Default value: null (Will use default lodash template delimiters <% and %>)

Define the templateSettings option with lodash templateSettings options to customize the template syntax.

templateSettings: {
  interpolate: /{{([\s\S]+?)}}/g // mustache
}

options.includeBase

Type: String Default value: null (Will use the path of the including file)

Specify an optional path to look for include files. ie, app/assets/includes/

options.commentMarker

Type: String Default value: build

Specify the word used to indicate the special begin/end comments. This is useful if you want to use this plugin in conjunction with other plugins that use a similar, conflicting build:<type> comment (such as grunt-usemin).

With options.commentMarker set to process, a typical comment would look like:

<!-- process:<type>[:targets] [value] -->
...
<!-- /process -->

options.strip

Type: Boolean Default value: null

Specifying true will strip comments which do not match the current target:

strip: true

options.recursive

Type: Boolean Default value: false

Recursively process files that are being included using build:include.

recursive: true

options.customBlockTypes

Type: Array Default value: []

Define an array of .js files that define custom block types.

customBlockTypes: ['custom-blocktype.js']

A custom block type example:

custom-blocktype.js

'use strict';

module.exports = function (processor) {
  // This will allow to use this <!-- build:customBlock[:target] <value> --> syntax
  processor.registerBlockType('customBlock', function (content, block, blockLine, blockContent) {
    var title = '<h1>' + block.asset + '</h1>';
    var result = content.replace(blockLine, title);

    return result;
  });
};

file.html

<!-- build:customBlock myValue -->
<p>This will be replaced with the result of the custom block above</p>
<!-- /build -->

The result will be

<h1>myValue</h1>

Usage Examples

Default Options

Set the task in your grunt file which is going to process the index.html file and save the output to dest/index.html

grunt.initConfig({
  processhtml: {
    options: {
      data: {
        message: 'Hello world!'
      }
    },
    dist: {
      files: {
        'dest/index.html': ['index.html']
      }
    }
  }
});

What will be processed?

Following the previous task configuration, the index.html could look like this:

<!doctype html>
<title>title</title>

<!-- build:[href] img/ -->
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="my/theme/img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">
<!-- /build -->

<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->

<!-- build:js app.min.js -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->

<!-- build:include header.html -->
This will be replaced by the content of header.html
<!-- /build -->

<!-- build:template
<p><%= message %></p>
/build -->

<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- /build -->

After processing this file, the output will be:

<!doctype html>
<title>title</title>

<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<link rel="stylesheet" href="style.min.css">

<script src="app.min.js"></script>

<h1>Content from header.html</h1>

<p>Hello world!</p>

Advanced example

In this example there are multiple targets where we can process the html file depending on which target is being run.

grunt.initConfig({
  processhtml: {
    dev: {
      options: {
        data: {
          message: 'This is development environment'
        }
      },
      files: {
        'dev/index.html': ['index.html']
      }
    },
    dist: {
      options: {
        process: true,
        data: {
          title: 'My app',
          message: 'This is production distribution'
        }
      },
      files: {
        'dest/index.html': ['index.html']
      }
    },
    custom: {
      options: {
        templateSettings: {
          interpolate: /{{([\s\S]+?)}}/g // mustache
        },
        data: {
          message: 'This has custom template delimiters'
        }
      },
      files: {
        'custom/custom.html': ['custom.html']
      }
    }
  }
});

The index.html to be processed (the custom.html is below):

<!doctype html>
<!-- notice that no special comment is used here, as process is true.
if you don't mind having <%= title %> as the title of your app
when not being processed; is a perfectly valid title string -->
<title><%= title %></title>

<!-- build:css style.min.css -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="main.css">
<!-- /build -->

<!-- build:template
<p><%= message %></p>
/build -->

<!-- build:remove -->
<p>This is the html file without being processed</p>
<!-- /build -->

<!-- build:remove:dist -->
<script src="js/libs/require.js" data-main="js/config.js"></script>
<!-- /build -->

<!-- build:template
<% if (environment === 'dev') { %>
<script src="app.js"></script>
<% } else { %>
<script src="app.min.js"></script>
<% } %>
/build -->

The custom.html to be processed:

<!doctype html>
<html>
  <head>
    <title>Custom template delimiters example</title>
  </head>

  <body>
    <!-- build:template
    {{ message }}
    /build -->
  </body>
</html>

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

  • 0.4.1 node-htmlprocessor@0.2.4
  • 0.4.0 Update Grunt to 1.0
  • 0.3.13 node-htmlprocessor@0.2.3 and clone data object (#85)
  • 0.3.12 Update node-htmlprocessor to version 0.2.2 (escape regex from remove)
  • 0.3.11 get ready for grunt v1.0.0
  • 0.3.10 Update node-htmlprocessor to version 0.2.1
  • 0.3.9 Update node-htmlprocessor to version 0.2.0
  • 0.3.8 Fix #74
  • 0.3.7 Update node-htmlprocessor dependency with added inline modifier
  • 0.3.6 Update node-htmlprocessor version and add specific test for templates
  • 0.3.5 Fixes issue when passing data to a template
  • 0.3.4 Fixes issue when passing a path te replace an [attr]
  • 0.3.3 Add node-htmlprocessor as a dependency
  • 0.3.2 Fix/feature #39
  • 0.3.1 Fix #35
  • 0.3.0 Allow creating custom block types.
  • 0.2.9 Added recursive option
  • 0.2.8 Changed include to not use replace()
  • 0.2.7 Added commentMarker option
  • 0.2.6 Fix #14 and added grunt-release
  • 0.2.5 Create first tag using grunt-release
  • 0.2.3 Fix #8
  • 0.2.2 Small code refactor
  • 0.2.1 Added templateSettings option tu customize template delimiters
  • 0.2.0 Added the build:include feature to include any external file
  • 0.1.1 Lint js files inside tasks/lib/
  • 0.1.0 Initial release
更多

你可能也喜欢

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文