Giter VIP home page Giter VIP logo

duster.js's Introduction

Duster.js - Watch & precompile dust.js templates

A simple Node script duster.js to watch a directory of .dust templates and compile them into .js files which can be included into an HTML file.

Why duster.js? Autocompile your templates to use dust.js in the browser

The dust.js documentation does not mentioned a clear way to work with dust templates in a purely client-side approach, instead focusing on server-side node.js applications.

For my backbone.js app, the only option was to include the dust-full.js file and compile the templates on each browser load. The file is much larger than the normal dust-core.js and this approach provides no extra value over other templating solutions (performance, browser caching, external file management etc).

So I wrote a script to pre-compile dust.js files whenever they are modified in a folder.

Install

Download duster.js to your project root folder and install dependencies:

npm install

Usage

Create dust.js templates in ./src/dusts/ with the file extension .dust and create ./public/dusts directory where files will be compiled to, then run watcher script:

$ node duster.js
$ npm start (alternative)

You can modify folder paths in the duster.json configuration file

raw_dir - directory to watch for .dust files
pre_dir - directory to place output .js files int

Example:

Configuration:

{ "raw_dir": "./src/dusts", "pre_dir": "./public/dusts" }

Then these files:

./src/dusts/tweet.dust
./src/dusts/user.dust

Compile to:

./public/dusts/tweet.js
./public/dusts/user.js

Then you include them in the html:

<script src="dust-core-1.0.0.min.js"></script>
<script src="tweet.js"></script>
<script src="user.js"></script>

I then concatenate all the JS files before production deployment (using something like Jammit).

More information

@ericktai wrote an example app/tutorial on how to use dust.js client-side using duster.js: https://github.com/ericktai/dust-js-browser

Linkedin also wrote a dust.js tutorial: https://github.com/linkedin/dustjs/wiki/Dust-Tutorial


by Dan McGrady http://dmix.ca

duster.js's People

Contributors

gpbl avatar ehryk avatar chrisdew avatar aharris avatar ffissore avatar jkrehm avatar stereokai avatar

Stargazers

 avatar Aaron M. avatar  avatar Alex Lokk avatar mike fayer avatar Adam Cianfichi avatar  avatar Ben Ipsen avatar Alex avatar Jared Fox avatar Martin Eskdale Moen avatar Smooth Operator avatar  avatar Lee Houghton avatar  avatar Simon Lord avatar Erick Tai avatar  avatar Sam avatar Thomas White avatar James Benner avatar  avatar James Walton avatar Ian Haggerty avatar Matthias Knoll avatar Marwan Hilmi avatar Sean Sullivan avatar Bruno avatar Pete Cleary avatar Xinjiang Lu avatar Stacey Reiman avatar wei yan avatar Daniel Kanze avatar Sheena Artrip avatar Pierrick Chabi avatar Will Archinal-Hudson avatar  avatar Nick Tran avatar Derek avatar Jorge López Pérez avatar Charles Alston avatar Sven Franck avatar Paulo Gaspar avatar Justin Lee avatar Brian Gyss avatar Daniel Grossmann-Kavanagh avatar Valentin Rabanelly avatar Ankur Oberoi avatar Nick Swider avatar Conrad Pankoff avatar Tom Streller avatar Hiroki Tani avatar Oli avatar Jon Schlinkert avatar Earl Celis avatar John Lancaster avatar Christopher Coker avatar Keith Chu avatar Romain Ruetschi avatar Sumit Chachra avatar h h avatar Jonathan Rainey avatar Asyraf Abdul Rahman avatar Daniel P. McGrady avatar Rolly Ferolino avatar

Watchers

Daniel P. McGrady avatar James Cloos avatar Adam Cianfichi avatar  avatar

duster.js's Issues

Duster not working in OS X

I installed DusterJS on OS X with npm install -g dusterjs. When I try to run the command 'duster', it fails with the following error.

Yohan:bin Yohan$ duster
env: node\r: No such file or directory

After some Googling, I found that this was because the cli.js file has Windows style line terminations. I was able to get this to work by converting those line endings to Linux style with the following command.

cat cli.js | col -b >cli2.js

I think it would be great if you could update the package in NPM to support OS X (and Linux) out of the box.

Duster template not displayed inside the backbone view

I'm trying to display a dust template (compiled) within a backbone view.

The template has been compiled with the use of duster.js

here is my render function in the view :


render: ->
  dust.render("customer-item", @model.toJSON(), (err, output) ->
    throw err if err
    $(@el).html output
  )
  @

When i lead the view i see 2 divs added inside my container (corresponding to the 2 models that should be loaded) but they are both empty. The individual template is not redered... When I debug the "output" variable i see the template so in theory it should be loaded properly...

I'm not sure this issue is related to duster itself...
Many thanks for your help.

Improvements and new features?

Hi @dmix,

thank you so much for this script! I'm evaluating Dust.js and it come very useful. So it may be I have yet to understand 100% how to use Dust in my workflow, but I'd like to contribute on it as new needs pop out, for example:

  • make a packages.json and publish it an npm package
  • make it available as command line tool
  • improve console log's
  • improve error management (no quit on errors)
  • add command line options, e.g. to compile a single file [e.g. from Sublime Text]
  • add tests

What do you think? What were your ideas for dusterjs?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.