NodeJS前端开发日记(1)搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境
2016-10-17 20:03
579 查看
最近做的项目我负责架构和全栈开发,前端从JSP转换到了Html + jquery+ajax,后端为Java。随着功能不断地迭代还有系统不断地壮大,前端纯html+jquery+ajax的问题也暴露出来了:
前端代码越来越大,复用性越来越差。
同步请求很难处理
依赖库越来越多,没有统一管理
CSS,JS和img压缩很麻烦
组内大部分都是偏向于后端的工程师,前端经验少,需要一个能快速上手的框架。
经过这些考虑,我决定采用NodeJS+ExpressJS+AngularJS(扩展HTML标签,动态HTML)+Jade(前端模板引擎,2016年4月已改名为PUG,但是改名后的版本还有问题,所以我们还是用Jade)+LESS(CSS面向对象化框架)+Yeoman(包括yo,bower和grunt的工具)+bower(前端库依赖管理,相当于maven)+Grunt(发布工具)的前端开发框架,来改造现有的前端,写这系列博客记录下。
我们前端的容器还是tomcat,但是html相关的管理改到了NodeJS中,我们没有用任何NodeJS服务器内容,ExpressJS只是用来测试。真正的后端接口还有web层容器还是Java。
首先下载好NodeJS 4.4.4,(这个是长期稳定版)并安装,配置好环境变量(就是在terminal下能使用node命令还有npm),在WebStorm中新建NodeJS express项目:
模板引擎这里选择Jade,CSS渲染选择LESS。之后确认:
这里摆上npm包管理基本用法:
使用 npm 命令安装模块:
以下实例,我们使用 npm 命令安装常用的 Node.js web框架模块 Angular:
安装好之后,angular包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require(‘angular’) 的方式就好,无需指定第三方包路径。
npm 的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如
本地安装
1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
2. 可以通过 require() 来引入本地安装的包。
全局安装
1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
2. 可以直接在命令行里使用。
你可以使用以下命令来查看所有全局安装的模块:
我们在这个项目中会用到yeoman。我们的项目管理依赖于Bower,因为这里NodeJS主要完成前端工作,对于前端的依赖管理,bower的目录结构更好一些。
所以,我们使用WebStorm自带的命令行,快捷键alt+F12. 唤出命令行,执行:
之后,我们在项目根目录创建.bowerrc文件(填写bower管理的依赖库路径):
再在根目录创建bower.json文件(填写项目信息和依赖库):
注:
运行:
将所有的view目录下的jade文件移动到public下,同时修改app.js中的jade view路径。这样为了jade渲染的html资源路径和在tomcat容器中看的一致。
同时,配置Webstorm渲染自动生成html:
前端代码越来越大,复用性越来越差。
同步请求很难处理
依赖库越来越多,没有统一管理
CSS,JS和img压缩很麻烦
组内大部分都是偏向于后端的工程师,前端经验少,需要一个能快速上手的框架。
经过这些考虑,我决定采用NodeJS+ExpressJS+AngularJS(扩展HTML标签,动态HTML)+Jade(前端模板引擎,2016年4月已改名为PUG,但是改名后的版本还有问题,所以我们还是用Jade)+LESS(CSS面向对象化框架)+Yeoman(包括yo,bower和grunt的工具)+bower(前端库依赖管理,相当于maven)+Grunt(发布工具)的前端开发框架,来改造现有的前端,写这系列博客记录下。
我们前端的容器还是tomcat,但是html相关的管理改到了NodeJS中,我们没有用任何NodeJS服务器内容,ExpressJS只是用来测试。真正的后端接口还有web层容器还是Java。
搭建NodeJS环境
本文使用Webstorm作为基本IDE。首先下载好NodeJS 4.4.4,(这个是长期稳定版)并安装,配置好环境变量(就是在terminal下能使用node命令还有npm),在WebStorm中新建NodeJS express项目:
模板引擎这里选择Jade,CSS渲染选择LESS。之后确认:
这里摆上npm包管理基本用法:
使用 npm 命令安装模块:
$ npm install <Module Name>
以下实例,我们使用 npm 命令安装常用的 Node.js web框架模块 Angular:
npm install angular
安装好之后,angular包就放在了工程目录下的 node_modules 目录中,因此在代码中只需要通过 require(‘angular’) 的方式就好,无需指定第三方包路径。
var angular= require('angular');
npm 的包安装分为本地安装(local)、全局安装(global)两种,从敲的命令行来看,差别只是有没有-g而已,比如
npm install express # 本地安装 npm install express -g # 全局安装
本地安装
1. 将安装包放在 ./node_modules 下(运行 npm 命令时所在的目录),如果没有 node_modules 目录,会在当前执行 npm 命令的目录下生成 node_modules 目录。
2. 可以通过 require() 来引入本地安装的包。
全局安装
1. 将安装包放在 /usr/local 下或者你 node 的安装目录。
2. 可以直接在命令行里使用。
你可以使用以下命令来查看所有全局安装的模块:
$ npm ls -g
我们在这个项目中会用到yeoman。我们的项目管理依赖于Bower,因为这里NodeJS主要完成前端工作,对于前端的依赖管理,bower的目录结构更好一些。
所以,我们使用WebStorm自带的命令行,快捷键alt+F12. 唤出命令行,执行:
npm install yo npm install bower npm install grunt-cli
之后,我们在项目根目录创建.bowerrc文件(填写bower管理的依赖库路径):
{ "directory": "./public/lib" }
再在根目录创建bower.json文件(填写项目信息和依赖库):
{ "name": "sfpp-frontend", "version": "3.0.0", "dependencies": { "angular": "~1.5.8", "angular-route": "~1.5.8", "bootstrap": "^3.3.7", "angular-bootstrap": "^2.2.0", "stickUp": "^0.5.7" }, "devDependencies": {} }
注:
bower install angular --save会添加angular并更新文件
运行:
bower install
将所有的view目录下的jade文件移动到public下,同时修改app.js中的jade view路径。这样为了jade渲染的html资源路径和在tomcat容器中看的一致。
同时,配置Webstorm渲染自动生成html:
相关文章推荐
- NodeJS前端开发日记(1)搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境
- nodeJS搭建前端服务环境(适配开发工具eclipse及sublime Text)
- NodeJS前端开发日记(2)AngularJS+Jade入门实战
- NodeJS前端开发日记(2)AngularJS+Jade入门实战
- Windows环境搭建VUE前端开发环境-安装NodeJS
- Nodejs开发web环境搭建
- “mac os + intellij idea 13 + nodejs开发环境搭建教程(附详细图解)
- 用Shell脚本快速搭建Ubuntu下的Nodejs开发环境
- 用Shell脚本快速搭建Ubuntu下的Nodejs开发环境
- Nodejs-搭建Nodejs开发环境
- JBOSS安装与配置搭建本地项目环境(方便前端开发调式)
- Nodejs开发web环境搭建 分类: Android网络 2014-06-29 12:14 112人阅读 评论(0) 收藏
- Grunt+Livereload 搭建本地前端开发环境
- centos 下 搭建 nodejs 开发环境
- 使用云服务器搭建nodejs开发环境
- Nodejs+Extjs+Mongodb开发第一天 Nodejs环境搭建
- nodejs的npm安装模块时候报错:npm ERR! Error: CERT_NOT_YET_VALID的解决方法 - 包子博客 _ 关注互联网前端、开发、SEO、移动互联网应用技术
- 【Nodejs开发】第1章 述与环境搭建
- 由NodeJS浅谈无敌的前端开发工程师
- 前端开发日记之jQuery