Last active
May 2, 2023 12:46
-
-
Save SigurdMW/13847ee74f041279f81dfe2038893675 to your computer and use it in GitHub Desktop.
gulp setup with browserify and babelify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// npm install --save-dev gulp babelify browserify babel-preset-es2015 gulp-connect vinyl-source-stream vinyl-buffer gulp-uglify gulp-sourcemaps | |
/* | |
folder structure: | |
build | |
src/js/index.js | |
static/index.html | |
package.json | |
gulpfile.js | |
*/ | |
// Gulpfile.js: | |
//Include required modules | |
var gulp = require("gulp"), | |
babelify = require('babelify'), | |
browserify = require("browserify"), | |
connect = require("gulp-connect"), | |
source = require("vinyl-source-stream"), | |
buffer = require("vinyl-buffer"), | |
uglify = require("gulp-uglify"), | |
sourcemaps = require("gulp-sourcemaps"); | |
//Default task. This will be run when no task is passed in arguments to gulp | |
gulp.task("default",["copyStaticFiles", "build", "startServer"]); | |
//Copy static files from html folder to build folder | |
gulp.task("copyStaticFiles", function(){ | |
return gulp.src("./static/*.*") | |
.pipe(gulp.dest("./build")); | |
}); | |
//Convert ES6 ode in all js files in src/js folder and copy to | |
//build folder as bundle.js | |
gulp.task("build", function(){ | |
return browserify({ | |
entries: ["./src/js/index.js"] | |
}) | |
.transform(babelify.configure({ | |
presets : ["es2015"] | |
})) | |
.bundle() | |
.pipe(source("bundle.js")) | |
.pipe(buffer()) | |
.pipe(sourcemaps.init()) | |
.pipe(uglify()) | |
.pipe(sourcemaps.write('./maps')) | |
.pipe(gulp.dest("./build")); | |
}); | |
// start by typing gulp start | |
gulp.task("start", function(){ | |
gulp.start("copyStaticFiles", "build", "startServer") | |
}); | |
//Start a test server with doc root at build folder and | |
//listening to 8888 port. Home page = http://localhost:8888 | |
gulp.task("startServer", function(){ | |
connect.server({ | |
root : "./build", | |
livereload : true, | |
port : 8888 | |
}); | |
}); |
The line #39, presets : ["es2015"]
should be replaced by presets : ["@babel/preset-es2015"]
in order to work now. 👍
According to your link, isn't @babel/preset-env
the correct replacement?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
when I was doing as pasted below, es6 is not converted to javascript
gulp.task('default', function () {
// var uglifyFlag = util.env.envName === 'production';
var uglifyFlag = true;
return gulp.src([
'./app/scripts/index.js'
])
.pipe(sourcemaps.init())
// .pipe(babel())
.pipe(concat('app.bundle.js'))
.pipe(babel())
.pipe(gulpif(uglifyFlag, uglify({mangle: true})))
.pipe(gulpif(uglifyFlag, sourcemaps.write()))
.pipe(gulp.dest('./target/dest/js/'));
});