Skip to content

Instantly share code, notes, and snippets.

@smajda
Last active September 28, 2016 13:47
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save smajda/2f7f317329da7b69c08a to your computer and use it in GitHub Desktop.
Save smajda/2f7f317329da7b69c08a to your computer and use it in GitHub Desktop.
Example gulpfile using babelify for es6 & jsx with minifify for minification and source maps
/*
* Directory structure:
*
* project/
* package.json
* gulpfile.js
* node_modules/
* src/
* dist/
*
* Builds two files: a vendor file for big dependencies and an app file
* for just your app.
*/
var SRC_DIR = "./src";
var DIST_DIR = "./dist";
var babelify = require('babelify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var vendor_libs = [
'lodash',
'moment',
'react',
'react-router',
];
gulp.task('vendor_js', function() {
var b = browserify({debug: true});
vendor_libs.forEach(function(lib) {
b.require(lib);
});
b.plugin('minifyify', {
map: 'vendor.map',
output: DIST_DIR + '/js/vendor.map'
})
.bundle()
.pipe(source('vendor.min.js'))
.pipe(gulp.dest(DIST_DIR + "/js"));
});
gulp.task('app_js', function() {
var b = browserify({
extensions: ['.js', '.jsx'],
debug: true,
});
// mark vendor_libs as external to not include them in bundle
// so you can safely "require('lodash')" in each file, etc.
vendor_libs.forEach(function(lib) {
b.external(lib);
});
b.transform(babelify)
.plugin('minifyify', {
map: 'app.map',
uglify: {
mangle: false,
compress: {
drop_debugger: false,
drop_console: false,
}
},
output: DIST_DIR + '/js/app.map'
})
.add(SRC_DIR + "/js/app.jsx")
.bundle()
.pipe(source('app.min.js'))
.pipe(gulp.dest(DIST_DIR + "/js"));
});
gulp.task('default', ['vendor_js', 'app_js']);
gulp.task('watch', function() {
gulp.watch(
[SRC_DIR + "/js/*.jsx", SRC_DIR + "/js/*.js"],
['app_js']
);
});
@devmessias
Copy link

Why when put in src file

import React from 'react'

this error return?

_prelude.js:1 Uncaught Error: Cannot find module 'react'

@AlaaAttya
Copy link

AlaaAttya commented Sep 28, 2016

did you run npm install react before building the app?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment