-
-
Save micmania1/3a6f91b256b8f3e7dc97a740d60e20cb to your computer and use it in GitHub Desktop.
| var gulp = require('gulp'); | |
| var source = require('vinyl-source-stream'); | |
| var buffer = require('vinyl-buffer'); | |
| var watch = require('gulp-watch'); | |
| var gutil = require('gulp-util'); | |
| var browserify = require('browserify'); | |
| var babel = require('gulp-babel'); | |
| gulp.task('transform', function() { | |
| return gulp.src('./app/src/**/*.jsx') | |
| .pipe(babel({ | |
| presets: ["react", "es2015"] | |
| })) | |
| .pipe(gulp.dest('./app/dist')); | |
| }) | |
| gulp.task('js', ['transform'], function() { | |
| // Assumes a file has been transformed from | |
| // ./app/src/main.jsx to ./app/dist/main.js | |
| return browserify('./app/dist/main.js') | |
| .bundle() | |
| .on('error', gutil.log) | |
| .pipe(source('main.js')) | |
| .pipe(buffer()) | |
| .pipe(gulp.dest('./')) | |
| }); | |
| gulp.task('default', ['js'], function() { | |
| gulp.watch('./app/**/*.jsx', ['js']); | |
| }); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Hello React!</title> | |
| </head> | |
| <body> | |
| <div id="example"></div> | |
| <script src="/main.js"></script> | |
| </body> | |
| </html> |
| #!/bin/bash | |
| npm install --save-dev babel-preset-es2015 browserify gulp gulp-babel gulp-notify gulp-util gulp-watch react react-dom vinyl-buffer vinyl-source-stream babel-preset-react |
| // ./app/src/main.jsx | |
| import React from 'react'; | |
| import ReactDOM from 'react-dom'; | |
| ReactDOM.render( | |
| <h1>Hello, world!</h1>, | |
| document.getElementById('example') | |
| ); |
can we also see your package.json?
what was the version of the react and gulp for this?
This was for an old side project. I don't remember what for, but you should be able to generate the package.json using the install npm command.
If you're looking to start a react project now you'll be better off using create-react-app which has way better tooling and support. https://github.com/facebook/create-react-app
because if I install using this
npm install --save-dev babel-preset-es2015 browserify gulp gulp-babel gulp-notify gulp-util gulp-watch react react-dom vinyl-buffer vinyl-source-stream babel-preset-react
It will install the latest versions of it. actualy i tried this, some errors popping out. is it because of the versions?
Thanks for replying :)
Thanks for this build, really helpful for my product listing page I'm building. I'm forked a gist with updated to the gulpfile so you can switch dev / production environment.