前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Express开发实战

Express开发实战

作者头像
用户1065635
发布2019-03-21 11:53:43
1.6K0
发布2019-03-21 11:53:43
举报
文章被收录于专栏:前端社区前端社区

今天为了制作compass-style.org国内网站,决定使用nodejs来开发,express作为nodeJs 快速开发框架成为不二选择。半年前就学过nodeJs,express,到现在就来一次实战吧,实战过程果然会遇到许多问题,但解决问题的过程就是一种历练,更加坚实了我使用nodeJs的决心

全局安装express-generator

代码语言:javascript
复制
$ npm install express-generator -g

生成项目。新建myapp目录,

代码语言:javascript
复制
$ cd myapp$ express src create : src create : src/package.json create : src/app.js create : src/public create : src/public/javascripts create : src/public/images create : src/routes create : src/routes/index.js create : sec/routes/users.js create : src/public/stylesheets create : src/public/stylesheets/style.css create : src/views create : src/views/index.jade create : src/views/layout.jade create : src/views/error.jade create : src/bin create : src/bin/www

安装nodeJs依赖包

代码语言:javascript
复制
$ cd src$ npm install

使用swig作为模板引擎。其默认模板引擎是jade,但我觉得jade改变了html编码风格,不好使用,于是选择其他模板引擎,我选择了swig,因为它至少支持我们需要的几个基本功能,html编码风格,而ejs,jade都有所欠缺。

*支持include,引入文件

*支持继承

*有if,else,filter许多常用标记

代码语言:javascript
复制
$ npm install swig --save

修改app.js

代码语言:javascript
复制
var swig = require('swig');//view engine setupapp.set('views', path.join(__dirname, 'views'));app.engine('html', swig.renderFile);app.set('view engine', 'html');

至此我们就可以在views文件夹中使用后缀名为html,引擎为swig的模板。

  1. nodemon 让nodeJs开发更容易

我们开发nodeJs的时候,修改了文件,但又要重启一遍服务器才能看到修改的结果。我们不可能修改一次就重启一次服务器,这时就要使用nodemon监控文件变更,自动重启服务器了。

全局安装nodemon

代码语言:javascript
复制
npm install -g nodemon

在根目录myapp执行监控命令,但要加上html文件监控扩展,比如 nodemon -e html

代码语言:javascript
复制
nodemon ./bin/www -e html

这个时候只要我们修改了任何文件,服务器就好迅速重启一次,我们刷新就能看到最新结果.

6.实时刷新页面。服务器端代码改变了,服务器能够重新编译一次,但客户端还不能自动刷新

这里使用Grunt来构建自动化工作流,nodemon使用grunt-nodemon来启动,然后用grunt-concurrent结合grunt-contrib-watch,livereload 自动重启服务器,刷新页面。

分别安装以下nodejs 模块

代码语言:javascript
复制
$ npm install --save-dev grunt-concurrent$ npm install --save-dev grunt-nodemon$ npm install --save-dev grunt-contrib-watch$ npm install --save-dev load-grunt-tasks

配置Gruntfile.js

代码语言:javascript
复制
'use strict';module.exports = function(grunt) { // 自动加载插件 require('load-grunt-tasks')(grunt); // 显示任务花费时间 require('time-grunt')(grunt); // 应用程序路径配置 var appConfig = { app: 'src', //源码目录 dist: 'dist', //最终代码目录 tmp: 'tmp' }; // 定义插件 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), yeoman: appConfig, concurrent: { target: { tasks: ['nodemon', 'watch'], options: { logConcurrentOutput: true } } }, nodemon: { dev: { script: '<%=yeoman.app%>/bin/www', //express4 启动文件 options:{ ext: 'html' //增加nodemon监控文件后缀支持 } } }, watch:{ options: { livereload:true }, livereload: { files: [ //下面文件的改变就会实时刷新网页 '<%=yeoman.app%>/{,*/,*/*/,*/*/*/,*/*/*/*/}*.**' ] } } }); //静态服务器任务 grunt.registerTask('serve', ['concurrent']);};

项目目录结构如下

–myapp

–src

–bin

–Gruntfile.js

–package.json

到此,我们就可以直接在myapp目录下运行grunt serve命令,浏览器打开http://localhost:3000/,接下来就可以愉快的编码了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档