使用Gulp和Browserify来搭建React应用程序
对React有必定了解以后，咱们知道，须要把JSX文件转换成JS文件，组件须要导入导出。本篇就体验使用Gulp把JSX文件转换成JS文件，使用Browserify来把组件捆绑到一个文件并理顺组件之间的依赖关系。html
Gulp是用来干吗的呢？用来把Coffeescript, SASS, JSX等转换成浏览器能理解的JavaScript或CSS，再好比压缩文件到最小尺寸，再好比把文件捆绑到一个文件以减小请求次数，等等。node
【文件结构】react
node_modules/
gulpfile.js
Typler/
.....src/
..........index.html
..........js/
...............App.js
...............Child.js
...............Parent.jsnpm
【需求】gulp
Development阶段：把JSX文件转换成JS文件，并保存到dist/src文件夹中；把src文件夹中的index.html文件复制到dist文件夹中浏览器
Product阶段：把全部的JS文件concat, minify, 最终绑定到一个文件build.js，把index.html中全部<script>，替换成一个<script>标签。缓存
【index.html】app
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="../../lib/react.js"></script>
<script src="../../lib/react-dom.js"></script>
<script src="../src/js/Child.js"></script>
<script src="../src/js/Parent.js"></script>
<script src="../src/js//App.js"></script>
</body>
</html>
【Child.js】dom
var child = React.createClass({
render: function(){
return (
<div>
and this is the <b>{this.props.name}</b>.
</div>
)
}
});
【Parent.js】ui
var Parent = React.createClass({
render: function(){
return (
<div>
<div>This is the parent.</div>
<child name="child" />
</div>
)
}
});
【App.js】
ReactDOM.render(<Parent />, document.getElementById('app'));
【下载NPM Packages】
npm install --save-dev gulp npm install --save-dev gulp-concat npm install --save-dev gulp-uglify npm install --save-dev gulp-react npm install --save-dev gulp-html-replace
【gulpfile.js】
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var react = require('gulp-react');
var htmlreplace = require('gulp-html-replace');
var path = {
HTML: 'Tyler/src/index.html',
ALL:['Tyler/src/js/*.js', 'Tyler/src/js/**/*.js','Tyler/src/index.html'],
JS: ['Tyler/src/js/*.js', 'Tyler/src/js/**/*.js'],
MINIFIED_OUT: 'build.min.js',
DEST_SRC: 'Tyler/dist/src', //把从jsx文件转换而来的文件放这里
DEST_BUILD: 'Tyler/dist/build',
DEST: 'Tyler/dist'
};
//获取js的源文件，把jsx转换成js，放到目标文件夹
gulp.task('transform', function(){
gulp.src(path.JS)
.pipe(react())
.pipe(gulp.dest(path.DEST_SRC))
})
//把Tyler/src/index.html这个文件复制放到Tyler/dist中
gulp.task('copy', function(){
gulp.src(path.HTML)
.pipe(gulp.dest(path.DEST));
});
//观察index.html和js文件的变化，执行以上的2个任务
gulp.task('watch', function(){
gulp.watch(path.ALL, ['transform', 'copy']);
});
//名称为default的task，须要
gulp.task('default',['watch','transform', 'copy']);
- transform这个task用来把jsx转换成js
- copy这个task用来把Tyler/src/index.html复制拷贝到Tyler/dist/index.html
- watch这个task用来观察js和html文件的变化，一旦有变化就执行transform和copy这个task
- default是默认的task，必定须要，执行全部的task
如今执行gulp命令后，Tyler下多了dist文件夹，dist文件夹下多了index.html和src文件夹，src文件夹下有Child.js, Parent.js, App.js.
如今还剩下发布状态下的一些task，要作的事包括：
- 先获取到全部的js文件
- 把全部的js文件拼接起来
- 最小化js文件
- 把输出文件放到dist/build文件夹中
咱们在gulp.js文件中增长以下：
//发布到生产环境的task
gulp.task('build', function () {
gulp.src(path.JS)
.pipe(react())
.pipe(concat(path.MINIFIED_OUT)) //合并到build.min.js文件中
.pipe(uglify(path.MINIFIED_OUT)) //压缩build.min.js文件中
.pipe(gulp.dest(path.DEST_BUILD));//把build.min.js文件放到Tyler/dist/build文件夹中
});
运行"gulp build"命令，这样，在Tyler/dist/build下多了一个合并压缩后的build.min.js文件。
但这里还有一个问题：Tyler/dist/index.html中依然引用的是src/js中的文件
<script src="../src/js/Child.js"></script>
<script src="../src/js/Parent.js"></script>
<script src="../src/js//App.js"></script>
而咱们须要引用的是以下这个文件：
<script src="build/build.min.js"></script>
gulp-html-replace就是为解决这个问题而存在。须要两步。
第一步：来到Tyler/src/index.html文件中，添加<!--build:js--><!--endbuild-->指令。
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="../../lib/react.js"></script>
<script src="../../lib/react-dom.js"></script>
<!-- build:js -->
<script src="../src/js/Child.js"></script>
<script src="../src/js/Parent.js"></script>
<script src="../src/js//App.js"></script>
<!-- endbuild -->
</body>
</html>
第二步：添加task
//在Tyler/dist/index.html中引用的js文件和Tyler/src/index.html中不同，须要替换
gulp.task('replaceHTML', function(){
gulp.src(path.HTML)
.pipe(htmlreplace({
'js': 'build/' + path.MINIFIED_OUT
}))
.pipe(gulp.dest(path.DEST));
});
//把发布到生产环境以前的全部任务再提炼
gulp.task('production', ['replaceHTML', 'build']);
运行：gulp production
再次来到Tyler/dist/index.html中，惊喜地发现以下：
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="app"></div>
<script src="../../lib/react.js"></script>
<script src="../../lib/react-dom.js"></script>
<script src="build/build.min.js"></script>
</body>
</html>
使用gulp-html-replace生效了！
最后，把完整的gulpfile.js呈现以下：
//Tyler
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var react = require('gulp-react');
var htmlreplace = require('gulp-html-replace');
var path = {
HTML: 'Tyler/src/index.html'
, ALL: ['Tyler/src/js/*.js', 'Tyler/src/js/**/*.js', 'Tyler/src/index.html']
, JS: ['Tyler/src/js/*.js', 'Tyler/src/js/**/*.js']
, MINIFIED_OUT: 'build.min.js'
, DEST_SRC: 'Tyler/dist/src', //把从jsx文件转换而来的文件放这里
DEST_BUILD: 'Tyler/dist/build'
, DEST: 'Tyler/dist'
};
//获取js的源文件，把jsx转换成js，放到目标文件夹
gulp.task('transform', function () {
gulp.src(path.JS)
.pipe(react())
.pipe(gulp.dest(path.DEST_SRC))
})
//把Tyler/src/index.html这个文件复制放到Tyler/dist中
gulp.task('copy', function () {
gulp.src(path.HTML)
.pipe(gulp.dest(path.DEST));
});
//观察index.html和js文件的变化，执行以上的2个任务
gulp.task('watch', function () {
gulp.watch(path.ALL, ['transform', 'copy']);
});
//名称为default的task，须要
gulp.task('default', ['watch', 'transform', 'copy']);
//发布到生产环境的task
gulp.task('build', function () {
gulp.src(path.JS)
.pipe(react())
.pipe(concat(path.MINIFIED_OUT)) //合并到build.min.js文件中
.pipe(uglify(path.MINIFIED_OUT)) //压缩build.min.js文件中
.pipe(gulp.dest(path.DEST_BUILD));//把build.min.js文件放到Tyler/dist/build文件夹中
});
//在Tyler/dist/index.html中引用的js文件和Tyler/src/index.html中不同，须要替换
gulp.task('replaceHTML', function(){
gulp.src(path.HTML)
.pipe(htmlreplace({
'js': 'build/' + path.MINIFIED_OUT
}))
.pipe(gulp.dest(path.DEST));
});
//把发布到生产环境以前的全部任务再提炼
gulp.task('production', ['replaceHTML', 'build']);
以上，咱们了解了有关gulp的好多方面，但这样的作法还有那些不足呢？
- 须要手写各个组件的js文件位置
- Parent.js依赖Child.js,须要手动让Child.js先与Parent.js加载
- App.js依赖Parent.js,须要手动让Parent.js先与App.js先加载
- 很难调试，很难知道jsx哪里出了问题
Browserify就是为了解决以上问题而存在的。
【Browserify+Gulp+React(Developement Tasks)】
安装NPM Packages
npm install --save-dev vinyl-source-stream npm install --save-dev browserify npm install --save-dev watchify npm install --save-dev reactify npm install --save-dev gulp-streamify
gulpfule.js
//Tyler using browserify
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');;
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');
var path = {
HTML: 'Tyler/src/index.html'
, MINIFIED_OUT: 'build.min.js'
, OUT: 'build.js'
, DEST: 'Tyler/dist1'
, DEST_BUILD: 'Tyler/dist1/build'
, DEST_SRC: 'Tyler/dist1/src'
, ENTRY_POINT: 'Tyler/src/js/App.js'
};
//Tyler/src/index.html中复制到TylerTyler/dist中
gulp.task('copy', function () {
gulp.src(path.HTML)
.pipe(gulp.dest(path.DEST));
});
//监测
gulp.task('watch', function () {
//监测html文件
gulp.watch(path.HTML, ['copy']);
//watchify配合browserify使用，由于单独使用browserify会每次遍历每一个组件，一旦有变化就会从新生成绑定文件。而有了watchify，会缓存文件，只更新哪些发生改变的文件
var watcher = watchify(browserify({
entries: [path.ENTRY_POINT],//Tyler/src/js/App.js, browserify会检测Tyler/src/js下的全部js文件，以及Tyler/src/js下全部子文件夹下的js文件
transform: [reactify],//使用reactify把jsx转换成js文件
debug: true,//告诉Browersify使用source maps, souce maps帮助咱们在出现错误的时候定位到jsx中的错误行
cache: {},//必须的，browserify告诉咱们这样使用
packageCache: {},//必须的，browserify告诉咱们这样使用
fullPath: true//必须的，browserify告诉咱们这样使用
}));
return watcher.on('update', function(){
watcher.bundle()//把全部的jsx文件绑定到一个文件
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC));
console.log('Updated');
})
.bundle()
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC));
});
//默认的task
gulp.task('default', ['watch']);
运行gulp命令，在Tyler文件夹下多了dist1文件夹。
【Browserify + Gulp + React(Production Tasks)】
在发布到生产环境以前，须要添加以下task
//发布到生产环境以前
gulp.task('build', function () {
browserify({
entries: [path.ENTRY_POINT]
, transform: [reactify]
})
.bundle()
.pipe(source(path.MINIFIED_OUT))
.pipe(streamify(uglify(path.MINIFIED_OUT)))
.pipe(gulp.dest(path.DEST_BUILD));
});
gulp.task('replaceHTML', function () {
gulp.src(path.HTML)
.pipe(htmlreplace({
'js': 'build/' + path.MINIFIED_OUT
}))
.pipe(gulp.dest(path.DEST));
});
gulp.task('production', ['replaceHTML', 'build']);
使用Browserify完整版以下：
//Tyler using browserify
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var htmlreplace = require('gulp-html-replace');;
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');
var path = {
HTML: 'Tyler/src/index.html'
, MINIFIED_OUT: 'build.min.js'
, OUT: 'build.js'
, DEST: 'Tyler/dist1'
, DEST_BUILD: 'Tyler/dist1/build'
, DEST_SRC: 'Tyler/dist1/src'
, ENTRY_POINT: 'Tyler/src/js/App.js'
};
//Tyler/src/index.html中复制到TylerTyler/dist中
gulp.task('copy', function () {
gulp.src(path.HTML)
.pipe(gulp.dest(path.DEST));
});
//监测
gulp.task('watch', function () {
//监测html文件
gulp.watch(path.HTML, ['copy']);
//watchify配合browserify使用，由于单独使用browserify会每次遍历每一个组件，一旦有变化就会从新生成绑定文件。而有了watchify，会缓存文件，只更新哪些发生改变的文件
var watcher = watchify(browserify({
entries: [path.ENTRY_POINT], //Tyler/src/js/App.js, browserify会检测Tyler/src/js下的全部js文件，以及Tyler/src/js下全部子文件夹下的js文件
transform: [reactify], //使用reactify把jsx转换成js文件
debug: true, //告诉Browersify使用source maps, souce maps帮助咱们在出现错误的时候定位到jsx中的错误行
cache: {}, //必须的，browserify告诉咱们这样使用
packageCache: {}, //必须的，browserify告诉咱们这样使用
fullPath: true //必须的，browserify告诉咱们这样使用
}));
return watcher.on('update', function () {
watcher.bundle() //把全部的jsx文件绑定到一个文件
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC));
console.log('Updated');
})
.bundle()
.pipe(source(path.OUT))
.pipe(gulp.dest(path.DEST_SRC));
});
//默认的task
gulp.task('default', ['watch']);
//发布到生产环境以前
gulp.task('build', function () {
browserify({
entries: [path.ENTRY_POINT]
, transform: [reactify]
})
.bundle()
.pipe(source(path.MINIFIED_OUT))
.pipe(streamify(uglify(path.MINIFIED_OUT)))
.pipe(gulp.dest(path.DEST_BUILD));
});
gulp.task('replaceHTML', function () {
gulp.src(path.HTML)
.pipe(htmlreplace({
'js': 'build/' + path.MINIFIED_OUT
}))
.pipe(gulp.dest(path.DEST));
});
gulp.task('production', ['replaceHTML', 'build']);
相关文章
- 1. react-gulp-browserify
- 2. 使用Webpack和Babel来搭建React应用程序
- 3. Gulp和Browserify了解和简单使用
- 4. Webpack、Browserify和Gulp
- 5. React gulp、Browserify、Webpack实例
- 6. 使用create-react-app搭建react应用
- 7. 使用Gulp和Browserify建立多个绑定文件
- 8. 使用Webpack和Gulp构建ReactJS应用
- 9. 使用 create-react-app 构建 react应用程序 （react-scripts）
- 10. 使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境
- 更多相关文章...
- • XML 应用程序 - XML 教程
- • ASP.NET MVC - Internet 应用程序 - ASP.NET 教程
- • 适用于PHP初学者的学习线路和建议
- • TiDB 在摩拜单车在线数据业务的应用和实践
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. vs2019运行opencv图片显示代码时，窗口乱码
- 2. app自动化 - 元素定位不到？别慌，看完你就能解决
- 3. 在Win8下用cisco ××× Client连接时报Reason 422错误的解决方法
- 4. eclipse快速补全代码
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代码的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒发生变种 新文件名将带有“.UIWIX”后缀
- 8. 【原创】Python 源文件编码解读
- 9. iOS9企业部署分发问题深入了解与解决
- 10. 安装pytorch报错CondaHTTPError：******
欢迎关注本站公众号,获取更多信息
相关文章
- 1. react-gulp-browserify
- 2. 使用Webpack和Babel来搭建React应用程序
- 3. Gulp和Browserify了解和简单使用
- 4. Webpack、Browserify和Gulp
- 5. React gulp、Browserify、Webpack实例
- 6. 使用create-react-app搭建react应用
- 7. 使用Gulp和Browserify建立多个绑定文件
- 8. 使用Webpack和Gulp构建ReactJS应用
- 9. 使用 create-react-app 构建 react应用程序 （react-scripts）
- 10. 使用gulp+browserify+babelify-css+babelify构建轻量级react开发环境