文档章节

关于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
基于Node.js的自动化工具Gulp

基于Node.js的自动化工具Gulp What is gulp? gulp是前端开发过程中一种基于流的代码构建工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用...

笔阁
2015/10/29
950
1
第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
非 root 用户全局安装和配置 NodeJS

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

Mr_ET
05/29
0
0
Nodejs 库路径

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

雨中人X
2015/12/08
40
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
9
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
5
0
my.ini

1

architect刘源源
今天
7
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
8
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部