来源网站 : https://expressjs.com/en/starter/hello-world.html
-
- 安装 express. js
npm init 初始化项目
npm install express –save 下载 express.js
新建一个 app.js 文件 ,内容为 :
1 2 3 4 5 6 7 |
const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening on port ${port}!`)) |
此时跟目录下只有 : app.js , node_modeles 文件夹, package.json 文件 。
接着安装 express-generator:
npm install express-generator –save 下载 express-generator
此时, package.json 的 dependence应该是这样的
1 2 3 4 |
"dependencies": { "express": "^4.17.1", "express-generator": "^4.16.1" } |
接着执行 : 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文件 , 内容为 :
1 2 3 4 5 6 7 8 |
body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } |
如果要使用 less , 可以先安装一个 less 中间件:
1 |
<del><code><span class="pln">npm install less</span><span class="pun">-</span><span class="pln">middleware</span></code></del> |
然后修改 myapp/app.js , 增加:
1 |
<del>var lessMiddleware = require('less-middleware');</del> |
1 2 3 4 5 |
<del>app.use(lessMiddleware({ src : __dirname + "/public", compress : true })); app.use(express.static(__dirname + '/public'));</del> |
此方法来自 : 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的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
"grunt": "^0.4.5", "grunt-autoprefixer": "^2.2.0", "grunt-bower-task": "^0.5.0", "grunt-cli": "^1.3.2", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-compress": "^1.4.3", "grunt-contrib-connect": "^2.0.0", "grunt-contrib-copy": "^0.8.1", "grunt-contrib-less": "^2.0.0", "grunt-contrib-watch": "^1.1.0", "grunt-gitinfo": "^0.1.7", "grunt-html-build": "^0.7.1", "grunt-karma": "^0.12.2", "grunt-mocha-test": "^0.12.7", |
然后 npm install
grunt 安装完成后, 会在 网站根目录生成一个 名为: Gruntfile.js的配置文件
错, 这个文件需要自己创建
内容为:(此处的路径需要参考自己的情况)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
module.exports = function(grunt) { // To-Do check what we need and add/remove as needed... [ 'grunt-contrib-less' ].forEach(grunt.loadNpmTasks); grunt.loadTasks('tasks'); // To create HTML test files from a template. To-Do: Dunno if this is even needed or not var TEST_BASE_DIR = 'test/'; grunt.initConfig({ less: { default: { files: { 'myapp/public/stylesheets/landing.opentok.css': 'less/landing.less' } } }, }); // On watch events, if the changed file is a test file then configure mochaTest to only // run the tests from that file. Otherwise run all the tests grunt.registerTask('clientBuild', 'Build css files', [ 'less' ]); grunt.registerTask('initialConfig', [ 'clientBuild' ]); grunt.registerTask('default', ['clientBuild']); }; |
可以看出来, 在这个配置文件中, less和 css 文件的路径都指定好了
因为less文件还要用到 bower component , 所以先 安装bower
首先
1 |
npm install bower --save |
之后, 建立一个 bower.json 的文件,内容为
1 2 3 4 5 6 |
{ "name": "opentok-rtc", "dependencies": { "theme": "tef-components/theme#0.2.68" } } |
此文件显示了安装bower的目的, 因为bower是一个库管理程序,
这里 bower 安装了这个 lib : https://github.com/tef-components/theme
在执行
1 |
bower install |
至此, 跟目录下出现了 bower_components 文件夹
Less
在跟目录新建文件夹 less
/home/liuyang/learntokboxrtc/expressjshwNew/less
放入需要 bower 库支持的less文件
接着在网站跟目录执行: grunt clientBuild
即可生成 css 文件
至此所有准备工作均已完成
接下来转到 : http://www.notesoflyang.com/?p=2390
room.ejs 及其 css分析