New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
grunt-bake
Advanced tools
grunt-bake - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
@@ -64,2 +64,24 @@ /* | ||
| } | ||
| }, | ||
| recursive_process: { | ||
| options: { | ||
| content: "test/fixtures/content.json", | ||
| section: "en", | ||
| }, | ||
| files: { | ||
| "tmp/recursive.html": "test/fixtures/recursive.html" | ||
| } | ||
| }, | ||
| inline_content: { | ||
| options: { | ||
| content: "test/fixtures/content.json", | ||
| section: "en" | ||
| }, | ||
| files: { | ||
| "tmp/inline.html": "test/fixtures/inline.html" | ||
| } | ||
| } | ||
@@ -66,0 +88,0 @@ }, |
| { | ||
| "name": "grunt-bake", | ||
| "description": "Bake external includes into the file to create static pages with no compilation time", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "homepage": "https://github.com/MathiasPaumgarten/grunt-bake", | ||
@@ -44,4 +44,6 @@ "author": { | ||
| "static page", | ||
| "templates" | ||
| "templates", | ||
| "static", | ||
| "include" | ||
| ] | ||
| } |
128
README.md
| # grunt-bake | ||
| > Bake external includes into the file to create static pages with no compilation time | ||
| > Bake static pages for production while using modular files while in development. | ||
| ## Getting Started | ||
@@ -23,4 +24,11 @@ This plugin requires Grunt `~0.4.0` | ||
| ### Overview | ||
| In your project's Gruntfile, add a section named `bake` to the data object passed into `grunt.initConfig()`. | ||
| This module helps creating static pages while still having the coding comfort of multiple small files. It also helps not to repeat yourself as includes can be used at multiple places. | ||
| The module parses the files recursivly, meaning it allows for nested includes. While parsing the includes it also performs a simple find and replace on placeholders. The replacements are supplied in a JSON file but more an [here](#advanced-bake). | ||
| When `grunt-bake` parses files it looks for anchors like this: `<!--(bake path/to/file.html)-->`. | ||
| Setup the `bake` task like so: | ||
| ```js | ||
@@ -37,3 +45,3 @@ grunt.initConfig( { | ||
| "dist/file.html": "app/file.html", | ||
| "dist/index.html": "app/index.html", | ||
| "dist/mobile.html": "app/mobile.html" | ||
@@ -48,3 +56,3 @@ | ||
| The file to be parsed includes placeholders in this form: | ||
| With a `app/index.html` file like this one: | ||
@@ -55,4 +63,4 @@ ```html | ||
| <body> | ||
| <!--(bake includes/file.html)--> | ||
| <!--(bake includes/mobile.html)--> | ||
| <!--(bake includes/container.html)--> | ||
| <!--(bake includes/footer.html)--> | ||
| </body> | ||
@@ -70,10 +78,4 @@ </html> | ||
| A string value that determines the location of the JSON file used to parse the includes with. | ||
| A string value that determines the location of the JSON file that is used to fill the place holders. | ||
| #### options.verbose | ||
| Type: `Boolean` | ||
| Default value: `false` | ||
| A string value that determines weather the grunt-bake should give extra console output. This can be used to track and debug which files have been created. | ||
| #### options.section | ||
@@ -113,13 +115,10 @@ Type: `String` | ||
| The function gets passed to arguments: | ||
| * template: `String`: representing the template to parse. | ||
| * content: `Object`: the section of the content file. | ||
| The function gets passed two arguments: | ||
| * `String`: representing the template to parse. | ||
| * `Object`: the content from the JSON file as object. | ||
| The default process parses the include looking for `{{title}}` and replaces the content with the value passed in the JSON. | ||
| If no match is found, it simply removes the placeholder. | ||
| ### Usage Examples | ||
| #### Default Options | ||
| #### Simple bake | ||
| This example shows a simple baking process with all default options. | ||
@@ -138,4 +137,27 @@ | ||
| ``` | ||
| _app/base.html_: | ||
| ```html | ||
| <html> | ||
| <body> | ||
| <!--(bake includes/container.html)--> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| #### Advanced bake | ||
| _app/includes/container.html_: | ||
| ```html | ||
| <div id="container"></div> | ||
| ``` | ||
| This bake task will create _app/index.html_: | ||
| ```html | ||
| <html> | ||
| <body> | ||
| <div id="container"></div> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| #### Bake with content | ||
| This example shows how to use the bake process to parse the templates with a provided JSON and a section. | ||
@@ -160,5 +182,5 @@ | ||
| As an example for the `content.json`: | ||
| _app/content.json_: | ||
| ```javascript | ||
| ```json | ||
| { | ||
@@ -175,2 +197,57 @@ "en": { | ||
| _app/base.html_: | ||
| ```html | ||
| <html> | ||
| <body> | ||
| <!--(bake includes/container.html)--> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| _app/includes/container.html_: | ||
| ```html | ||
| <div id="container">{{title}}</div> | ||
| ``` | ||
| This bake task will create _app/index.html_: | ||
| ```html | ||
| <html> | ||
| <body> | ||
| <div id="container">Hello World</div> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| #### Inline attributes | ||
| In addition to the file the bake anchor tag also allows for inline attributs which will override the content from the JSON file. | ||
| Same scenario as above. | ||
| _app/base.html_: | ||
| ```html | ||
| <html> | ||
| <body> | ||
| <!--(bake includes/container.html title="Salut Monde" name="Mathias")--> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| _app/includes/container.html_: | ||
| ```html | ||
| <div id="container">{{title}}</div> | ||
| <span>{{name}}</span> | ||
| ``` | ||
| This bake task will create _app/index.html_: | ||
| ```html | ||
| <html> | ||
| <body> | ||
| <div id="container">Salut monde</div> | ||
| <span>Mathias</span> | ||
| </body> | ||
| </html> | ||
| ``` | ||
| #### Costum process | ||
@@ -182,3 +259,3 @@ This example shows the use of a costum process funtion. | ||
| var processFunction( source, content ) { | ||
| return ... | ||
| return source + "<br>"; | ||
| } | ||
@@ -203,3 +280,3 @@ | ||
| ### Continues Development | ||
| ### Continues development | ||
@@ -216,2 +293,3 @@ For ease of development just add the `bake` task to your watch list. The static page will be baked everytime you change the template. | ||
| ## Release History | ||
| * 2013-03-01 v0.0.3 Adding support for recursive parsing and inline attributes | ||
| * 2013-02-27 v0.0.1 Initial Release |
| /* | ||
| * grunt-bake | ||
| * https://github.com/MathiasPaumgarten/grunt-bake | ||
| * | ||
| * | ||
| * Copyright (c) 2013 Mathias Paumgarten | ||
@@ -15,2 +15,9 @@ * Licensed under the MIT license. | ||
| // ======================= | ||
| // -- DEFAULT PROCESSOR -- | ||
| // ======================= | ||
| // This process method is used when no process function is supplied. | ||
| var defaultProcess = function( template, content ) { | ||
@@ -22,5 +29,11 @@ return template.replace( /{{(\w*)}}/g, function( match, key ) { | ||
| // ============= | ||
| // -- OPTIONS -- | ||
| // ============= | ||
| // Merging the passed otions with the default settingss | ||
| var options = this.options( { | ||
| content: null, | ||
| verbose: false, | ||
| section: null, | ||
@@ -30,4 +43,18 @@ process: defaultProcess | ||
| var regex = /<!--\([ ]?bake[ ]+([\S]+)[ ]?\)-->/g; | ||
| // =========== | ||
| // -- UTILS -- | ||
| // =========== | ||
| // Regex to parse bake tags. The regex returns file path as match. | ||
| var regex = /<!--\(\s?bake\s+([\S]+)\s?([\S ]*)\)-->/g; | ||
| // Regex to parse attributes. | ||
| var attributesRegex = /([\S]+)=["|']([\w ]+)["|']/g; | ||
| // Method to check wether file exists and warn if not. | ||
| var checkFile = function( src ) { | ||
@@ -42,8 +69,59 @@ if ( ! grunt.file.exists( src ) ) { | ||
| var log = function( message ) { | ||
| if ( options.verbose ) { | ||
| grunt.log.ok( message ); | ||
| // Returns the directory path from a file path | ||
| var directory = function( path ) { | ||
| var directory = path.split( "/" ); | ||
| directory.pop(); | ||
| return directory.join( "/" ); | ||
| } | ||
| // Parses attribute string. | ||
| var parseInlineOptions = function( string ) { | ||
| var match; | ||
| var values = {}; | ||
| while( match = attributesRegex.exec( string ) ) { | ||
| values[ match[ 0 ] ] = match[ 2 ]; | ||
| } | ||
| return values; | ||
| } | ||
| // ===================== | ||
| // -- RECURSIVE PARSE -- | ||
| // ===================== | ||
| // Recursivly search for includes and create one file. | ||
| var parse = function( fileContent, filePath, values ) { | ||
| return fileContent.replace( regex, function( match, includePath, attributes ) { | ||
| var inlineOptions = parseInlineOptions( attributes ); | ||
| grunt.util._.merge( values, inlineOptions ); | ||
| var includePath = directory( filePath ) + "/" + includePath; | ||
| var includeContent = grunt.file.read( includePath ); | ||
| if ( typeof options.process === "function" ) { | ||
| includeContent = options.process( includeContent, values ); | ||
| } | ||
| return parse( includeContent, includePath, values ); | ||
| } ); | ||
| } | ||
| // ========== | ||
| // -- BAKE -- | ||
| // ========== | ||
| // Loop over files and create baked files. | ||
| this.files.forEach( function( file ) { | ||
@@ -55,39 +133,21 @@ | ||
| log( "Processing \"" + src + "\"" ); | ||
| checkFile( src ); | ||
| var target = grunt.file.read( src ); | ||
| var content = options.content ? grunt.file.readJSON( options.content ) : {}; | ||
| var values = options.content ? grunt.file.readJSON( options.content ) : {}; | ||
| if ( options.section ) { | ||
| if ( !content[ options.section ] ) { | ||
| if ( !values[ options.section ] ) { | ||
| grunt.log.error( "content doesn't have section " + options.section ); | ||
| } | ||
| content = content[ options.section ]; | ||
| values = values[ options.section ]; | ||
| } | ||
| target = target.replace( regex, function( match, path ) { | ||
| var srcContent = grunt.file.read( src ); | ||
| var destContent = parse( srcContent, src, values ); | ||
| directory = src.split( "/" ); | ||
| directory.pop(); | ||
| grunt.file.write( dest, destContent ); | ||
| grunt.log.ok( "File \"" + dest + "\" created." ); | ||
| path = directory.join( "/" ) + "/" + path; | ||
| checkFile( src ); | ||
| log( "|-> Parsing \"" + path + "\"" ); | ||
| var template = grunt.file.read( path ); | ||
| if ( typeof options.process === "function" ) { | ||
| template = options.process( template, content ); | ||
| } | ||
| return template; | ||
| } ); | ||
| grunt.file.write( dest, target ); | ||
| grunt.log.ok( "File \"" + dest + "\" created." ); | ||
| } ); | ||
@@ -94,0 +154,0 @@ } ); |
@@ -35,3 +35,13 @@ "use strict"; | ||
| test.done(); | ||
| }, | ||
| recursiveBake: function( test ) { | ||
| test.expect( 1 ); | ||
| var actual = grunt.file.read( "tmp/recursive.html" ); | ||
| var expected = grunt.file.read( "test/expected/recursive.html" ); | ||
| test.equal( actual, expected, "recursive process" ); | ||
| test.done(); | ||
| } | ||
| }; |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by33.55%
15734
- Number of package files
- increased by41.18%
24
- Lines of code
- increased by34.97%
220
- Number of lines in readme file
- increased by38.05%
283
No dependency changes