***** node.js server 的 hello world , 用 express.js , less , bower

来源网站 :  https://expressjs.com/en/starter/hello-world.html

    • 安装 express. js 

npm init     初始化项目

npm install express –save    下载 express.js

新建一个 app.js 文件 ,内容为 :

此时跟目录下只有 :  app.js ,  node_modeles 文件夹, package.json 文件 。


接着安装  express-generator: 

npm install express-generator –save   下载  express-generator

此时, package.json 的 dependence应该是这样的

接着执行 :  express -e myapp

意思是,  view用 ejs模板, 建立一个名为 myapp 的应用程序

之后:

install dependencies:
$ cd myapp && npm install

run the app:
$ DEBUG=my-application ./bin/www

照做, 之后访问 :   http://yourIP:3000/ , 会看到index 页面


CSS 

该项目在 /myapp/public/stylesheets/  目录会自动生成一个style.css文件 , 内容为 :

如果要使用 less , 可以先安装一个  less 中间件:

然后修改  myapp/app.js , 增加:

此方法来自 :  https://stackoverflow.com/questions/11219637/using-less-with-node-js

去掉原帖中的  app.configure() 是因为 :  app.configure() is no longer part of Express 4.

接着建立一个简单的less文件, 测试能不能正常转换

****   以上全部取消, 因为opentok-rtc用的不是这个方法 ,  用的是 grunt  ,方法是:

首先在 package.json 的 dependency 加上 :

这里说的 package.json 是跟目录的,而不是 myapp的

然后 npm install

grunt 安装完成后, 会在 网站根目录生成一个 名为: Gruntfile.js的配置文件

错, 这个文件需要自己创建

内容为:(此处的路径需要参考自己的情况)

 

可以看出来, 在这个配置文件中, less和 css 文件的路径都指定好了


因为less文件还要用到 bower component , 所以先 安装bower

首先

之后, 建立一个 bower.json 的文件,内容为

此文件显示了安装bower的目的, 因为bower是一个库管理程序,

这里 bower 安装了这个 lib  :  https://github.com/tef-components/theme

在执行

 

至此, 跟目录下出现了 bower_components 文件夹


Less 

在跟目录新建文件夹 less

/home/liuyang/learntokboxrtc/expressjshwNew/less

放入需要 bower 库支持的less文件

接着在网站跟目录执行: grunt clientBuild

即可生成 css 文件


至此所有准备工作均已完成

接下来转到 :  http://www.notesoflyang.com/?p=2390

room.ejs 及其 css分析