I am working on a project where I am using gulp. However, gulp keeps throwing an error saying it cannot find the AppAPI.js file in my work environment. I am building with Reactjs and Flux. I believe the problem may be in my gulpfile, but after trying various versions of the code, I have not been able to get anywhere. Could someone take a look and see if indeed my code is wrong or if there could be something else going wrong? Here is my gulpfile:
var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify'); // Converts jsx to js
var source = require('vinyl-source-stream'); // Converts string to a stream
gulp.task('browserify', function(){
browserify('./src/js/main.js')
.transform('reactify')
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('dist/js'));
});
gulp.task('copy', function(){
gulp.src('src/index.html')
.pipe(gulp.dest('dist'));
gulp.src('src/css/*.*')
.pipe(gulp.dest('dist/css'));
gulp.src('src/js/vendors/*.*')
.pipe(gulp.dest('dist/js'));
});
gulp.task('default', ['browserify', 'copy'], function(){
return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});
I am requiring appAPI.js in my main.js file:
var App = require('./components/App');
var React = require('react');
var ReactDOM = require('react-dom');
var AppAPI = require('./utils/appAPI.js');
ReactDOM.render(
<App />,
document.getElementById('app')
);
Here is the appAPI.js code:
var AppActions = require('../actions/AppActions');
module.exports = {
}
Related
This is the gulpfile.js:
var gulp = require('gulp'),
browserify = require('gulp-browserify'),
babel = require('gulp-babel'),
babelify = require("babelify");
gulp.task('js', function () {
gulp.src(config.paths.js.src)
.pipe(browserify({
insertGlobals : true,
debug : true
}))
.pipe(gulp.dest(config.paths.js.dest))
});
In package.json I have added:
"browserify": {
"transform": [["babelify", { "presets": ["react"] }]]
}
And this is the file with react:
ReactDOM.render(
<Overlay message="TEST" />,
document.getElementById('content')
);
finally, the error is:
components/main-component.js:15
<div class="overlay">
^
ParseError: Unexpected token
at wrapWithPluginError (/home/novak/Documents/myProjects/OpenWorld/node_modules/gulp-browserify/index.js:44:1
Note: I am not using ES2015, just normal js.
I have tried a lot of things to put into the gulp task, but it always gives me some error. Could anybody advise me how to make this work please?
Some more sources:
main-component.js:
var React = require('react');
var ReactDOM = require('react-dom');
var Print = require('./main-template');
var Overlay = React.createClass({
getInitialState: function() {
return { show: false };
},
render: function() {
if (!this.state.show) {
return;
}
return(
<div class="overlay">
<div class="content">
<Print message="{this.props.message}"/>
</div>
</div>
);
}
});
ReactDOM.render(
<Overlay message="TEST" />,
document.getElementById('game-content')
);
module.exports = Overlay;
You need to convert .jsx to .js since Browser don't know the JSX. So you need to transform it before.
Steps to covert jsx to js:
Make sure that you have installed
gulp-babel
babel-plugin-transform-react-jsx
by
npm install gulp-babel babel-plugin-transform-react-jsx
Then in your gulp file
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task("babel", function(){
return gulp.src("src to jsx/*.jsx").
pipe(babel({
plugins: ['transform-react-jsx']
})).
pipe(gulp.dest("src to js/*.js"));
});
I don't know if I missed something or made a mistake. But requiring a module only returns an empty object.
This is just a sample of my project.
Tools I'm using:
gulp - 3.9.1
browserify - 13.0.0
vinyl-source-stream - 1.1.0
Here is my working directory:
root/
dist/
src/
external.js
main.js
gulpfile.js
main.js
var External = require('./external.js');
console.log(External);
external.js
function Hello() {
return 'Hello from the otherside!';
}
module.exports = {
testFunc: Hello
};
gulpfile.js
var browserify = require('browserify');
var vinyl_source_stream = require('vinyl-source-stream');
gulp.task('concat', function() {
return browserify('./src/main.js')
.bundle()
.pipe(vinyl_source_stream('bundle.js'))
.pipe(gulp.dest('./dist/'))
});
First:
module.exports = function() {
testFunc: Hello
};
so that you can export an object prototype.
Second
var External = require('./external.js')(); // Notice the ()
so that you can execute that prototype and get an instance of the object.
I'm trying to create a gulp task with browserify and babelify. Here is the task:
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
gulp.task('js', function () {
browserify('./resources/js/*.js')
.transform(babelify)
.bundle()
.pipe(source('*.js'))
.pipe(gulp.dest('./public/js'));
});
I found a few sample code, tried to use them, but the result was always the same.
When i run the task, and save my example.js file, the following error occurs:
TypeError: browserify(...).transform is not a function
What am I doing wrong?
You're mixing up the API for browserify and gulp-browserify.
From the gulp-browserify docs, you'll want to do something like this:
var gulp = require('gulp')
var browserify = require('gulp-browserify')
gulp.task('js', function () {
gulp.src('./resources/js/*.js')
.pipe(browserify({
transform: ['babelify'],
}))
.pipe(gulp.dest('./public/js'))
});
EDIT: Since this question was first answered, gulp-browserify has been abandoned and gulp has evolved a great deal. If you'd like to achieve the same thing with a newer version of gulp, you can follow the guides provided by the gulp team.
You'll end up with something like the following:
var browserify = require('browserify');
var babelify = require('babelify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var util = require('gulp-util');
gulp.task('default', function () {
var b = browserify({
entries: './resources/test.js',
debug: true,
transform: [babelify.configure({
presets: ['es2015']
})]
});
return b.bundle()
.pipe(source('./resources/test.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
// Add other gulp transformations (eg. uglify) to the pipeline here.
.on('error', util.log)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./public/js/'));
});
I'm following a tutorial on Reactjs and we're using a Gulpfile to update the dependancies and build a single javascript file using browserify.
For some reason there is no update whenever I change a line in a file..
This is my code.
var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
gulp.task('default', function() {
var bundler = watchify(browserify({
entries: ['./src/app.jsx'],
transform: [reactify],
extensions: ['.jsx'],
debug: true
}));
function build(file) {
if (file) gutil.log('Recompiling ' + file);
return bundler
.bundle()
.on('error', gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source('main.js'))
.pipe(gulp.dest('./'));
};
build();
bundler.on('update', build);
});
This is my folder structure
Watchify may have issues to detect the changes on certain filesystem setups and virtualization.
See https://github.com/substack/watchify/issues/120
try Watchify 3.0.0 as it seems to use a polling for NFS
I'm setting up a Backbone project with Browserify & Gulp and can't seem to figure out how to require Underscore templates (not Handlebars) in my modules. The closest I've come is using "node-underscorify" (at least seeing something and no errors), but it's not quite right..
gulpfile.js
var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var uglify = require('gulp-uglify');
var gulpif = require('gulp-if');
var sass = require('gulp-sass');
var env = process.env.NODE_ENV || 'dev';
gulp.task( 'js', function() {
var bundler = browserify({
entries: ['./dev/js/app.js'],
paths: ['./templates/'],
transform: ['node-underscorify']
});
return bundler
.bundle()
.pipe( source( 'bundle.js') )
.pipe( buffer() )
.pipe( gulpif( env === 'prod', uglify() ) )
.pipe( gulp.dest( './js/' ) );
});
home.html
<h3>Hello <%= name %></h3>
HomeView.js (compiled from CoffeeScript via a separate Gulp task)
(function() {
var $, Backbone, _;
$ = require('jquery');
_ = require('underscore');
Backbone = require('backbone');
Backbone.$ = $;
module.exports = Backbone.View.extend({
template: require('home.html'),
el: '#content',
initialize: function() {
console.log("home initialize");
this.render();
},
render: function() {
this.$el.html(this.template({
name: 'Gulp!'
}));
return this;
}
});
}).call(this);
When I run the app and it hits HomeView, the browser displays what looks like raw JS of the module, including the uncompiled template (?)
module.exports = function(obj){ var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');}; with(obj||{}){ __p+='
Hello '+ ((__t=( name ))==null?'':__t)+ '
\n\n'; } return __p; };
I tried applying the Underscore template function to the required file but that produces a JS error..
template: _.template( require('home.html') ),
Spent multiple hours perusing various blog posts, trying different solutions -- any help is much appreciated!
I was having the same problem. I finally got this working by building off of the example gulp recipe, but per Ben's comment, I explicitly call transform() on underscorify, instead of using the transform array.
I also choose to rename the bundled file along the way and output it in the same directory as the source.
Here's what my final working code looks like:
gulpfile.js
gulp = require("gulp");
browserify = require("browserify");
watchify = require("watchify");
underscorify = require("node-underscorify");
rename = require("gulp-rename");
source = require("vinyl-source-stream");
gutil = require("gulp-util");
mainBundler = watchify(browserify("./js/main.js"));
mainBundler.transform(underscorify.transform());
gulp.task("watchify-main", bundleMain);
mainBundler.on("update", bundleMain);
mainBundler.on("log", gutil.log);
function bundleMain() {
return mainBundler.bundle()
.on("error", gutil.log.bind(gutil, 'Browserify Error'))
.pipe(source(".js/main.js"))
.pipe(rename("main-bundle.js"))
.pipe(gulp.dest("./js/"));
};
home.html
<h3>Hello <%= name %></h3>
main.js
template = require("./templates/home.html");
module.exports = Backbone.View.extend({
template : template,
el: "#content",
initialize: function() {
// initialize code
},
render: function() {
// render code
}
});