We Keep Coding

Compilation takes more than 15 seconds || Babel - Gulpfile - es6 - rollup bundler

I have got a very long compilation time and I try to figure it out.
The compilation have to work for the SASS and for the javascript es6 files and for the handlebars template.
There are two parts on my web application. The first one is the nodeJs server and the other part is the web application using the nodeJS server.
See there a screenshot from my console
Any thoughts on how to help me on this?
tree :
/index.js
/package.json
/gulpfile.babel.json
/public/
src/
script/*
styles/*
template/*
/dist
package.json
{
"name": "****",
"version": "0.0.0",
"description": *****",
"main": "index.js",
"author": "****",
"private": true,
"dependencies": {
"colors": "^1.1.2",
"express": "4.13.4",
"google-auth-library": "^0.10.0",
"googleapis": "^20.1.0",
"gulp-autoprefixer": "^4.0.0",
"gulp-babel": "^7.0.0",
"handlebars": "^4.0.10",
"mongodb": "^2.2.15",
"nodemailer": "^4.0.1",
"nodemailer-mailgun-transport": "^1.3.5",
"socket.io": "^1.7.1",
"underscore": "^1.8.3",
"uuid": "^3.0.1"
},
"scripts": {
"start": "node index.js"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.22.1",
"babel-plugin-external-helpers": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2015-rollup": "^3.0.0",
"babel-register": "^6.22.0",
"backbone": "^1.3.3",
"backbone-associate": "0.0.13",
"backbone.localstorage": "^1.1.16",
"backbone.marionette": "^3.2.0",
"browser-sync": "^2.18.13",
"gsap": "^1.19.1",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-declare": "^0.3.0",
"gulp-define-module": "^0.1.5",
"gulp-file": "^0.3.0",
"gulp-filter": "^5.0.0",
"gulp-handlebars": "^4.0.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-ruby-sass": "^2.1.1",
"gulp-sourcemaps": "^2.4.0",
"gulp-uglify": "^2.0.1",
"gulp-wrap": "^0.13.0",
"handlebars": "^4.0.10",
"jquery": "^3.1.1",
"merge-stream": "^1.0.1",
"rollup": "^0.41.4",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-json": "^2.1.0",
"rollup-plugin-node-builtins": "^2.0.0",
"rollup-plugin-node-resolve": "^2.0.0",
"run-sequence": "^1.2.2"
},
"babel": {
"presets": [
"es2015"
]
}
}
gulfile.babel.js :
import gulp from 'gulp';
import sass from 'gulp-ruby-sass';
import { rollup } from 'rollup';
import json from 'rollup-plugin-json';
import plumber from 'gulp-plumber';
import file from 'gulp-file';
import filter from 'gulp-filter';
import rename from 'gulp-rename';
import sourcemaps from 'gulp-sourcemaps';
import runSequence from 'run-sequence';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import nodeResolve from 'rollup-plugin-node-resolve';
import builtins from 'rollup-plugin-node-builtins';
import handlebars from 'gulp-handlebars';
import wrap from 'gulp-wrap';
import declare from 'gulp-declare';
import merge from 'merge-stream';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import defineModule from 'gulp-define-module';
import browserSync from 'browser-sync';
import {name} from './package.json';
const srcPath = 'public/src/';
function bundle(opts) { // very long ... (12s)
return rollup({
entry: srcPath + "scripts/" + name + '.js',
plugins: [
json(),
builtins(),
nodeResolve(),
commonjs(),
babel({
// sourceMaps: true,
presets: [['es2015', {modules: false}]],
babelrc: false
})
]
}).then(bundle => {
return _generate(bundle);
}).then(gen => {
gen.code += '\n//# sourceMappingURL=' + gen.map.toUrl();
return gen;
});
}
function _generate(bundle) { // long too (4s)
return bundle.generate({
format: 'iife',
moduleName: 'ATalks',
sourceMap: true
});
}
function compileScripts(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
.pipe(filter(['**', '!**/*.js.map']))
.pipe(rename(name + '.min.js'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath));
});
}
function compileScriptsLight(buildPath) {
return bundle().then(gen => {
return file(name + '.js', gen.code, {src: true})
.pipe(plumber())
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(buildPath))
});
}
gulp.task('sass', function () {
return sass(srcPath+'styles/all.scss')
.on('error', sass.logError)
.pipe(gulp.dest('public/dist/styles'))
.pipe(plumber())
.pipe(browserSync.stream());
});
gulp.task('scripts', function(done) {
return compileScripts('public/dist/');
});
gulp.task('scriptsLight', function(done) {
return compileScriptsLight('public/dist/');
});
gulp.task('templates', function(done){
gulp.src(['public/src/templates/*.hbs'])
.pipe(handlebars({
handlebars: require('handlebars')
}))
.pipe(defineModule('es6', {
require: {
Handlebars: "handlebars/runtime"
}
}))
.pipe(gulp.dest('public/src/templates'));
runSequence('scripts', done);
});
gulp.task('move', function() {
gulp.src([srcPath+"*.html", srcPath+"images/**", srcPath+"fonts/**"], {base: srcPath }).pipe(gulp.dest("public/dist/"));
});
gulp.task('default', function() {
browserSync.init(null, {
proxy: "http://localhost:3000",
files: ["public/dist/**/*.*"],
port: 7000
});
gulp.watch(srcPath+'/**/*.js',['scriptsLight']);
gulp.watch(srcPath+'/**/*.hbs',['templates']);
gulp.watch(srcPath+'/**/*.scss',['sass']);
gulp.watch(srcPath+'*.html',['move']);
gulp.watch(srcPath+'/images/**',['move']);
gulp.watch(srcPath+'/fonts/**',['move']);
});
gulp.task('build', ['templates', 'scripts', 'sass', 'move']);
.babelrc :
{
"presets": ["es2015"]
}

Issue with app build using Gulp and gulp-load-plugins

I have an issue with building of my project. I started to use gulp-load-plugins on my project to speedup Gulp.
Here is my package.json
{
"name": "Project",
"version": "0.0.1",
"description": "Project",
"author": "DOBRO GROUP",
"scripts": {
"watch-frontend": "gulp watch:front",
"watch-backend": "gulp watch:back",
"build": "gulp build"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"browser-sync": "^2.18.13",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^4.0.0",
"gulp-cache": "^0.4.6",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.1",
"gulp-consolidate": "^0.2.0",
"gulp-file-copy": "0.0.1",
"gulp-iconfont": "^9.0.0",
"gulp-iconfont-css": "^2.1.0",
"gulp-imagemin": "^3.3.0",
"gulp-load-plugins": "^1.5.0",
"gulp-plumber": "^1.1.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-uglifyjs": "^0.6.2",
"gulp-watch": "^4.3.11",
"npm-clean": "^1.0.3",
"path": "^0.12.7",
"pump": "^1.0.2",
"run-sequence": "^2.1.0",
"underscore": "^1.8.3"
}
}
This is my gulpfile.js
'use strict';
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')({
pattern: '*'
});
var fsys = require('./settings.json');
function getTask(task) {
return require('./gulp-tasks/' + task)(gulp, plugins);
}
gulp.task('cache', getTask('cache'));
gulp.task('clean', getTask('clean'));
gulp.task('sass:front', getTask('sass-front'));
gulp.task('sass:back', getTask('sass-back'));
gulp.task('browser-sync', getTask('browser-sync'));
gulp.task('js:front', getTask('js-front'));
gulp.task('js:back', getTask('js-back'));
gulp.task('font:gen:front', getTask('font-gen-front'));
gulp.task('font:copy:front', function () {
return gulp.src(fsys.path.frontend.fonts.source + '**/*.*')
.pipe(gulp.dest(fsys.path.frontend.fonts.dest));
});
gulp.task('font:copy:back', function () {
return gulp.src(fsys.path.backend.font.source + '**/*/')
.pipe(gulp.dest(fsys.path.backend.font.dest));
});
gulp.task('img:copy:front', function () {
return gulp.src(fsys.path.frontend.img.source + '**/*')
.pipe(gulp.dest(fsys.path.frontend.img.dest))
});
gulp.task('img:copy:back', function () {
return gulp.src(fsys.path.backend.img.source + '**/*')
.pipe(gulp.dest(fsys.path.backend.img.dest))
});
gulp.task('build', getTask('build'));
At first build it seems there is no any problems. But if I run build task again I get errors like that:
Error: ENOENT: no such file or directory, chmod
'D:\laragon\www\design\public\assets\frontend\fonts\AvantGardeCTT.eot'
at Error (native)
This error occures on file copy tasks. Here is the example of this kind of task:
gulp.task('font:copy:front', function () {
return gulp.src(fsys.path.frontend.fonts.source + '**/*.*')
.pipe(gulp.dest(fsys.path.frontend.fonts.dest));
});
I'm looking throw all google and try to find an answer. But with no result.

ReferencerError: Define is not defined - Browserify

I'm developing a site on React, and I'm trying to generate the bundle with browserify throuhg gulp
This is my gulpfile:
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var babel = require('babelify');
var gulp = require('gulp');
var util = require("gulp-util");
var log = util.log;
var path = require('path');
function compile(watch) {
var bundler = watchify(browserify('./app.js', { debug: true }));
function rebundle() {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/js'));
}
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
}
function watch() {
return compile(true);
}
gulp.task('build', function() { return compile(); });
gulp.task('watch', ['sass:watch'], function() { return watch(); });
gulp.task('default', ['watch']);
It correclty runs the build, and generates the bundle. But after that, when I import to the site I get the error:
ReferenceError: define is not defined
I guess browserify, or the bundle generated is expecting some other package that has the define? What I'm missing?
Here is my package.json:
{
"name": "react-test",
"version": "0.0.1",
"license": "",
"browserify": {
"transform": [
"babelify"
]
},
"dependencies": {
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.4.0",
"redux": "^3.3.1",
"redux-happy-async": "0.0.4",
"redux-thunk": "^1.0.3",
"rest": "^1.3.1"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.5.1",
"babel-core": "^5.8.25",
"babel-loader": "^5.3.2",
"babelify": "^6.1.2",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.1",
"gulp-sass": "^2.2.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-util": "^3.0.7",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"karma": "^0.13.21",
"karma-jasmine": "^0.3.7",
"karma-phantomjs-launcher": "^1.0.0",
"karma-webpack": "^1.7.0",
"phantomjs-prebuilt": "^2.1.4",
"reactify": "^1.1.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"webpack": "^1.12.2",
"webpack-stream": "^3.1.0"
}
}

Using es7 functions with Babel

I would like to include es7 functions in my project to start using fetch await asynchronous way in it.
I'm using gulp, browserify and babelify (7.2.0), reading some docs I saw that the way to say babelify to use es7 functions is including this line to the babelify transform:
optional: ['runtime', 'es7.asyncFunctions']
So that my whole gulp task is as follows:
gulp.task('js',function(){
var bundleStream = browserify({
entries:[config.paths.mainJs],
debug: true,
transform: [babelify.configure({
presets:["es2015","react"],
optional: ['runtime', 'es7.asyncFunctions']
})]
}).transform("browserify-shim")
.bundle()
.on('error',console.error.bind(console))
bundleStream
.pipe(source('compiled.js'))
.pipe(buffer())
// .pipe(uglify())
.pipe(rename('compiled.min.js'))
.pipe(gulp.dest(config.paths.dist + '/js'))
});
Unfortunetely I'm getting the following error running the task:
"Unknown option: base.optional while parsing file:"
Googling a bit I saw that babelify 7.x does use babel 6.0 and apparently this parameter optional does not exist anymore in babel 6.0.
I don't want to downgrade my babelify version to make this work but instead I would like to include es7 functions with the version 7 of babelify, does someone know how to do it?
Any help would be very appreciated as there is no much info about it out there
Just in case, please find also my package.json file:
"dependencies": {
"bootstrap": "^3.3.5",
"history": "^1.13.0",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.4",
"jquery.easing": "^1.3.2",
"moment": "^2.10.2",
"react": "^0.14.3",
"react-bootstrap": "^0.28.1",
"react-dom": "^0.14.3",
"react-router": "^1.0.2",
"reflux": "^0.3.0"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^9.0.8",
"browserify-shim": "^3.8.11",
"gulp": "^3.9.0",
"gulp-concat": "^2.6.0",
"gulp-connect": "^2.2.0",
"gulp-open": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.5.1",
"jest-cli": "^0.8.0",
"reactify": "^1.1.0",
"regenerator": "^0.8.42",
"streamify": "^0.2.5",
"uglify-js": "^2.4.20",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.1.2"
},
"browser": {
"jquery": "src/main/webapp/js/libs/jquery-1.11.1.min.js",
"x": "./vendor/x.js"
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"jquery": "$"
}

optional: ['runtime', 'es7.asyncFunctions']
was how you configure Babel 5. You are using Babel 6, so it would be
plugins: ['transform-runtime', 'transform-async-to-generator']
One thing to note is that configuring Babel via Babelify is not recommended. Instead, it is better to create an .babelrc file in the root of your application with JSON in it, e.g.
{
presets:["es2015","react"],
plugins: ['transform-runtime', 'transform-async-to-generator']
}
and npm install --save-dev babel-plugin-transform-runtime babel-plugin-transform-async-to-generator

bundle.js not found (**not webpack related)

I keep getting a 404 error on my bundle.js file. I have been googling, reading, and trying everything I can for hours to figure it out, but I haven't found a solution to help me. I get the following error in my browser (Chrome)
"Failed to load resource: the server responded with a status of 404
http://localhost:3000/bundle.js (NOT FOUND)"
Here is my gulpfile.babel.js:
import gulp from 'gulp';
import babelify from 'babelify';
import browserify from 'browserify';
import source from 'vinyl-source-stream';
import browserSync from 'browser-sync';
import less from 'gulp-less';
import ghPages from 'gh-pages';
import gutil from 'gulp-util';
import fs from 'fs';
const sync = browserSync.create();
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
gulp.task('json', () => {
gulp.src('src/**/*.json')
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
gulp.task('script', () => {
browserify().transform(babelify.configure({
presets: ["es2015", "react"] }))
.bundle()
.pipe(fs.createWriteStream("bundle.js"))
});
gulp.task('styles', ['fonts'], () => {
gulp.src('src/styles/**/*.{css,less}')
.pipe(less()
.on('error', (error) => {
gutil.log(gutil.colors.red('Error: ' + error.message));
gutil.beep();
}))
.pipe(gulp.dest('dist'))
.pipe(sync.reload({
stream: true
}));
});
// Fonts
gulp.task('fonts', () => {
gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('dist/fonts/'));
});
gulp.task('build', ['html', 'script', 'styles', 'json']);
gulp.task("deploy", ["build"], () => {
ghPages.publish("dist");
});
gulp.task('serve', ['build'], () => {
sync.init({
server: 'dist',
});
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/**/*.json', ['json']);
gulp.watch('src/**/*.{css,less}', ['styles']);
gulp.watch('src/**/*.{js,jsx}', ['script'])
});
gulp.task('default', ['serve']);
My package.json
{
"private": true,
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babelify": "^7.2.0",
"browser-sync": "^2.10.1",
"browserify": "^12.0.1",
"fs": "0.0.2",
"gh-pages": "^0.8.0",
"gulp": "^3.9.0",
"gulp-less": "^3.0.5",
"gulp-util": "^3.0.7",
"react": "^0.14.3",
"vinyl-source-stream": "^1.1.0",
"webpack": "^1.12.9"
},
"dependencies": {
"backbone": "^1.2.3",
"bootstrap": "^3.3.6",
"font-awesome": "^4.5.0",
"jquery": "^2.1.4",
"parse": "^1.6.13",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"underscore": "^1.8.3"
}
}
My index.html has the following at the bottom of the body:
<script type="text/javascript" src="bundle.js"></script>
Also, I have a .babelrc set up with the es2015 and react presets
Thanks in advance for any feedback!
UPDATE SOLVED:
gulp.task('script', () => {
browserify().transform(babelify.configure({
presets: ["es2015", "react"] }))
.bundle()
.pipe(fs.createWriteStream("dist/bundle.js"))
});
Had to add - dist/ - to the last line

Do you have multiple web servers running? For instance on port 3000 and port 80? And if so, is bundle.js placed in the correct web folder?
Could a .htaccess file or similar be blocking access to bundle.js?
If you create a random file (test.html), can you then access it from http://localhost:3000/test.html?