javascriptbabelify

gulp file babelify task

I'm kind of lost trying to use babelify so I can use in my project ES6. I should use it in the scrips-app part. Can anyone help me? How can I implement it? Because in all the examples I find on the internet, there are different implementations.

gulpfile.js

const config = require('./gulp.config.js')();
const gulp = require('gulp');
const gulpLoadPlugins = require('gulp-load-plugins');
const plugs = gulpLoadPlugins();
const bs = require('browser-sync');
const env = process.env.NODE_ENV || 'local';
const merge = require('merge-stream');
const imagemin = require('gulp-imagemin');
const browserify = require('browserify');
const babelify = require('babelify');
const clean = require('gulp-clean');
const eventStream = require('event-stream');
const optimize = false;


if (env === 'staging' || env === 'production') {

  const optimize = true;
}

/**
 * Compiling jade into html for components.
 */
gulp.task('compile-jade', () => {


  return gulp
    .src(`${config.appFolder }**/*.jade`)
    .pipe(plugs.jade())
    .pipe(plugs.htmlmin())
    .pipe(gulp.dest(config.appFolder));
});


/**
 * Compiling sass into css.
 */
gulp.task('styles-app', () => {

  return gulp
    .src(config.mainscss)
    .pipe(plugs.sass())
    .pipe(plugs.rename(`${config.projectName}.css`))
    .pipe(plugs.if(optimize, plugs.combineMq()))
    .pipe(plugs.if(optimize, plugs.csso()))
    .pipe(plugs.if(optimize, plugs.rev()))
    .pipe(gulp.dest(config.build));
});


/**
 * Concat vendor js files.
 */
gulp.task('scripts-lib', () => {
  const mainBowerFiles = require('main-bower-files');
  return gulp
    .src(mainBowerFiles('**/*.js'))
    //.pipe(plugs.debug())
    .pipe(plugs.concat(`${config.projectName }-lib.js`))
    .pipe(plugs.if(optimize, plugs.uglify()))
    .pipe(plugs.if(optimize, plugs.stripDebug()))
    .pipe(plugs.if(optimize, plugs.rename({
      extname: '.min.js'
    })))
    .pipe(gulp.dest(config.build));
});

gulp.task('scripts-app', ['compile-jade'], () => {

  var scriptsStream = gulp.src(config.appFolder + '**/*.js'),
  templateCacheStream = gulp.src(config.appFolder + '**/*.html')
      .pipe(plugs.angularTemplatecache(config.templateCache.file, config.templateCache.options));
  console.log(plugs.order(config.jsOrder));

  return eventStream.merge(templateCacheStream, scriptsStream)
    .pipe(plugs.order(config.jsOrder))
    .pipe(plugs.concat(`${config.projectName}.js`))
    .pipe(plugs.if(optimize, plugs.uglify()))
    // .pipe(plugs.if(optimize, plugs.stripDebug()))
    // .pipe(plugs.if(optimize, plugs.rename({extname: '.min.js'})))
    .pipe(gulp.dest(config.build));

});

gulp.task('fonts', function () {
  return gulp.src('./src/client/fonts/**/*.{eot,svg,ttf,woff,woff2}')
    .pipe(gulp.dest(`${config.build}/fonts`));
});

gulp.task('images', () =>
  gulp.src('src/client/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest(`${config.build}/images`))
);

gulp.task('clean', function () {
  return gulp.src(`${config.build}`, {read: false})
    .pipe(clean());
});

gulp.task('inject', ['bundle'], () => {

  const series = require('stream-series');
  // It's not necessary to read the files (will speed up things), we're only after their paths:
  const scriptLib = gulp.src([`${config.build}*lib*.js`], {
    read: false
  });
  const styleApp = gulp.src([`${config.build}*.css`, `!${config.build}*lib*.css`], {
    read: false
  });
  const scriptApp = gulp.src([`${config.build}*.js`, `!${config.build}*lib*.js`], {
    read: false
  });
  const seriesStreams = series(scriptLib, styleApp, scriptApp);

  return gulp.src(`${config.build}index.html`)
    .pipe(plugs.inject(seriesStreams, {
      addPrefix: '/static',
      relative: true
    }))
    .pipe(gulp.dest(config.build));
});

gulp.task('bundle', ['watch'], () => {

  return gulp.src(`${config.index}`)
    .pipe(gulp.dest(config.build));
});


gulp.task('default', ['inject', 'build', 'fonts', 'images', 'nodemon', 'watch']);

/**
 * Build!!!!
 */
gulp.task('build', ['styles-app', 'scripts-lib', 'scripts-app']);


gulp.task('watch', ['browser-sync'], () => {

  gulp.watch(config.files.jade, ['scripts-app']).on('change', bs.reload);
  gulp.watch(config.files.js, ['scripts-app']).on('change', bs.reload);
  gulp.watch(config.files.sass, ['styles-app']).on('change', bs.reload);
});

gulp.task('browser-sync', ['nodemon'], function () {
  bs.init(null, {
    proxy: "http://localhost:5000",
    files: ["public/**/*.*"],
    port: 3000
  });
});

gulp.task('nodemon', () => {
  plugs.nodemon({
    script: './src/server/index.js',
    ext: 'js html',
    env: {
      'DEBUG': 'template:server',
      'NODE_ENV': 'development'
    }
  }).on('start', function (cb) {
    if (!started) {
      cb();
      started = true;
    }
  })
    .on('restart', function () {
      console.log('server restarted!')
    })
});


module.exports = gulp;

Babelify task I should add to the gulpfile.js

 gulp.task('babelify', function () {
   return browserify({entries: './app.js', extensions: ['.js'], debug: true})
     .transform(babelify)
    .bundle()
   .pipe(source('bundle.js'))
   .pipe(gulp.dest('dist'));
});

gulp.config.js

'use strict';

module.exports = function() {
  const pkg = require('./package.json');

  const server = './server/';
  const src = './src/';
  const scssfolder = `${src }client/sass/`;
  const mainscss = `${scssfolder }styles.sass`;
  const build = './build/';
  const appFolder = `${src}client/app/`;
  const index = `${src }client/index.html`;

  const config = {
    projectName: pkg.name,
    appFolder,
    app: `${appFolder }app.module.js`,
    scssfolder,
    mainscss,
    angularRootApp: `${appFolder}core/`,
    build,
    index,
    src,
    images: `${src }client/images/`,
    fonts: `${scssfolder }fonts/`,
    vendorfolder: `${src }client/vendor/`,
    templateCache: {
      file: 'app.templates.js',
      options: {
        module: 'hotelsResult',
        moduleSystem: "IIFE"
      }
    },
    jsOrder: ['**/app.module.js', '**/*.module.js', '**/*.js'],
    files: {
      sass: `${src}**/*.sass`,
      js: [`${src}**/*.js`, `!${src}**/*.templates.js`],
      html: `${src}**/*.html`,
      jade: `${src}**/*.jade`

    }
  };

  return config;
};
Solution

  • This is my setup with Babel I use the babel-preset-es2015 package, and use the below task in my gulpfile. Here is a boiler plate gulp setup that may also be helpful https://github.com/markring/gulp_boilerplate . 

    var babel = require('gulp-babel');

gulp.task('scripts', function () {
	console.log('starting scripts task');

	return gulp.src(SCRIPTS_PATH)
		.pipe(plumber(function (err) {
			console.log('Scripts Task Error');
			console.log(err);
			this.emit('end');
		}))
		.pipe(sourcemaps.init())
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(uglify())
		.pipe(concat('scripts.js'))
		.pipe(sourcemaps.write())
		.pipe(gulp.dest(DIST_PATH))
		.pipe(livereload());
});

     "devDependencies": {
    "babel-preset-es2015": "^6.3.13",
    "gulp": "^3.9.0",
    "gulp-babel": "^6.1.1"
  }