Skip to content

Instantly share code, notes, and snippets.

@sunew

sunew/node.md

Created February 16, 2015 14:17
Show Gist options
  • Save sunew/39e6aa6b5fca07625569 to your computer and use it in GitHub Desktop.
Save sunew/39e6aa6b5fca07625569 to your computer and use it in GitHub Desktop.
Download ZIP
node, grunt, bower etc
Raw
node.md

Node og relateret

http://stackoverflow.com/questions/2353818/how-do-i-get-started-with-node-js http://www.nodebeginner.org/

javascript generelt: http://eloquentjavascript.net/

Kig på det senere: https://pypi.python.org/pypi/nodeenv/ Skaber isolerede node environments med python (f.eks. i kombi med virtualenv) Opnår det samme med buildout recipes nedenfor.

install

nodejs er installeret via aptitude.

problem med npm og globale pakker / sudo

sune@wlr-laptop:/work/playground$ sudo yo
Easy with the "sudo"; Yeoman is the master around here.

Since yo is a user command, there is no need to execute it with superuser
permissions. If you're having permission errors when using yo without sudo,
please spend a few minutes learning more about how your system should work
and make any necessary repairs.

A quick solution would be to change where npm stores global packages by
putting ~/npm/bin in your PATH and running:
npm config set prefix ~/npm

Reading material:
http://www.joyent.com/blog/installing-node-and-npm
https://gist.github.com/isaacs/579814

local (non-sudo) npm installation

Har fulgt isaacs som ovenfor:

echo prefix = ~/local >> ~/.npmrc
curl https://www.npmjs.org/install.sh | sh

og tilføjet til .bashrc:

export PATH=/home/sune/local/bin:${PATH}
export NODE_PATH=/home/sune/local/lib/node_modules:${NODE_PATH}

Test:

sune@wlr-laptop:~$ npm install grunt-cli -g

sune@wlr-laptop:~$ npm ls -g
/home/sune/local/lib
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected]
│ │ │   └── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
└─┬ [email protected]
  ├── [email protected]

sune@wlr-laptop:~$ which grunt
/home/sune/local/bin/grunt

Nu kan man installere f.eks. generators med -g og opdatere dem med yo uden brug af sudo. Alt ender i ~/local/

yo

giver mulighed for at installere og opdatere generators (den finder de installerede ok.)

node interactive

Node har en interactive shell:

sune@wlr-laptop:/work/angular/angular-phonecat ((step-10))$ node

console.log('Hello World'); Hello World undefined

node modules

hvordan ser et node project ud? Hvad er et projekt? Der er moduler = filer og pakker = foldere med package.json - dvs. forkert terminologi, begge er moduler.

http://nodejs.org/api/modules.html

In Node, files and modules are in one-to-one correspondence.

Men: folders as modules: package.json med 'main' der peger på .js modul (eller index)

If the module identifier passed to require() is not a native module, and does not begin with '/', '../', or './', then node starts at the parent directory of the current module, and adds /node_modules, and attempts to load the module from that location.

If it is not found there, then it moves to the parent directory, and so on, until the root of the tree is reached.

package.json

the package.json packaging format for node.js applications.

Guide til formatet: http://package.json.nodejitsu.com/

npm

install/update

Install se ovenfor.

sune@wlr-laptop:/work/playground/angular-yo (master)$ sudo npm install npm -g
npm http GET https://registry.npmjs.org/npm
npm http 200 https://registry.npmjs.org/npm
npm http GET https://registry.npmjs.org/npm/-/npm-1.4.7.tgz
npm http 200 https://registry.npmjs.org/npm/-/npm-1.4.7.tgz
npm WARN package.json [email protected] No repository field.
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js
[email protected] /usr/lib/node_modules/npm
sune@wlr-laptop:/work/playground/angular-yo (master)$ ls /usr/lib/node_modules/
bower/  generator-angular/  generator-karma/  grunt-cli/  npm/  yo/

Brug

Hvor installeres de moduler der hentes?

sune@wlr-laptop:/work/angular$ npm root
/work/angular/node_modules

Der installeres altså per default lokalt - medmindre en parent folder har en node_modules.

hvis man er i x/y/z og z ikke har en node_modules steppes up til y og prøves dér.

sune@wlr-laptop:/work/angular/node_playground$ npm root
/work/angular/node_modules

create a package.json in current dir:

npm init

skriv dependencies til package.json:

npm install --save-dev <package>

installer denne pakkes deps (fra package.json):

npm install .

Lister pakker installeret i current dir (project)

npm ls

Link:

git clone git://github.com/nodeapps/http-server.git
cd http-server/
npm link

Opdatering:

npm update
npm update -g

grunt

http://gruntjs.com/ The javascript task runner "you can use Grunt to automate just about anything"

grunt install

sudo npm install -g grunt-cli

kan installeres globalt - men også i buildout, se nedenfor.

problem: grunt-cli skal være installeret globalt med nyere installs? Vil nednestående buildout recipe virke med nyeste grunt? -> JA.

https://github.com/gruntjs/grunt-cli : install grunt-cli locally to your project using npm install grunt-cli --save-dev Unfortunately, this will not put the grunt executable in your PATH. You'll need to specify its explicit location when executing it, eg: ./node_modules/.bin/grunt

grunt brug muligheder

less symlinking resources ind i project linting, testing javascript compiling (uglify, minify) icons, fonts find files, copy or symlink files to the correct theme location.

med watch: automatisk compiler less f.eks.

grunt-init: scaffolding tool used to automate project creation

[email protected]:gruntjs/grunt-init-node.git Deprecated: Erstattes af yeoman.

grunt daglig brug

lister også installerede tasks: grunt -h

grunt syntaks

eksempel på en konfiguration af en task:

bowerInstall: {
  app: {
    src: ['<%= yeoman.app %>/index.html'],
    ignorePath: '<%= yeoman.app %>/'
  },
  sass: {
    src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
    ignorePath: '<%= yeoman.app %>/bower_components/'
  }
},

Her er app og sass vilkårligt navgivne targets (se http://gruntjs.com/configuring-tasks).

"Specifying both a task and target like grunt concat:foo or grunt concat:bar will process just the specified target's configuration, while running grunt concat will iterate over all targets, processing each in turn."

Grunt: valg af filer til tasks

enten med glob-patterns i gruntfile, eller en selvstændig config.js der loades af gruntfile (se locandy) Se også: https://github.com/Pylons/sdidev/blob/ree-grunt-sprinting/Gruntfile.js

bower

http://bower.io/

http://tech.pro/tutorial/1190/package-managers-an-introductory-guide-for-the-uninitiated-front-end-developer

bower init: skaber en bower.json (filen der definerer dit projekt, med dependencies)

Eller via grunt-init - eller yeoman.

Skriv til bower.json dependencies: bower install -S fine-uploader

Consuming packages

Hvordan bruge de downloadede moduler? F.eks. sådan manuelt: <script src="/bower_components/jquery/index.js"></script> Eller vha. require.js

Eller: hvad gør locandy? : sune@wlr-laptop:/work/own_projects/locandy/locandy-web (master)$ cat .bowerrc {"directory":"./commons/libs"}

Se afsnit "consuming packages" i http://bower.io/

sune@wlr-laptop:/work/playground/gruntinit-test$ bower list --paths
{
  "fine-uploader": "bower_components/fine-uploader"
}

Fra yeoman generator-angular, Gruntfile:

// Automatically inject Bower components into the app
'bower-install': {
  app: {
    html: '<%= yeoman.app %>/index.html',
    ignorePath: '<%= yeoman.app %>/'
  }
},

Grunt + Bower:

grunt-bower-task: install packages hvor ender filer? De kopieres som default fra bower_components/ til lib/ locandy: copy=false. Isf. bruges .bowerrc (se ovenfor). Derpå symlinkes til f.eks. app/static/js/libs (installeret i gruntinit-test - men yeoman er den nye metode)

grunt-bower-install: injects. (brugt af yeoman angular template) injects into index.html - se 'consuming' ovenfor.

grunt bower + requirejs

https://github.com/yeoman/grunt-bower-requirejs

yeoman

http://yeoman.io/ yeoman erstatter grunt-init

Yeoman is used to generate the scaffolding of your app for you.

http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/

Igen - mange yo generators installeres globalt. Men vi vil have dem lokalt i buildout. [og det kan vi, se nedenfor.]

Se også https://github.com/DaftMonk/generator-angular-fullstack

require.js

http://requirejs.org/ JavaScript file and module loader. It is optimized for in-browser use.

angular + requirejs: http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js

Semantic Versioning

http://semver.org/ Og præcise specs: https://www.npmjs.org/doc/misc/semver.html

less

som eksempel: er et node modul der installeres med npm.

node og buildout - undersøgelse

Muligheder set i locandy og sm.template:

node selv:

Metode 1: Global node og npm

Metode 2:

Compiler egen node.

[node]
recipe = zc.recipe.cmmi
url = http://nodejs.org/dist/v0.8.22/node-v0.8.22.tar.gz

Hvordan med node bin og NODE_PATH?

Metode 3:

[node]
recipe = gp.recipe.node
version = 0.10.26
npms =
  grunt-cli
scripts =
  grunt

(samme eksempel med less:)

[lesscss]
recipe = gp.recipe.node
url = http://nodejs.org/dist/v0.6.14/node-v0.6.14.tar.gz
npms = less
scripts = lessc

Her kan man vælge node version - node installeres i parts, node_modules i parts//lib/node_modules.

sune@wlr-laptop:/work/projects/sm-template2 (1.1)$ ls parts/buildout-node/bin/
node*  npm@

sune@wlr-laptop:/work/projects/sm-template2 (1.1)$ ls parts/lesscss/lib/node_modules/
less/

Altså en node-part og en part der matcher part-name. (forvirrende!)

Script i bin: lessc:

os.environ["NODE_PATH"] = '/work/projects/sm-template2/parts/lesscss/lib/node_modules'

Se også: https://gist.github.com/toumorokoshi/6195934

Alternativer: rodacom.buildout.npm

node moduler i buildout (buildout som en node-pakke med package.json)

Installer pakker:

[node_modules]
recipe = collective.recipe.cmd
on_install = true
on_update = true
cmds = NODE_PATH="" npm install .; echo "\nNodeJS modules updated."

Hvad installeres af "npm install ."? Pakkerne fra package.json.

Der kan installeres scripts som bower og grunt i buildout/bin http://greenfinity.hu/en/blog/installing-javascript-from-zc-buildout se yeoman.cfg (Denne metode anvendes i locandy.)

F.eks.:

[grunt-script]
recipe = collective.recipe.template
input = inline:
    #! /bin/sh
    export NODE_PATH=${buildout:directory}/node_modules
    ${buildout:directory}/node_modules/.bin/grunt $@
output = ${buildout:bin-directory}/grunt
mode = 755

(ovenstående installerer bare et script i bin til grunt. Grunt skal være installeret i buildout/node_modules)

Grunt og plone:

Se:

Er kun en del af mockup dev, ikke med i buildout branch=5.0

node og buildout - bringing it all together

grunt, bower etc.: På pakkeniveau eller buildout niveau? I headnet case: vores theme er tæt forbundet med buildout: et projekt. Hertil kan føjes evt. diazo std-alone theme.

1) node installation i buildout

Vi bruger

[node]
recipe = gp.recipe.node
version = 0.10.26
#npms =
#    grunt-cli
scripts =
    npm
    node
#    grunt

til at installere selve node med npm. Nu er der node og npm scripts i {buildout}/bin

Problemer: Besked om manglende NODE_PATH. Global installation: installerer i parts/buildout-node// ikke i parts/node (men vi skal ikke have global installation - bare pakke-installation med package.json)

(intbar)sune@wlr-laptop:/work/projects/intbar (node-buildout1)$ npm root
/work/projects/intbar/node_modules

(intbar)sune@wlr-laptop:/work/projects/intbar (node-buildout1)$ npm root -g
/work/projects/intbar/parts/buildout-node/node-v0.10.26-linux-x64/lib/node_modules

(intbar)sune@wlr-laptop:/work/projects/intbar (node-buildout1)$ npm bin -g
/work/projects/intbar/parts/buildout-node/node-v0.10.26-linux-x64/bin
(not in PATH env variable)

2) En package.json i roden af buildout med de nødvendige devDependencies.

Her vises en tom:

{
  "name": "intbar",
  "version": "0.0.1",
  "dependencies": {},
  "devDependencies": {},
  "engines": {
    "node": ">=0.8.0"
  }
}

3) En buildout part, der installerer pakker defineret i package.json:

[node_modules]
recipe = collective.recipe.cmd
on_install = true
on_update = true
cmds = NODE_PATH="" npm install .; echo "\nNodeJS modules updated."

Så er node og dev tools installeret lokalt i buildout. Når man siger npm install <package> - hvad sker så? + dens dependencies installeres i {buildout}/node_modules. Og en .bin/ hvis der er binary scripts defineret i pakken. npm install <package> --save-dev tilføjer til package.json. Dermed installeres de næste gang buildout køres (via pkt. 3).

npm install grunt-cli --save-dev Via kommandolinie stille og roligt bygge package.json op, eller komme med en fuld spec på forhånd - i package.json.

4) Scripts i bin

Yderligere scripts (de skal matche installerede pakker som grunt og bower) installeres i {buildout}/bin vha:

[grunt_script]
recipe = collective.recipe.template
input = inline:
    #! /bin/sh
    export NODE_PATH=${buildout:directory}/node_modules
    ${buildout:directory}/node_modules/.bin/grunt $@
output = ${buildout:bin-directory}/grunt
mode = 755

5) buildout/projekt - gruntfile

næste skridt er så at have en grunt file, og at køre bestemte grunt tasks lige efter buildout (eller for dem selv) - f.eks. less kompilering.

Locandy: loader en config.json med paths to scripts - autogenereret? I config.json kan man have alt hvad der er projektspecifikt. Gruntfile.js kan så være konstant for alle buildouts/pakker.

appPath? Skal sættes til theme (bower.json)

  • skal vi have flere apps?
  • en til theme og en til andre modules? En config.js (eller definitioner i toppen af gruntfile.js) med filer/paths

Brug af f.eks. pakkens navn (fra package.json) eller en sti fra bower.json pkg: grunt.file.readJSON('package.json') ELLER app: require('./bower.json').appPath || 'app',

Available tasks (fra installerede moduler) kan ses med: grunt --help (her kan det hjælpe med load-grunt-tasks der automatisk loader alle tasks fra installerede plugins.)

6) bower

.bowerrc Installation af moduler.

gruntfile i angular-yo2: appPath loades fra bower.json (kan vi have flere bower apps? kræver det flere gruntfiles? Formentlig nej.)

grunt-bower-install: bowerInstall (injects) grunt-bower-task: installerer bower pakker til directory fra .bowerrc

Hvis vi vælger at det er pakken der har en bower (og dermed en grunt):

  • en liste af pakker i buildout der skal processeres
  • ligesom sources i mr.developer.
  • (cd src/stc; grunt build)

7) build for production?

Visse ting skal gøres - komilering osv.

Byggede eller raw resourcer? dev eller prod? kan styres via forskellige grunt tasks og kopieres det samme sted hen så diazo kan finde dem - eller forskellige regler (der indlæser forskellige themes) kan benyttes afh. af debug_mode. se diazo.txt (debug_mode)

use cases / Mål

a) development af plone theme

  • til at automatisere de javascript/node orienterede tasks med ellers normal theming i plone (diazo osv.)
  • dvs. vi loader theme files med watch og serve, std alone.

b) dependencies management for plone theme resources separat fra plone (via /static)

  • f,eks., i diazo static osv.
  • hertil kan bruges bower?
  • hente bootstrap, diazo
  • injecte dem i themets index.html
  • minify osv.?
  • sass / less compilation

Dvs.: nogle python pakker et theme (diazo) node/grunt/less mv. resourcer

Dvs. en backend en frontend diazo kæder det sammen runtime (transformerer backend til theme) buildout/grunt kæder det sammen build time. (fokus på værktøjer)

c) deployment/build tasks compilation etc. (on server also)

d) std-alone apps, der henter indhold fra plone skal serves på en anden url, egen webserver (apache osv)

pakke eller buildout

Buildout: installerer node, tools (og har derfor en package.json)

Pakke: er f.eks. et theme eller en app har en bower.json, Gruntfile.js og måske en package.json (i det mindste for navn og version, måske også for tools til grunt) En pakke: setup.py (ala package.json for et node.projekt) + package.json + bower.json + gruntfile

(se også https://github.com/plone/ploneorg.theme)

status

  • en package.json til vores projekt. (OK)
  • hvilken node.js version (OK)
  • et aktiveret virtualenv? Er de dannede wrapperscripts for f.eks. grunt og lessc med i path? (OK)

Bower + buildout / plone eggs Hvad med plugins?

  • demands
  • bower-filer: bower klarer deps og konflikt

Diazo / bower

a) python-pakker der registrerer resourcer i portal_css/js: de kan er enten tilgængelige via skins eller via en static resource mappe. (de skal stadig mappes gennem diazo)

I diazo har vi: a) themets recourses b) backendens resources. Vi vælger i rules hvilke vi ønsker at loade. Eksempel: intbar:

  • her loades themets css fra themet (er ikke registreret i portal_css)
  • mens vi vælger aktivt hvad vi henter fra backend (via diazo rules)

Resourcer (js) i themet, der er afhængige af plones jquery vil selvfølgelig ikke virke std-alone i themet. (kommune_search.js). Enten-eller: themet skal kunne stå alene. Hvis der er afhængigheder til plone - så skal de ind gennem portal_javascript? (så themet kan fungere alene).

Med bower kunne man: injecte resourcer til themets index.html og lade være med at droppe dem i rules.xml. Håndtere merging osv. vha. grunt.

Og være nødt til stadig at hente visse resourcer fra backend via rules.xml (som vi derfor ikke kan merge / gøre andre grunt ting med.)

der er:

  1. plone resourcer
  2. add-on resourcer
  3. themets/applikationens resourcer. Vi kan håndtere type 3.

Alt i static-mappen serveres fra plone på / dvs. fra til eller (virtual hosting f.eks. på http://intbar.local/)

Vores json calls skal ikke prefixes. Skal de bare være på / - ? Hvad så med virtual hosting? (LØST - vi overfører settings via js i theme eller hardcoder)

manglende assets

f.eks. select2.png skal kopieres over i dist af grunt.

for select2 : de ligger bare i rod, referes til fra stylesheet der ender i /styles, derfor bliver stien /styles også for de billeder. (umodent!)

TODO og husk

tilføj node_modules/.bin til path når virtualenv aktiveres? Eller symlink. Eller: har vi behov for at sætte NODE_PATH?

Kør validering af rules.xml !

Kør python pep8/pyflakes? Måske bare på src.

How do I enable shell tab auto-completion? To enable bash tab auto-completion for grunt, add the following line to your ~/.bashrc file: eval "$(grunt --completion=bash)" OK

Hvordan med nyere sites og diazo, rules, osv. - hvordan ser de ud?

jshint

fra angular: /* We need to tell jshint what variables are being exported / / global -angular, -msie, -jqLite, -jQuery,

Gaml måder

sm.template: installerer node + less kompilerer med et shell script.

arkiv / til senere:

// todo: settings more lax and good with plone
// todo: avoid scss-generated files
// For non-sass generated styles.
csslint: {
  strict: {
    options: {
      import: 2
    },
    src: ['<%= projCfg.app %>/styles/*.css']
  },
  lax: {
    options: {
      import: false
    },
    src: ['<%= projCfg.app %>/styles/*.css']
  }
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment