Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

pugjs-brunch

2.10.2 • Public • Published

Windows build Build Status npm Version License

pugjs-brunch

Adds Pug v2.x (aka Jade) support to Brunch

This plugin compiles templates into any of three types:

  • Dynamic: Parameterized function that creates HTML at runtime based on the received parameters.
  • Precompiled: Returns raw HTML string with minimum overhead at runtime.
  • Static: Plain HTML files from pug templates in the assets directory.

What's New

  • Uses Pug v2.0.0-rc.4 or higher.
  • Adds Promise to predefined globals.

See previous changes in the CHANGELOG.

Install

npm install pugjs-brunch --save-dev

or through devDependencies in package.json:

    ...
    "pugjs-brunch": "^2.10.1",
// or, if you want to use the git version of this plugin:
    "pugjs-brunch": "aMarCruz/pugjs-brunch",
    ...

To compile pug into static, plain HTML, just place your files into the assets directory (usually app/assets).

The runtime

For modules, unless the inlineRuntimeFunctions option is set to true (not recommended), it is neccesary the Pug runtime, a small set of function that lives in the global variable pug.

If required, the plugin loads a custom runtime from its own directory, so you don't have to worry about this.

NOTE:

Under certain circumstances the runtime load may fail. If this happens to you, move pug_runtime.js from node_modules/pugjs-brunch/vendor to your vendor folder and pass its fullname in the pugRuntime option to the plugin.

Example:

  plugins: {
    pug: { pugRuntime: require('path').resolve('.', 'vendor', 'pug_runtime.js') }
  }

Options

The plugin uses the plugins.pug section of your brunch-config and defines this options:

locals - Plain JavaScript object passed to Pug for static compilation.

staticBasedir - Brunch convention.assets folder as string. This is the root of static templates.

staticPretty - Pug's pretty option for files in staticBasedir (v2.8.5).

preCompile - When true, all the files will be pre-compiled.

preCompilePattern - Regex: when preCompile:true, limit pre-compilation to matching files (v2.8.6).

pugRuntime - Set to false if you want to load another runtime.

sourceMap - Defaults to brunch sourceMaps (with 's') value, false disables it (v2.8.4).

You can use any Pug options as well, pugjs-brunch set this:

{
  doctype: 'html',
  basedir: 'app',                 // or wherever Brunch config says
  staticBasedir: 'app/assets',    // basedir for static compilation (see bellow)
  staticPretty: true,             // "pretty" for files in staticBasedir
  inlineRuntimeFunctions: false,  // will use the global `pug` variable
  compileDebug: true,             // except for brunch `optimize` mode (production)
  sourceMap: true                 // ...if Brunch sourceMaps option is enabled
}

About staticBasedir:

This option is only meaningful if you changed the default value of conventions.assets in the Brunch config and you are using absolute paths in includes or extends. This value will be pass to Pug as basedir when compiling static assets as html (see the pug options).

NOTE

The options pretty and compileDebug are forced to false in production mode.

Examples

Dynamic templates (Regular usage)

  // brunch-config.js
  ...
  plugins: {
    pug: {
      globals: ['App']
    }
  },
  //- app/views/tmpl.pug
  p= name
  // later...
  App.userName = 'John Doe'
  ...
  const tmpl = require('views/tmpl.pug')
  $('#elem').html(tmpl({ name: App.userName }))
  // now elem contains <p>John Doe</p>

Selective precompilation

  // brunch-config.js
  ...
  plugins: {
    pug: {
      locals: { name: 'John Doe' },
      preCompile: true,
      preCompilePattern: /\.html\.pug$/
    }
  },
  //- app/views/tmpl.html.pug
  p= name
  // your javascript...
  ...
  const tmpl = require('views/tmpl.html.pug')
  $('#elem').html(tmpl)
  // now #elem contains <p>John Doe</p>

Static files

  // brunch-config.js
  ...
  plugins: {
    pug: {
      locals: { name: 'John Doe' }
    }
  },
  //- app/assets/user.pug
  doctype html
  html
    head
      meta(charset="utf-8")
    body
      p= name

will output the new file public/user.html

Using with jscc-brunch

  ...
  plugins: {
    jscc: {
      values: {
        _APP: 'My App'  // $_APP can do static replacement
      },
      pattern: /\.(?:js|pug)$/,
      sourceMapFor: /\.(?:js|pug)$/,
      sourceMap: true
    },
    pug: {
      globals: ['$_APP']
    }
  }
  ...

License

The MIT License (MIT)

install

npm i pugjs-brunch

Downloadsweekly downloads

19

version

2.10.2

license

MIT

repository

githubgithub

last publish

collaborators

  • avatar