nodejs + ejs(转为html)+gulp 搭建项目结构
1 安装运行环境 Node.JS 和 NPM
这很容易,进入Node.js官方网站,点击绿色的大Install按钮,它会自动检测你的系统并给你一个正确的安装文件的下载。(如果没有,点击Download按钮选择你需要的下载)。运行安装程序,这样就好了。你已经装上了Node.js,和NPM(Node包管理器)可以让你很容易的安装各种有用的包到Node里。
2 打开终端窗口,cd 进到项目目录里
比如 c:\yzk
3 安装 express
npm install -g express / cnpm install -g express
4 创建一个express项目
比如:express -e yzk (-e表示ejs模板,yzk表示项目名称)
5 编辑依赖项: package.json文件
如果需要用到某些依赖,可以手动添加到package.json的依赖项里面,比如mongodb
6 安装依赖:
首先进入到项目目录下: cd /yzk
开始安装依赖: npm install
7 启动项目
npm start
在浏览器打开,默认端口是 3000
说明项目启动成功。
8 修改启动项目的配置
默认如下所示:
为了项目统一,把启动文件的名字改成和项目名一样的名字(可以不改,看个人喜欢):
修改端口号:
命令行 按 ctrl + c 停止项目,在 运行 npm start 重启 yzk 项目
如上图所示,说明新的端口号已经启动成功。
9 修改 app.js 配置,使得可以识别html模板
默认情况下,我们是以ejs模板创建项目,是不会识别html模板的
我们在views里面确实看到的使用是ejs模板的,下面修改成能够识别html模板的
重新启动yzk项目,页面加载成功,说明修改已经生效:
如果对于ejs不熟的,那么使用HTML应该很顺手了。
10 配置 gulp
(1)全局安装gulp:
npm install --global gulp
(2) 作为项目的开发依赖(devDependencies)安装:
npm install --save-dev gulp
(3) 在项目根目录下创建一个名为 gulpfile.js 的文件:
(4) 运行 gulp:
默认的名为 default 的任务(task)将会被运行,在这里,这个任务并未做任何事情。想要单独执行特定的任务(task),请输入 gulp 。
(5)以下是一个简单打包css的案例:
运行gulp:
这个dist文件夹就是我们在上面配置task任务里面设置的打包后路径,没有则会自动生成改文件夹。这里只是配置css的打包,其他的html,js都同理,只需要给它们定义单独的task任务,然后加到default任务数组里面,再分别监听它们即可。若想多了解gulp的相关知识,可以去gulp官网。
此时页面显示也是ok的:
以上就是本章标题的完整案例展示,希望给大家有所帮助。若需要查看源代码的,可以到github下载案例的源码:nodejs+ejs+html+gulp。