Skip to content

Examples

Jump to bottom Edit New page
Szymon Witamborski edited this page Oct 7, 2013 · 5 revisions

With default options

In this example, the default options are used.

grunt.initConfig({
  stencil: {
    main: { // task target name
      options: {},
      files: {
        'dist/index.html': ['pages/index.dot.html'],
      }
    }
  }
})

Input: pages/index.dot.html

{
  "wrapper_class": "introduction",
  "template": "templates/main"
}


<div class="title_bar"><span>Our company</span></div>

<section>
{{= it.include("partials/company_introduction") }}
</section>

partials/company_introduction.md:

## Founding

The company was founded in 1906.

templates/main.dot.html:

<html>
  <body>
    <div class="{{= it.wrapper_class }}">
      {{= it.document }}
    </div>
  </body>
</html>

Output: dist/index.html

<html>
  <body>
    <div class="introduction">
      <div class="title_bar"><span>Our company</span></div>
      <section>
        <h2>Founding</h2>
        <p>The company was founded in 1906.</p>
      </section>
    </div>
  </body>
</html>

With custom options

In this example, doT's it object is used to specify the location of script files and the main title of all pages; and the location of partials and templates is given. All pages in pages/ will be compiled to .html files in tmp.

grunt.initConfig({
  stencil: {
    main: {
      options: {
        env: {
          title: "Stencil"
        },
        partials: 'content',
        templates: 'templates'
      },
      files: [
        {
          expand: true,
          cwd: 'src/pages/',
          src: '**/*.dot.html',
          dest: 'tmp',
          ext: '.html',
          flatten: true
        }
      ]
    }
  }
});

Running grunt stencil with these options will allow

  • all .dot.html files recursively found in src/pages/ to be compiled to files of the same name in the tmp folder, but with an .html extension;
  • partials and templates to be referenced without specifying the full path;
  • {{= it.title }} to be specified in any partial, template or page to get "Stencil".

An example file structure

An example folder structure for the HTML source components might look like the following:

| project root
|- dist
|- src
|-- includes
|--- content
|---- about.md
|---- contact.dot.html
|--- footer.md
|--- header.dot.html
|-- templates
|--- normal_footer.html
|--- sticky_footer.html
|--- default.dot.html
|-- pages
|--- services
|---- code_review.md
|---- contracting.md
|--- contact.html
|--- main.html
|- Gruntfile.js

Additionally, consider the following task options:

grunt.initConfig({
  stencil: {
    main: {
      options: {
        partials: 'src/includes',
        templates: 'src/templates'
      },
      files: [
        {
          expand: true,
          src: 'src/pages/*',
          dest: 'dist',
          ext: '.html'
        }
      ]
    }
  }
})

Using the above:

  • partials and tempaltes can be called without the full path: {{= it.include("content/about") }} / {"template": "sticky_footer"}
  • all pages will be compiled into dist, preserving the original structure:
|- dist
|-- services
|--- code_review.html
|--- contracting.html
|-- contact.html
|-- main.html
Add a custom footer
Add a custom sidebar
Clone this wiki locally