/**
* Gulpfile
*
* Usage:
* $ mkdir my-project
* $ cd my-project
* $ npm init
* Create my-project/gulpfile.js and paste the contents of this snippet
* Create my-project/index.js and insert some ES6 Code
* Add devDependencies to my-project/package.json
* $ npm i
* $ gulp build:js
* Result in my-project/dist/index.js
*/
// Import Requirements
const gulp = require('gulp');
const babelify = require('babelify');
const browserify = require('gulp-browserify');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');
// Custom Variables
const dist = './dist';
const customComponents = 'index.js';
/**
* Sub-Task: Build JS
*
* - Compile ES6 -> ES5
* - Create Sourcemaps
* - Minify (with uglify)
*/
// Node Modules
// "devDependencies": {
// "babel-preset-es2015": "^6.24.1",
// "babelify": "^7.3.0",
// "gulp-sourcemaps": "^2.6.5",
// "gulp-uglify": "^3.0.2",
// "gulp-browserify": "^0.5.1"
// }
gulp.task(
'build:js',
() =>
gulp
.src([customComponents])
.pipe(
browserify({
debug: true,
transform: [
babelify.configure({
presets: ['es2015'],
sourceMaps: true
})
]
})
)
.pipe(sourcemaps.init({ loadMaps: true })) // init sourcemaps
.pipe(uglify()) // minify
// .pipe(gzip())
.pipe(sourcemaps.write('.')) // write sourcemaps
.pipe(gulp.dest(dist)) // output
);
package.json Example:
{
"name": "es6toes5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-browserify": "^0.5.1"
}
}
index.js Example (ES6):
class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());
{
"name": "es6toes5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-browserify": "^0.5.1"
}
}
index.js Example (ES6):
class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
setName(name) {
this.name = name;
}
}
let person = new People("Jon Snow");
console.log(person.getName());
person.setName("Dany");
console.log(person.getName());
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.