Forked from mikehedman/gist:1969ce420e2413226ec3
Last active
August 29, 2015 14:12
-
-
Save bernharduw/61fa07c4d92d2c4f1766 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// /common/core/ampersand-input-view-dust.js | |
/** | |
* Extends the Ampersand InputView class to make it work with Dust templates | |
*/ | |
/*global dust*/ | |
var InputView = require('ampersand-input-view'); | |
var InputViewDust = InputView.extend({ | |
template: 'includes.formInput', | |
render: function () { | |
var self = this; | |
dust.render(self.template, self, function (err, out) { | |
if (err) { | |
console.error(err); | |
} | |
self.template = out; | |
InputView.prototype.render.call(self); | |
}); | |
} | |
}); | |
module.exports = InputViewDust; | |
// /common/core/ampersand-view-dust.js | |
/** | |
* Overrides base Ampersand View class to make it work with Dust templates | |
*/ | |
/*global dust*/ | |
var View = require('ampersand-view'); | |
var ViewDust = View.extend({ | |
render: function () { | |
var self = this; | |
//using toJSON() here because ampersand models don't seem to work directly (because of magic getters?) | |
var model = self.model ? self.model.toJSON() : {}; | |
dust.render(self.template, model, function (err, out) { | |
self.template = out; | |
return View.prototype.render.call(self); | |
}); | |
} | |
}); | |
module.exports = ViewDust; | |
// base view for pages | |
// /client/js/pages/base.js | |
var ViewDust = require('../../../common/core/ampersand-view-dust'); | |
module.exports = ViewDust.extend({ | |
// register keyboard handlers | |
registerKeyboardShortcuts: function () { | |
}, | |
unregisterKeyboardShortcuts: function () { | |
} | |
}); | |
// app.js | |
// require the compiled template module, and register the templates with Dust | |
... | |
var dustTemplates = require('./allDustTemplates.js'); | |
module.exports = { | |
// this is the the whole app initter | |
blastoff: function () { | |
var self = window.app = this; | |
... | |
//load all the dust templates | |
dustTemplates.registerAll(); | |
// client/pages/info.js | |
// once you have the base stuff setup, the actual views are trivial | |
var PageView = require('./base'); | |
module.exports = PageView.extend({ | |
pageTitle: 'more info', | |
template: 'pages.info' | |
}); | |
// Gruntfile.js | |
var path = require("path"); | |
module.exports = function(grunt) { | |
grunt.loadNpmTasks('grunt-browserify'); | |
grunt.loadNpmTasks('grunt-debug-task'); | |
grunt.loadNpmTasks("grunt-dustjs-linkedin"); | |
grunt.loadNpmTasks("grunt-contrib-watch"); | |
grunt.loadNpmTasks('grunt-contrib-clean'); | |
grunt.loadNpmTasks('grunt-contrib-copy'); | |
grunt.loadNpmTasks('grunt-contrib-concat'); | |
grunt.loadNpmTasks('grunt-contrib-jshint'); | |
grunt.loadNpmTasks('grunt-localizr'); | |
var templateCwd = 'client/templates/'; | |
var templateFiles = '**/*.dust'; | |
var templateDestDir = 'tmp/templates-js/'; | |
// Project configuration. | |
grunt.initConfig({ | |
copy: { | |
dust_core: { | |
src: 'node_modules/dustjs-linkedin/dist/dust-core.js', | |
dest: 'common/vendor/' | |
} | |
}, | |
dust: { | |
compile: { | |
files: [ | |
{ | |
cwd: templateCwd, | |
expand: true, | |
src: templateFiles, | |
dest: templateDestDir, | |
ext: ".js" | |
} | |
], | |
options: { | |
name: function (data) { | |
//prune off the cwd path, and then convert remaining path separators to dots | |
var filePath = data.file.src[0]; | |
var basePath = ''; | |
if (filePath.indexOf(templateCwd) === 0) { | |
basePath = templateCwd; | |
} | |
if (filePath.indexOf(applyTemplateCwd) === 0) { | |
basePath = applyTemplateCwd; | |
} | |
var key = path.relative(basePath, path.dirname(filePath)).split(path.sep) // folder names | |
.concat([path.basename(filePath, path.extname(filePath))]) // template name | |
.join("."); | |
if (key.charAt(0) == ".") | |
return key.substr(1, key.length - 1); | |
return key; | |
} | |
} | |
} | |
}, | |
delta: { | |
templates: { | |
cwd: templateCwd, | |
files: [templateFiles], | |
tasks: ['dust', 'concat'] | |
}, | |
scripts: { | |
files: ['client/js/**/*.js', 'common/**/*.js'], | |
tasks: ['browserify'] | |
} | |
}, | |
concat: { | |
dist: { | |
src: [templateDestDir + '/**/*.js'], | |
dest: 'client/js/allDustTemplates.js' | |
}, | |
options: { | |
banner: "window.dust=require('../../common/vendor/dust-core');exports.registerAll = function() {", | |
footer: "};" | |
} | |
}, | |
browserify: { | |
js: { | |
src: 'client/js/**/*.js', | |
dest: 'public/js/allJs.js', | |
options: { | |
browserifyOptions: { | |
debug: true | |
} | |
} | |
} | |
}, | |
clean: { | |
'tmp': 'tmp' | |
}, | |
localizr: { | |
files: templateCwd + templateFiles, | |
options: { | |
contentPath: ['locales/**/*.properties'] | |
} | |
}, | |
jshint: { | |
options: { | |
reporter: require('jshint-stylish'), | |
"asi": false, | |
"esnext": true, | |
"bitwise": true, | |
"camelcase": true, | |
"curly": false, | |
"eqeqeq": true, | |
"eqnull": true, | |
"expr": true, | |
"immed": true, | |
"indent": 2, | |
"latedef": "nofunc", | |
"loopfunc": true, | |
"newcap": true, | |
"node": true, | |
"nonew": true, | |
"noarg": true, | |
"quotmark": "single", | |
"regexp": true, | |
"sub": true, | |
"trailing": true, | |
"undef": true, | |
"unused": true, | |
"white": true | |
}, | |
client: { | |
files: { | |
src: [ | |
'client/js/**/*.js', | |
'!client/js/allDustTemplates.js', | |
'!client/js/vendor/*' | |
] | |
}, | |
options: { | |
browser: true | |
} | |
}, | |
server: { | |
files: { | |
src: [ | |
'server/**/*.js' | |
] | |
}, | |
options: { | |
browser: false | |
} | |
} | |
} | |
}); | |
/** | |
* In order to make it safe to just compile or copy *only* what was changed, | |
* we need to ensure we are starting from a clean, fresh build. So we rename | |
* the `watch` task to `delta` (that's why the configuration var above is | |
* `delta`) and then add a new task called `watch` that does a clean build | |
* before watching for changes. | |
*/ | |
grunt.renameTask( 'watch', 'delta' ); | |
grunt.registerTask( 'watch', ['default', 'delta', 'clean:tmp'] ); | |
grunt.registerTask('default', ['clean', 'copy', 'dust', 'concat', 'browserify', 'clean:tmp']); | |
}; | |
A last note, my app has a hard copy of the dust-core library at: | |
/common/vendor/dust-core.js | |
(Dust - Asynchronous Templating - v2.5.1 http://linkedin.github.io/dustjs/ ) | |
And in my package.json: | |
dependencies: | |
"dustjs-linkedin": "^2.5.0", | |
dev-dependencies: | |
"grunt-dustjs-linkedin": "^0.5.1", | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment