nodejs安装环境搭建--gulp安装

2024-05-16 14:48
文章标签 安装 搭建 环境 nodejs gulp

本文主要是介绍nodejs安装环境搭建--gulp安装,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文:3w.ydcss.co*m/archives/18#lesson6

1. 下载nodejs安装包

去nodejs官网下载软件https://nodejs.org

2. 安装Nodejs

Window:直接下一步下一步式安装。安装好后WIN+R输入cmd调出DOS窗口,输入node看是否有交互,如果没有则查看系统变量Path,把path配置上去。 
Linux : 暂时没有实战。

3. 测试

创建测试文件:test.js

var http = require("http"); 
http.createServer(function(request, response) { 
response.writeHead(200, {"Content-Type": "text/plain"}); 
response.write("test nodjs"); 
response.end(); 
}).listen(8899); 
console.log("nodejs start listen 8899 port!"); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

进入cmd命令窗口,进入test.js文件的位置node test.js 
看看是否有信息正常输出和浏览器127.0.0.1:8899看是否有正常的打印。 
如果都有,说明安装配置成功。

4. 配置npm的全局路径

Windows下的Nodejs npm路径是appdata,可能不是我们想要的路径,可以改成我们指定的路径方便管理。 
在cmd下执行以下命令 
npm config set cache “D:\nodejs\node_cache” 
npm config set prefix “D:\nodejs\node_global” 
如果命令无效,可以去nodejs的安装目录中找到node_modules\npm\npmrc文件,这个文件存放npm的userconfig配置。 
修改如下即可: 
prefix = D:\nodejs\node_global 
cache = D:\nodejs\ node_cache

5. 全局安装gulp

打开Node.js command prompt 
输入命令:npm install –g gulp 
然后输入gulp -v,如果提示不是内部或外部命令,说明没有配置系统变量path,手动去配置pasth,地址是prefix的地址。

6. 本地安装gulp

建立项目,创建Gulpfile.js和package.json文件。运行命令npm install gulp –save-dev,安装本地gulp。

7. gulp的实施与使用

创建工作目录与发布目录 
工作目录:即没有经过压缩合并等处理的文件存放目录。 
发布目录:即项目发布所引用的文件目录地址,这里的文件是经过gulp压缩合并等处理后生成的文件,处理过后的名字可以自定义,也可以不处理即与未处理文件名相同。

8.安装gupl依赖包

 

 

安装必要的开发工具包

  • gulp :基于流的自动化构建工具
  • gulp-browserify :前端模块及依赖管理
  • gulp-concat :文件合并插件
  • gulp-react :JSX语法转化工具
  • gulp-connect :构建本地开发Web服务器
  • lodash :一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库
  • reactify :React 编译器
npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev

 

 

安装生产环境依赖包

  • react :主要框架
  • react-dom :React的DOM操作类
  • bootstrap :bootstrap样式

 

 

npm install --save react react-dombower install --save bootstrap
 

 

写入gulp配置文件gulpfile.js

 

你可以在npm的网站上找到相应插件的gulp配置写法。我配置的gulpfile.js129

开发

  • 切分相应的模块
  • 分清UI组件和容器组件
  • 学会如何在组件之间通信
  • 注意写作规范和开发细节

部署生产

请切换分支到 product 分支

修改gulpfile文件

 

//添加copy任务
gulp.task('copy',function(){gulp.src('./app/css/*').pipe(gulp.dest('./dist/css'));gulp.src('./bower_components/**/*').pipe(gulp.dest('./dist/libs'));gulp.src('./*.html').pipe(gulp.dest('./dist'));
});//生产服务器
gulp.task('connect-pro',function(){connect.server({root:'./dist',port:port,livereload:true,})
});//添加build任务
gulp.task('build',['browserify','copy']);//添加启动生产服务器任务
gulp.task('server-pro',['build','connect-pro','watch']);

修改index.html引用目录

 

<link rel="stylesheet" href="./libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./css/index.css"><script src="./js/main.js"></script>

使用gulp-gh-pages部署到github pages

下载gulp-gh-pages插件

 

npm install --save-dev gulp-gh-pages

在gulpfile文件中添加配置gulp-gh-pages代码

 

var ghPages = require('gulp-gh-pages');gulp.task('deploy', function() {return gulp.src('./dist/**/*').pipe(ghPages());
});
 

 

初始化npm bower

 

 

npm init  //一直enter,默认就好bower init //同上一直enter
 

 

git clone https://github.com/tsrot/react-zhihu.git

cd react-zhihu

npm install

bower install

gulp server-pro (这个是在gulpfile.js中声明的服务)

//用浏览器打开 localhost:5000

这篇关于nodejs安装环境搭建--gulp安装的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/995215

相关文章

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式。 ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境; ■ 伪集群模式:就是在一台物理机上运行多个Zookeeper 实例; ■ 集群模式:Zookeeper运行于一个集群上,适合生产环境,这个计算机集群被称为一个“集合体”(ensemble) Zookeeper通过复制来实现

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7

Centos7安装Mongodb4

1、下载源码包 curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.2.1.tgz 2、解压 放到 /usr/local/ 目录下 tar -zxvf mongodb-linux-x86_64-rhel70-4.2.1.tgzmv mongodb-linux-x86_64-rhel70-4.2.1/

Centos7安装JDK1.8保姆版

工欲善其事,必先利其器。这句话同样适用于学习Java编程。在开始Java的学习旅程之前,我们必须首先配置好适合的开发环境。 通过事先准备好这些工具和配置,我们可以避免在学习过程中遇到因环境问题导致的代码异常或错误。一个稳定、高效的开发环境能够让我们更加专注于代码的学习和编写,提升学习效率,减少不必要的困扰和挫折感。因此,在学习Java之初,投入一些时间和精力来配置好开发环境是非常值得的。这将为我

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别: 采用超过 40 万小时数据训练,支持超过 50 种语言,识别效果上优于 Whisper 模型。富文本识别:具备优秀的情感识别,能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力,支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推

搭建Kafka+zookeeper集群调度

前言 硬件环境 172.18.0.5        kafkazk1        Kafka+zookeeper                Kafka Broker集群 172.18.0.6        kafkazk2        Kafka+zookeeper                Kafka Broker集群 172.18.0.7        kafkazk3

安装nodejs环境

本文介绍了如何通过nvm(NodeVersionManager)安装和管理Node.js及npm的不同版本,包括下载安装脚本、检查版本并安装特定版本的方法。 1、安装nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 2、查看nvm版本 nvm --version 3、安装

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6+Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站,手机流量可以访问IPV6网络的服务,为什么不在电脑搭建Home Assistant(hass),来控制你的设备呢?@智能家居 @万物互联

高并发环境中保持幂等性

在高并发环境中保持幂等性是一项重要的挑战。幂等性指的是无论操作执行多少次,其效果都是相同的。确保操作的幂等性可以避免重复执行带来的副作用。以下是一些保持幂等性的常用方法: 唯一标识符: 请求唯一标识:在每次请求中引入唯一标识符(如 UUID 或者生成的唯一 ID),在处理请求时,系统可以检查这个标识符是否已经处理过,如果是,则忽略重复请求。幂等键(Idempotency Key):客户端在每次

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能