NodeJS前端开发日记（1）搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境

最近做的项目我负责架构和全栈开发，前端从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环境

本文使用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环境相关推荐

web前端开发日记------入职腾讯外包
入职了腾讯的外包了面试前还是准备了几天,在网上刷刷基础题,具体面试的时候,只有一次的技术面,具体的面试题可以看我另一篇文章 web前端腾讯外包面试记录入职的第一天,上午在外包公司办理入职,下午就到 ...
nodejs mac java home_Mac上搭建nodejs开发环境
###Mac上搭建nodejs开发环境 ####安装homebrew 1 2 3ruby -e "$(curl -fsSL https://raw.githubusercontent.com ...
html5 nodejs桌面开发工具,html5fromImages－nodejs生成器入门
最近有好多需求是把一堆图片,或者一张长图转成HTML文件在客户端展示,所以想尝试自动化这一过程,简单实验了一个HTML5生成器. 功能: 根据文件夹中图片文件生成简单HTML5展示页面安装 $ np ...
《Nodejs开发加密货币》之三：Nodejs让您的前端开发像子弹飞一样
关于 <Nodejs开发加密货币>,是一个加密货币产品的详细开发文档,涉及到使用Nodejs开发产品的方方面面,从前端到后台.从服务器到客户端.从PC到移动.加密解密等各个环节.代码完全开 ...
前端开发应知网站(转载)
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43606158/arti ...
自学前端开发，现在手握大厂offer，我的故事还在继续
简要背景我是一个非科班出身的程序员,而且是连续跨专业者,用一句话总结就是:16 届本科学完物流,保送研究生转交通,自学前端开发的休学创业者. 17 年休学创业,正式开始学习前端,离开创业公司后,我又 ...
作为前端开发，我为何疯狂推荐WebStorm？
经常会有小伙伴过来私信我,让我给他们推荐一下前端开发工具,我几乎都是毫不犹豫地就说 " WebSotrm ",原因我当时也没给他们细讲,因为这款开发工具功能实在是太全了,一句两句说 ...
python安装环境傻瓜式安装_前后端分离——前端开发环境傻瓜式一步到位 nodejs ruby python nginx 安装搭建配置...
前端开发环境一步到位一.准备工作 nodejs安装安装:next->next.... Ruby安装安装:next->next.... 需要配置到path:将安装目录复制到环境变量中, ...
webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事必先利其器##各工具介绍 `webstorm`是**JetBrains** ...

NodeJS前端开发日记（1）搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境

搭建NodeJS环境

NodeJS前端开发日记（1）搭建NodeJS+ExpressJS+AngularJS+Jade+LESS+Yeoman环境相关推荐

最新文章

热门文章