文档章节

关于node.js和gulp配置环境问题

啊蔡
 啊蔡
发布于 2017/09/07 09:53
字数 562
阅读 220
收藏 0

精选30+云产品,助力企业轻松上云!>>>

前段时间接触ajax的时候发现笔记本的配置环境出了问题,很不方便。用apache配置略繁琐,考虑到不是大型项目,用node.js配置就够了。查找资料后研究了好久,总是安装好了,记录一下步骤,记忆不好以防日后需要。

1.安装node.js

在node.js官网根据情况下载(Windows 系统 (.msi) 64位),选择安装路径后一直next下去 ,最后点击 Finish完成。

2.打开cmd

开始 》输入“cmd” ,打开。输入“path” 查看环境变量是否已安装了node.js。 然后输入"node --version"、"npm -version" 查看node.js版本

输入图片说明

3.新建存放文件

先在E盘(任意盘)新建一个“webserver”(任意命名)的文件,然后在里面新建一个src文件。 再src里面新建5个文件并命名。

将gulp配置文件package.json、gulpfile.js 等文件下载后放到“webserver”下面。

gulpfile.js配置文件下载

输入图片说明

然后在cmd输入“npm install gulp -g” 回车安装插件。

输入图片说明

安装之后再输入npm install回车。

输入图片说明

安装后,再看下webserver文件里面会多出一个‘’node_modules”文件,总算安装成功。

输入图片说明

**4.打开webserver gulpfile.js文件修改 **

把这个位置的代码删掉,改成:

server: {baseDir: './'},//根目录启动服务器

看到一个前端博客写如果没有打开iis服务器的话就要修改.....emm..没安装 跟着贴过去好了

输入图片说明

5.打开Node.js command prompt

输入图片说明

输入 gulp+回车,浏览器自动弹出。

输入图片说明

输入图片说明

这时“webserver”下多了一个"dist"文件。

输入图片说明

配置环境成功。把项目放在src里面看下

输入图片说明

总结

1.之前配置环境失败原因大概就是cmd路径填写错误和缺失配置文件导致,还有在最后一步输入gulp的时候把cmd关了导致。

2.关于webserver下关于新建src文件的问题。一开始没新建 ,项目放在“webserver”下也可以在本地服务器查看到。但如果修改文件后保存,浏览器不能自动预览。 src文件用来放置项目后,修改代码保存后浏览器自动预览,自动合并压缩文件放到dist文件下。

啊蔡
粉丝 0
博文 4
码字总数 1274
作品 0
广州
前端工程师
私信 提问
加载中
请先登录后再评论。
对www.518shengmao.com站资源打包,采用vue Node.js

最近闲游时间比较多,于是想搞个网站练练手,首先选域名在godday里选了个www.518shengmao.com,买了个1元的阿里云服务器,接下来程序了。 采用vue+nodejs来开发的 一、NodeJs环境安装与配置 ...

osc_y7ckpzr9
2019/04/26
2
0
【Django】关于前端配置

今天在网上课程了学了一下前端配置,感觉搭这个环境安装了不少东西,自己都有点混乱,现在整理一下思路: 1.nvm 即Note Version Manager用来管理node版本的工具; windows版本地址https://g...

osc_e9uoo9a9
2018/08/24
1
0
gulp命令找不到 – 安装gulp后出错

gulp命令找不到 – 安装gulp后出错 事实证明挺有用的:我的问题是安装了gulp命令找不到,添加了环境变量还是不行,在下找不到gulp.cmd文件,最后看到这篇文章,尝试下安装gulp-cli包,然后再...

飛飛飛jjs
2017/06/10
0
0
gulp的安装与使用【附配置代码】

备忘 1.配置  下载安装node.js    node -v //检查nodejs版本 npm(nodejs package manager)nodejs包管理工具 nodejs完毕在命令行输入npm -v检验是否安装成功,并检查npm版本 2.安装淘宝cnp...

osc_b1y21l0d
2019/02/22
4
0
【译】Webpack对比

  原文链接:http://survivejs.com/webpackreact/webpack_compared/ 开始正文   当你把Webpack放到过往历史中你就会很好地理解为什么它的方法是如此的有力。在早些时候,它的能力对于仅仅...

osc_1h9xhkow
2018/02/28
2
0

没有更多内容

加载失败,请刷新页面

加载更多

java使用jsoup时绕过https证书验证

java 代码 增加一个工具类 在jsoup获取之前调用此方法 //your codeSSLHelper.init();Connection connect = Jsoup.connect(url).userAgent(USER_AGENT);connect.header("Accept","text/htm......

MeiJM
20分钟前
30
0
6 Message 消息提示框

1 element.js导入message import { Message } from 'element-ui'# 赋值给变量,便于this调用Vue.prototype.$message = Message 2 调用 this.$message.error('错误')类型有:success,w......

书阳
20分钟前
16
0
聊聊rocketmq-client-go的strategy

序 本文主要研究一下rocketmq-client-go的strategy AllocateStrategy rocketmq-client-go-v2.0.0/consumer/strategy.go type AllocateStrategy func(string, string, []*primitive.MessageQ......

go4it
48分钟前
21
0
BuildRun低代码开发教程八节 | 图表和仪表盘展示

课程说明 ▍ 1.1 课程实现功能 本课程为物联网应用平台设计一个仪表盘首页,包括以下内容: 卡片展示设备总数; 卡片展示网关总数; 卡片展示产品总数; 卡片展示产品分组总数; 图表展示各运...

BuildRun团队
52分钟前
23
0
JavaSE第03篇:Java基础语法之运算符和流程控制

本章将会延续JavaSE第02篇,详细讲解Java基础语法中的运算符和流程控制中的顺序结构、分支结构。 第一章:运算符 运算符,简而言之就是运算的符号。 我们通常所理解的运算一般和数学有关系,...

雷哒哒
54分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部