文档章节

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

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

前段时间接触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
广州
前端工程师
【Angular4学习】npm 安装参数中的 --save-dev 含义 + package.json的依赖关系说明

关于 - -save-dev参数 有些 node.js 的包安装的时候都加上 –save-dev 参数,这参数是做什么的,加和不加有什么区别呢? 解释 当你为你的模块安装一个依赖模块时,正常情况下你得先安装他们(...

yyzzhc999
04/26
0
0
第210天:node、nvm、npm和gulp的安装和使用详解

一、node 1、什么是node? 它不是JS文件,也不是JS框架,而是Server side JavaScript runtime,当服务端的一个JS文件运行时,会被NODE拦截,在NODE中运行JS代码。JS由ES(ECMAScript),DOM...

半指温柔乐
04/01
0
0
Nodejs 库路径

Gulp.js介绍 Gulp是一个构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了JavaScript里。前端开...

雨中人X
2015/12/08
40
0
非 root 用户全局安装和配置 NodeJS

主要针对 Linux 非 root 用户,在没有 root 权限下如果安装及配置 NodeJS(注:这里安装的是官网上已经编译好的二进制包)。 首先,到 NodeJS 的官网(https://nodejs.org/en/download/)下载...

Mr_ET
05/29
0
0
gulp安装流程、使用方法及cmd常用命令导览

gulp安装流程、使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结     一、名词介绍: Npm——node包管理工具 一开始我不理解,包管理工具是什么鬼。后来用到的gulp也好,...

鋒o丫头
2017/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq学习(一)

RabbitMQ是目前非常热门的一款消息中间件,具有高可靠、易拓展、高可用及丰富的功能 1.什么是消息中间件 消息是指在应用间传送的数据。包含文本字符串、JSON、内嵌对象 消息队列中间件(消息...

hensemlee
23分钟前
1
0
学习设计模式——原型模式

1. 认识原型模式 1. 定义:用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象。 2. 结构: Prototype:声明一个克隆自身的接口,用来约束想要克隆自己的具体实现类,要求这些类...

江左煤郎
29分钟前
1
0
观察者模式

观察者模式的套路 有如下角色: 事件,比如修改,用户点击; 事件队列,触发事件之后,会把事件一个一个放入事件队列 监听器,采用某种方式(一般是轮询,或者io阻塞机制),来判断事件队列是否有新的未...

黄威
33分钟前
1
0
线程安全策略

四个线程安全策略 线程限制: 一个被线程限制的对象,由线程独占,并且只能被占有它的线程修改 共享只读: 一个共享只读的对象,在没有额外同步的情况下,可以被多个线程并发访问,但是任何线...

Ala6
39分钟前
2
0
Dubbo (三)源码分析 —— 架构原理

1 核心功能 首先要了解Dubbo提供的三大核心功能: Remoting:远程通讯 提供对多种NIO框架抽象封装,包括“同步转异步”和“请求-响应”模式的信息交换方式。 Cluster: 服务框架 提供基于接口方...

小刀爱编程
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部