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

最新推荐文章于 2023-03-22 21:36:16 发布

u010513603

最新推荐文章于 2023-03-22 21:36:16 发布

阅读量3.7k

点赞数 1

分类专栏： nodejs

nodejs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原文：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!");

进入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-dom

bower 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