在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):tsrot/react-zhihu开源软件地址(OpenSource Url):https://github.com/tsrot/react-zhihu开源编程语言(OpenSource Language):JavaScript 90.7%开源软件介绍(OpenSource Introduction):模仿知乎界面的一个简单React demo博客地址:http://blog.xieliqun.com/2016/11/04/react-zhihu/
项目运行 $ git clone https://github.com/tsrot/react-zhihu.git
$ cd react-zhihu
$ npm install
$ bower install
$ gulp server //用浏览器打开 localhost:5000 搭建开发环境初始化npm bowernpm init //一直enter,默认就好
bower init //同上 安装必要的开发工具包
npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev 安装生产环境依赖包
npm install --save react react-dom
bower install --save bootstrap 写入gulp配置文件gulpfile.js你可以在npm的网站上找到相应插件的gulp配置写法。我配置的gulpfile.js 开发
部署生产请切换分支到 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());
}); webpack分支)webpack + es6 (1、手动删除bower_components,统一使用npm,这样有利于后面webpack的配置。 把bootstrap安装到node_modules: $ npm install --save bootstrap 2、安装webpack-stream、vinyl-named、gulp-clean $ npm install --save-dev webpack-stream vinyl-named gulp-clean 3、安装webpack plugin和webpack loader $ npm install --save-dev html-webpack-plugin extract-text-webpack-plugin babel-core babel-loader babel-preset-es2015 babel-preset-react style-loader css-loader postcss-loader autoprefixer file-loader 4、配饰gulp和webpack 后续将在分支中更新使用下列技术的版本
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论