reactjs


How to use gulp with browserify for React project


After hours googling and trying diffrent things, I'm lost. These tools change very often and independently, so most tutorials are out of date. How can i use react(+flux) and browserify in gulp? When I type gulp browserify nothing happens:
G:\xampp\htdocs\project>gulp browserify
[16:53:04] Using gulpfile G:\xampp\htdocs\project\gulpfile.js
[16:53:04] Starting 'browserify'...
There is my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require("gulp-concat");
var babel = require("gulp-babel");
var jsx = require('gulp-jsx');
var browserSync = require('browser-sync').create();
var sourcemaps = require('gulp-sourcemaps');
var browserify = require('browserify');
var reactify = require('reactify');
var fs = require("fs");
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['app/js/*.js'], // Only need initial file, browserify finds the deps
transform: [reactify], // We want to convert JSX to normal javascript
debug: true, // Gives us sourcemapping
cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle()
.pipe(source('main.js'))
// This is where you add uglifying etc.
.pipe(gulp.dest('app/dist/'));
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('app/dist/'));
});

Related Links

React component function
Reactjs multiple form submit
Dynamic Role Based Routing (React-Router)
Using `“homepage”` in package.json, without messing up paths for localhost
Setting up react and express
vscode react+typescript + mocha: breakpoints not hit
React-Virtualized: Infinitely scrolling list
Reusing Reducer Logic does not toggle object using Redux and React'
How should I organize my application?
Pass params with Link react
npm start sb-admin-reactjs on command prompt
react-router with code splitting, replace() not working
React Router v4 move navbar to separat file
Sinon spy with isomorphic-fetch
Preflight calls from React to a Basic Authentication Enabled SpringBoot app fails with Authentication Denied
ReactJS render called twice with empty State

Categories

HOME
asterisk
excel-formula
ssms
indexing
netty
packet
windows-server-2008
python-requests
phantomjs
reference
stdout
overrides
opengl-es
download
atlassian-fisheye
browserstack
rmarkdown
google-api-oauth
promotions
minimax
apache-httpclient-4.x
captcha
jinja2
greensock
facebook-marketing-api
openam
alert
restructuredtext
fibonacci
expressionengine
android-cursorloader
angular-schema-form
sphinx4
folder
schedule
exacttarget
microstrategy
javax
repeat
iterm2
gem-fury
delphi-xe
php-mongodb
binary-decision-diagram
servicebus
ocamlbuild
yank
text-formatting
htop
seyren
try-catch-finally
networkstream
rowname
hfp
cexception
std
android-contentresolver
database-project
om
pushwoosh
system.diagnostics
radgrid
google-experiments
chunks
sony-xperia
telerik-appbuilder
twitter-finagle
smartxls
mixradio
xcode6.1-gm-seed
lastinsertid
fade
ojb
zend-db-table
pyxplot
simplemembership
reference-manual
ntdll
m3u
wpml
bindinglist
opendir
designated-initializer
scala-designer
html-help-workshop

Resources

Encrypt Message