Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
grunt-processhtml
Advanced tools
grunt-processhtml - npm Package Compare versions
Comparing version 0.2.0 to 0.2.1
| { | ||
| "name": "grunt-processhtml", | ||
| "description": "Process html files at build time to modify them depending on the release environment", | ||
| "version": "0.2.0", | ||
| "version": "0.2.1", | ||
| "homepage": "https://github.com/dciccale/grunt-processhtml", | ||
@@ -6,0 +6,0 @@ "author": { |
209
README.md
@@ -30,17 +30,70 @@ # grunt-processhtml [](https://travis-ci.org/dciccale/grunt-processhtml) [](http://badge.fury.io/js/grunt-processhtml) | ||
| - type (required) is one of: js, css, remove or template. or any html attribute if written like this: [href], [src], | ||
| etc. | ||
| - target (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. | ||
| - value (optional) could be: script.min.js or a path if an attribute like [src] is specified to keep the original src | ||
| filename intact but replace its path. | ||
| ##### type | ||
| This is required. | ||
| Types: `js`, `css`, `remove`, `template` or `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. | ||
| ##### value | ||
| Required for types: `js`, `css`, `include` and `[attr]`. | ||
| Optional for types: `remove`, `template`. | ||
| 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[:target] <value>` | ||
| Replace many script tags into one. | ||
| `[:target]` Optional build target. | ||
| `<value>` Required value: A file path. | ||
| ```html | ||
| <!-- | ||
| Change only the path of the src attribute and keep the original src filename. | ||
| This will replace the src path of many script tags if inside the build comment block. | ||
| --> | ||
| <!-- build:js app.min.js --> | ||
| <script src="my/lib/path/lib.js"></script> | ||
| <script src="my/deep/development/path/script.js"></script> | ||
| <!-- /build --> | ||
| <!-- changeg to --> | ||
| <script src="app.min.js"></script> | ||
| ``` | ||
| ##### `build:css[:target] <value>` | ||
| Replace many stylesheet link tags into one. | ||
| `[:target]` Optional build target. | ||
| `<value>` Required value: A file path. | ||
| ```html | ||
| <!-- 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"> | ||
| ``` | ||
| ##### `build:<[attr]>[:target] <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]`. | ||
| `[:target]` Optional build target. | ||
| `<value>` Required value: A path or a file path. | ||
| ```html | ||
| <!-- If only a path is used, the original file name will remain --> | ||
| <!-- build:[src] js/ --> | ||
@@ -50,21 +103,55 @@ <script src="my/lib/path/lib.js"></script> | ||
| <!-- /build --> | ||
| <!-- this will change only the path to --> | ||
| <!-- changed the src attribute path --> | ||
| <script src="js/lib.js"></script> | ||
| <script src="js/script.js"></script> | ||
| <!-- build:remove --> | ||
| <p>This will be removed when any process is done</p> | ||
| <!-- 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 --> | ||
| <!-- build:remove:dist --> | ||
| <p>But this one only when doing processhtml:dist</p> | ||
| <!-- 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 --> | ||
| <!-- build:css style.min.css --> | ||
| <link rel="stylesheet" href="path/to/normalize.css"> | ||
| <link rel="stylesheet" href="path/to/main.css"> | ||
| <!-- this will change the class to 'production' only when de 'dist' build is executed --> | ||
| <html class="production"> | ||
| ``` | ||
| ##### `build:include[:target] <value>` | ||
| Include an external file. | ||
| `[:target]` Optional build target. | ||
| `<value>` Required value: A file path. | ||
| ```html | ||
| <!-- build:include header.html --> | ||
| This will be replaced by the content of header.html | ||
| <!-- /build --> | ||
| <!-- when any process done will change to --> | ||
| <link rel="stylesheet" href="style.min.css"> | ||
| <!-- build:include:dev dev/content.html --> | ||
| This will be replaced by the content of dev/header.html | ||
| <!-- /build --> | ||
| <!-- build:include:dist dist/content.html --> | ||
| This will be replaced by the content of dist/content.html | ||
| <!-- /build --> | ||
| ``` | ||
| ##### `build:template[:target]` | ||
| Process a template block with a data object inside [options.data](#optionsdata). | ||
| `[:target]` Optional build target. | ||
| ```html | ||
| <!-- build:template | ||
@@ -80,2 +167,18 @@ <p>Hello, <%= name %></p> | ||
| ##### `build:remove[:target]` | ||
| Remove a block. | ||
| `[:target]` Optional build target | ||
| ```html | ||
| <!-- 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 | ||
@@ -120,2 +223,16 @@ In your project's Gruntfile, add a section named `processhtml` to the data object passed into `grunt.initConfig()`. | ||
| #### options.templateSettings | ||
| Type: `Object` | ||
| Default value: `null` (Will use default grunt template delimiters `<%` and `%>`) | ||
| Define the `templateSettings` option with a custom `opener` and `closer` delimiters to customize the | ||
| template syntax delimiters. | ||
| ```javascript | ||
| templateSettings: { | ||
| opener: '{{', | ||
| closer: '}}' | ||
| } | ||
| ``` | ||
| ### Usage Examples | ||
@@ -161,2 +278,10 @@ | ||
| <!-- 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 | ||
@@ -169,6 +294,2 @@ <p><%= message %></p> | ||
| <!-- /build --> | ||
| <!-- build:js app.min.js --> | ||
| <script src="js/libs/require.js" data-main="js/config.js"></script> | ||
| <!-- /build --> | ||
| ``` | ||
@@ -187,5 +308,7 @@ | ||
| <script src="app.min.js"></script> | ||
| <h1>Content from header.html</h1> | ||
| <p>Hello world!</p> | ||
| <script src="app.min.js"></script> | ||
| ``` | ||
@@ -220,2 +343,16 @@ | ||
| } | ||
| }, | ||
| custom: { | ||
| options: { | ||
| templateSettings: { | ||
| opener: '{{', | ||
| closer: '}}' | ||
| }, | ||
| data: { | ||
| message: 'This has custom template delimiters' | ||
| } | ||
| }, | ||
| files: { | ||
| 'custom/custom.html': ['custom.html'] | ||
| } | ||
| } | ||
@@ -226,3 +363,3 @@ } | ||
| The `html` to be processed: | ||
| The `index.html` to be processed (the `custom.html` is below): | ||
@@ -262,2 +399,18 @@ ```html | ||
| The `custom.html` to be processed: | ||
| ```html | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>Custom template delimiters example</title> | ||
| </head> | ||
| <body> | ||
| <!-- build:template | ||
| {{= message }} | ||
| /build --> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| ## Contributing | ||
@@ -267,3 +420,5 @@ 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](http://gruntjs.com/). | ||
| ## Release History | ||
| - 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 |
@@ -5,7 +5,7 @@ 'use strict'; | ||
| var fs = require('fs'); | ||
| var utils = require('./utils'); | ||
| exports.init = function (grunt) { | ||
| var utils = require('./utils').init(grunt); | ||
| var _ = grunt.util._; | ||
| var _tmplData, _filePath; | ||
| var _options, _filePath; | ||
@@ -59,7 +59,7 @@ var getBlocks = function (content) { | ||
| var HTMLProcessor = function (content, tmplData, filePath) { | ||
| var HTMLProcessor = function (content, options, filePath) { | ||
| this.content = content; | ||
| _tmplData = tmplData || {}; | ||
| _options = options || {}; | ||
| _filePath = filePath || ''; | ||
| this.target = tmplData.environment; | ||
| this.target = _options.data.environment; | ||
| this.linefeed = /\r\n/g.test(content) ? '\r\n' : '\n'; | ||
@@ -100,3 +100,3 @@ this.blocks = getBlocks(content); | ||
| template: function (content, block, blockLine, blockContent) { | ||
| var compiledTmpl = _.template(blockContent, _tmplData); | ||
| var compiledTmpl = utils.template(blockContent, _options); | ||
| // clean template output and fix indent | ||
@@ -103,0 +103,0 @@ compiledTmpl = block.indent + _.trim(compiledTmpl).replace(/([\r\n])\s*/g, '$1' + block.indent); |
| 'use strict'; | ||
| var escapeRegExp = function (str) { | ||
| return str.replace(/([.?*+\^=!:$\[\]\\(){}|\-])/g, '\\$1'); | ||
| }; | ||
| exports.init = function (grunt) { | ||
| var exports = {}; | ||
| exports.blockToRegExp = function (blockLine) { | ||
| var escaped = escapeRegExp(blockLine); | ||
| return new RegExp(escaped.replace(/^\s*|[\r\n]+\s*/g, '\\s*').replace(/\n{1}$/g, '\\n')); | ||
| var escapeRegExp = function (str) { | ||
| return str.replace(/([.?*+\^=!:$\[\]\\(){}|\-])/g, '\\$1'); | ||
| }; | ||
| exports.blockToRegExp = function (blockLine) { | ||
| var escaped = escapeRegExp(blockLine); | ||
| return new RegExp(escaped.replace(/^\s*|[\r\n]+\s*/g, '\\s*').replace(/\n{1}$/g, '\\n')); | ||
| }; | ||
| exports.template = function (tmpl, options) { | ||
| return grunt.template.process(tmpl, options); | ||
| }; | ||
| return exports; | ||
| }; |
@@ -14,2 +14,3 @@ /* | ||
| var utils = require('./lib/utils').init(grunt); | ||
| var HTMLProcessor = require('./lib/htmlprocessor').init(grunt); | ||
@@ -21,9 +22,18 @@ | ||
| process: false, | ||
| data: {} | ||
| data: {}, | ||
| templateSettings: null | ||
| }); | ||
| var data = grunt.util._.extend(options.data, { | ||
| // extend template data | ||
| grunt.util._.extend(options.data, { | ||
| environment: this.target | ||
| }); | ||
| // set custom delimiters | ||
| var templateSettings = options.templateSettings; | ||
| if (templateSettings && templateSettings.opener && templateSettings.closer) { | ||
| grunt.template.addDelimiters('lodash', templateSettings.opener, templateSettings.closer); | ||
| options.delimiters = 'lodash'; | ||
| } | ||
| this.files.forEach(function (f) { | ||
@@ -39,6 +49,6 @@ var src = f.src.filter(function (filepath) { | ||
| var content = grunt.file.read(filepath); | ||
| var html = new HTMLProcessor(content, data, filepath); | ||
| var html = new HTMLProcessor(content, options, filepath); | ||
| content = html.process(); | ||
| if (options.process) { | ||
| content = grunt.template.process(content, options); | ||
| content = utils.template(content, options); | ||
| } | ||
@@ -45,0 +55,0 @@ return content; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by25.5%
19720
- Lines of code
- increased by9.52%
184
- Number of lines in readme file
- increased by59.85%
414
No dependency changes