3.8 KiB
+++ title = "yeoman" draft = false tags = [ "code", "javascript", "frameworks", "yeoman" ] date = "2013-03-12" +++
Build tools: Yeoman, Grunt, RequireJS ea
Zie ook integratie met [code/javascript/frameworks/handlebars]({{< relref "wiki/code/javascript/frameworks/handlebars.md" >}}).
Help nodig? Vast? >>
- http://gruntjs.com/installing-grunt
- http://yeoman.io/commandline.html
- http://requirejs.org/docs/api.html
- https://github.com/twitter/bower
- https://npmjs.org/doc/
Meer info over Yeoman, tooling support, scaffolding, etc:
Deploying
Naar een FTP server
Gebruik grunt-ftp-deploy
node plugin: https://github.com/zonak/grunt-ftp-deploy
'ftp-deploy': {
build: {
auth: {
host: 'server.com',
port: 21,
authKey: 'key1'
},
src: '/path/to/source/folder',
dest: '/path/to/destination/folder',
exclusions: ['/path/to/source/folder/**/.DS_Store', '/path/to/source/folder/**/Thumbs.db', 'dist/tmp']
}
}
❗ auth key ref verwijst naar .ftppass
in working dir
Testing
Mocha
Zie http://visionmedia.github.com/mocha/
Built-in support voor yeoman. Verschil met jasmine:
- mocha heeft geen assertions. Yeoman gebruikt by default [http://chaijs.com/|chaiJS] assertions.
- mocha heeft geen spies.
Jasmine
Integratie met Grunt mogelijk met https://github.com/creynders/grunt-jasmine-task en dan in Gruntfile.js
:
grunt.loadNpmTasks('grunt-jasmine-task');
jasmine: {
all: ['specs/specrunner.html']
},
Package managing
Modules worden via de node package manager, npm
geïnstalleerd, al dan niet globaal met de -g
flag:
sudo npm install grunt-contrib-handlebars --save-dev
-g
betekent niet lokaal installeren maar in een bin folder op het systeem. Waarom/wanneer het ene of het andere kiezen? http://blog.nodejs.org/2011/03/23/npm-1-0-global-vs-local-installation/
RequireJS
Zie requirejs.org/docs/api.html
AMD Structuur
Main file:
require.config({
});
require(['app'], function(app) {
// main module which fires up everything
});
Na includen van Rjs in html:
<script data-main######"scripts/main" src"scripts/vendor/require.js"></script>
Gaat rjs afhankelijk van data-main
de hoofd JS file inladen (bovenstaande). That's it!
Module files:
define(['dep1', 'dep2'], function(dep1, dep2) {
// dep1, dep2 accessible & loaded
return {
api: function() { ... }
};
});
Rjs gaat eerst dep1 en dep2 laden en dan de bovenstaande code pas. Hiervoor moeten natuurlijk beide andere APIs ook AMD
wrapped zijn. AMD staat voor "Async Module Definition"
Wat doe ik als een API geen AMD gebruikt
Gebruik shim
config van Rjs: requirejs.org/docs/api.html#config-shim
require.config({
shim: {
'handlebars': {
exports: 'Handlebars'
}
},
paths: {
jquery: 'vendor/jquery.min',
handlebars: './../components/handlebars/handlebars.runtime'
}
});
require(['handlebars'], function(Handlebars) {
// gogo!
});
Wat is hier gebeurd:
jquery
enhandlebars
includen wordt via een bepaald pad ingeladen in plaats van het standaard padhandlebars
gaat gewrapped worden in een AMD module, dieHandlebars
als variabele exporteert.
Hoe verander ik mijn (relatieve) include paden
Als je grunt
gebruikt, in Gruntfile.js
de hoofd Rjs config file alteren:
rjs: {
// no minification, is done by the min task
optimize: 'none',
baseUrl: './scripts',
wrap: true,
name: 'main'
},
Bovenstaande gaat altijd vanaf mapje scripts beginnen lezen.