<h2 dir="auto">Bug Report</h2>
<p dir="auto"><strong>Current Behavior</strong><br>
I am trying to use Babelify to compile my react app.js file in order to minify it for better efficiency on the web.</p>
<p dir="auto">I am trying to set my preset to @babel/preset-react in my package.json and my gulp.js file but I get an error.</p>
<h2 dir="auto"><strong>1.</strong></h2>
<p dir="auto">This happens with @babel/preset-react<br>
"SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'"</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/15719274/61896398-e6d3e880-aee2-11e9-8120-e03971b8ce4f.png"><img width="1500" alt="Screen Shot 2019-07-25 at 1 01 12 PM" src="https://user-images.githubusercontent.com/15719274/61896398-e6d3e880-aee2-11e9-8120-e03971b8ce4f.png" style="max-width: 100%;"></a></p>
<hr>
<h2 dir="auto"><strong>2.</strong></h2>
<p dir="auto">This happens with @babel/preset-env</p>
<p dir="auto">"SyntaxError: /src/app.js: Unexpected token (17:4) </p><div dir="auto"> "<p dir="auto"></p>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/15719274/61896448-023ef380-aee3-11e9-98f6-20d8c55c8882.png"><img width="1505" alt="Screen Shot 2019-07-25 at 1 00 38 PM" src="https://user-images.githubusercontent.com/15719274/61896448-023ef380-aee3-11e9-98f6-20d8c55c8882.png" style="max-width: 100%;"></a>
<p dir="auto"><strong>gulp.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// require searches in the node modules folder,
//the exact require string comes from the package.json file
//the convention is identical for specifying by exact same name from package.json file
var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
//creating an instance of browserSync is required
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;



// var htmlWatch = './index.html'
// watches all .html files vs just single file before
var htmlWatch = '**/*.html';
//watch php files


// locaiton of the src file or src of the css file
// remove ./ from source to allow gulp watch to watch new added files
var styleSRC = 'src/Assets/scss/style.scss';
// styleDIST is the whole folder adding the / at the end of string into the distribution folder (dist)
var styleDIST = './public/css/';
// watch variables
// doube star means every folder in subdirectory
//*.scss every file with that extension
var styleWatch  = 'src/Assets/scss/**/*.scss';



// watches over all js files for changes
var jsWatch = 'src/**/*.js';
// javascript source file
var jsSRC = 'app.js';
//javascript source folder
var jsFolder = 'src/';

//javascript distribution folder
var jsDIST = './public/js/';
//array of all the files we want to check
var jsFILES = [jsSRC];





gulp.task('browser-sync', function(){

    browserSync.init({

      // do not open page automatically
      open: false,
      // everytime there is a change inject changes to localhost
      injectChanges: true,

      server: {
        baseDir: &quot;./&quot;
      }
      // reflects local URL
      // this is used for certificate files
      //
      // https:{
      //  key:'/Users/alecaddd/.valet/certificates/gulp.dev.key'
      //  cert:'/Users/alecaddd/.valet/Certificates/gulp.dev.crt'
      // }
    });

});


// https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async
//task functions dont work without async, gulp does not support synchronous functions
gulp.task('style',async function(){

  //compile
  //pipe is one command after another,

  gulp.src( styleSRC )
    //sourcemaps is the first function for style
    //
    .pipe(sourcemaps.init())

    //call sass right after the styleSRC(style.css) is called; automatically takes care of converting scss into regular css
    .pipe(sass({
      //specifics mentioned here
      //if there is an error log it to the console
        errorLogToConsole:true,
        outputStyle:'compressed'
    }))
    //on an error log it to the console
    .on('error',console.error.bind(console))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    // in order for rename to work we must import 'gulp-rename'
    // rename completely or we can also add suffix
    .pipe( rename({suffix: '.min'}))
    //writing the sourcemap before saves into dest
    .pipe(sourcemaps.write('./'))
    // save the file into the styleDIST directory, with the min suffix file
    .pipe( gulp.dest( styleDIST))
    // export data into browserSync
    .pipe(browserSync.stream());

});


gulp.task('js', async function(){

  // map function loops through all items in array
  //every time map iterates, entry will be the indexed file
  jsFILES.map(function(entry){
    // 1. browserify
    // handles that modules, imports modules combines them, without dependency of external files
    return browserify({
      // specifically add jsFolder to concatinate
      //entry only has script.js
      //we dont want the js src folder to get duplicated, so we only process the entry = &quot;script.js&quot;
      entries: [jsFolder + entry]
    })
    //2. babilify
    // turns js into regular vanilla js readible by the browswer
    // lots of different versions, default enviornmental version
    // transforms all entries
    .transform(babelify, {presets:['@babel/preset-env']})

    // 3. bundle everything inside one single files
    // bundle is default of gulp
    .bundle()


    // 4. tap the source
    // source method to see if the entry is still piped, grab the entry after the bundling
    // this is to keep track of the entry
    .pipe( source(entry) )

    // 5. rename .min
    // rename with extension
    .pipe( rename({extname: '.min.js'}))
    // 6. buffer the file

    .pipe( buffer() )

    // 7. innit sourcemap
    // load existing maps all into one package together
    .pipe (sourcemaps.init({loadMaps:true}))
    // 8. uglify
    // identical to minifying entire file
    .pipe( uglify())
    // 9. write sourcemaps
    .pipe(sourcemaps.write('./'))

    // distribute
    .pipe(gulp.dest(jsDIST))

    // export data into browserSync
    .pipe(browserSync.stream());
  });


});

// default task, array of concatinated tasks
gulp.task('default', ['style','js']);

// activate default and then browser-sync tasks
gulp.task('watch',['default', 'browser-sync'], function(){
  //after the trigger of the first watch
  //trigger the gulp watch method which keeps it up and running, triggers itself whenever there is an update
  //whenever there is a change, trigger the task
  // no reload on style task because style changes will get injected inside the style task itself with browserify stream
  gulp.watch(styleWatch, ['style']);
  gulp.watch(jsWatch, ['js', reload]);
  gulp.watch(htmlWatch, [reload]);
  gulp.watch(phpWatch, [reload]);

  // sometimes u dont want to reload when u are filling out a form etc.


})
"><pre class="notranslate"><span class="pl-c">// require searches in the node modules folder,</span>
<span class="pl-c">//the exact require string comes from the package.json file</span>
<span class="pl-c">//the convention is identical for specifying by exact same name from package.json file</span>
<span class="pl-k">var</span> <span class="pl-s1">gulp</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">rename</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp-rename'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">sass</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp-sass'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">uglify</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp-uglify'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">autoprefixer</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp-autoprefixer'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">sourcemaps</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'gulp-sourcemaps'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">browserify</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'browserify'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">babelify</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'babelify'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">source</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'vinyl-source-stream'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">buffer</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'vinyl-buffer'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">//creating an instance of browserSync is required</span>
<span class="pl-k">var</span> <span class="pl-s1">browserSync</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'browser-sync'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">var</span> <span class="pl-s1">reload</span> <span class="pl-c1">=</span> <span class="pl-s1">browserSync</span><span class="pl-kos">.</span><span class="pl-c1">reload</span><span class="pl-kos">;</span>



<span class="pl-c">// var htmlWatch = './index.html'</span>
<span class="pl-c">// watches all .html files vs just single file before</span>
<span class="pl-k">var</span> <span class="pl-s1">htmlWatch</span> <span class="pl-c1">=</span> <span class="pl-s">'**/*.html'</span><span class="pl-kos">;</span>
<span class="pl-c">//watch php files</span>


<span class="pl-c">// locaiton of the src file or src of the css file</span>
<span class="pl-c">// remove ./ from source to allow gulp watch to watch new added files</span>
<span class="pl-k">var</span> <span class="pl-s1">styleSRC</span> <span class="pl-c1">=</span> <span class="pl-s">'src/Assets/scss/style.scss'</span><span class="pl-kos">;</span>
<span class="pl-c">// styleDIST is the whole folder adding the / at the end of string into the distribution folder (dist)</span>
<span class="pl-k">var</span> <span class="pl-s1">styleDIST</span> <span class="pl-c1">=</span> <span class="pl-s">'./public/css/'</span><span class="pl-kos">;</span>
<span class="pl-c">// watch variables</span>
<span class="pl-c">// doube star means every folder in subdirectory</span>
<span class="pl-c">//*.scss every file with that extension</span>
<span class="pl-k">var</span> <span class="pl-s1">styleWatch</span>  <span class="pl-c1">=</span> <span class="pl-s">'src/Assets/scss/**/*.scss'</span><span class="pl-kos">;</span>



<span class="pl-c">// watches over all js files for changes</span>
<span class="pl-k">var</span> <span class="pl-s1">jsWatch</span> <span class="pl-c1">=</span> <span class="pl-s">'src/**/*.js'</span><span class="pl-kos">;</span>
<span class="pl-c">// javascript source file</span>
<span class="pl-k">var</span> <span class="pl-s1">jsSRC</span> <span class="pl-c1">=</span> <span class="pl-s">'app.js'</span><span class="pl-kos">;</span>
<span class="pl-c">//javascript source folder</span>
<span class="pl-k">var</span> <span class="pl-s1">jsFolder</span> <span class="pl-c1">=</span> <span class="pl-s">'src/'</span><span class="pl-kos">;</span>

<span class="pl-c">//javascript distribution folder</span>
<span class="pl-k">var</span> <span class="pl-s1">jsDIST</span> <span class="pl-c1">=</span> <span class="pl-s">'./public/js/'</span><span class="pl-kos">;</span>
<span class="pl-c">//array of all the files we want to check</span>
<span class="pl-k">var</span> <span class="pl-s1">jsFILES</span> <span class="pl-c1">=</span> <span class="pl-kos">[</span><span class="pl-s1">jsSRC</span><span class="pl-kos">]</span><span class="pl-kos">;</span>





<span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">task</span><span class="pl-kos">(</span><span class="pl-s">'browser-sync'</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>

    <span class="pl-s1">browserSync</span><span class="pl-kos">.</span><span class="pl-en">init</span><span class="pl-kos">(</span><span class="pl-kos">{</span>

      <span class="pl-c">// do not open page automatically</span>
      <span class="pl-c1">open</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
      <span class="pl-c">// everytime there is a change inject changes to localhost</span>
      <span class="pl-c1">injectChanges</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>

      <span class="pl-c1">server</span>: <span class="pl-kos">{</span>
        <span class="pl-c1">baseDir</span>: <span class="pl-s">"./"</span>
      <span class="pl-kos">}</span>
      <span class="pl-c">// reflects local URL</span>
      <span class="pl-c">// this is used for certificate files</span>
      <span class="pl-c">//</span>
      <span class="pl-c">// https:{</span>
      <span class="pl-c">//  key:'/Users/alecaddd/.valet/certificates/gulp.dev.key'</span>
      <span class="pl-c">//  cert:'/Users/alecaddd/.valet/Certificates/gulp.dev.crt'</span>
      <span class="pl-c">// }</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


<span class="pl-c">// https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async</span>
<span class="pl-c">//task functions dont work without async, gulp does not support synchronous functions</span>
<span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">task</span><span class="pl-kos">(</span><span class="pl-s">'style'</span><span class="pl-kos">,</span><span class="pl-k">async</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>

  <span class="pl-c">//compile</span>
  <span class="pl-c">//pipe is one command after another,</span>

  <span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">src</span><span class="pl-kos">(</span> <span class="pl-s1">styleSRC</span> <span class="pl-kos">)</span>
    <span class="pl-c">//sourcemaps is the first function for style</span>
    <span class="pl-c">//</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">sourcemaps</span><span class="pl-kos">.</span><span class="pl-en">init</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>

    <span class="pl-c">//call sass right after the styleSRC(style.css) is called; automatically takes care of converting scss into regular css</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">sass</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c">//specifics mentioned here</span>
      <span class="pl-c">//if there is an error log it to the console</span>
        <span class="pl-c1">errorLogToConsole</span>:<span class="pl-c1">true</span><span class="pl-kos">,</span>
        <span class="pl-c1">outputStyle</span>:<span class="pl-s">'compressed'</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">//on an error log it to the console</span>
    <span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'error'</span><span class="pl-kos">,</span><span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-c1">error</span><span class="pl-kos">.</span><span class="pl-en">bind</span><span class="pl-kos">(</span><span class="pl-smi">console</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">autoprefixer</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">browsers</span>: <span class="pl-kos">[</span><span class="pl-s">'last 2 versions'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
      <span class="pl-c1">cascade</span>: <span class="pl-c1">false</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">// in order for rename to work we must import 'gulp-rename'</span>
    <span class="pl-c">// rename completely or we can also add suffix</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span> <span class="pl-s1">rename</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">suffix</span>: <span class="pl-s">'.min'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">//writing the sourcemap before saves into dest</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">sourcemaps</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s">'./'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">// save the file into the styleDIST directory, with the min suffix file</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span> <span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">dest</span><span class="pl-kos">(</span> <span class="pl-s1">styleDIST</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">// export data into browserSync</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">browserSync</span><span class="pl-kos">.</span><span class="pl-en">stream</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


<span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">task</span><span class="pl-kos">(</span><span class="pl-s">'js'</span><span class="pl-kos">,</span> <span class="pl-k">async</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>

  <span class="pl-c">// map function loops through all items in array</span>
  <span class="pl-c">//every time map iterates, entry will be the indexed file</span>
  <span class="pl-s1">jsFILES</span><span class="pl-kos">.</span><span class="pl-en">map</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">entry</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
    <span class="pl-c">// 1. browserify</span>
    <span class="pl-c">// handles that modules, imports modules combines them, without dependency of external files</span>
    <span class="pl-k">return</span> <span class="pl-s1">browserify</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c">// specifically add jsFolder to concatinate</span>
      <span class="pl-c">//entry only has script.js</span>
      <span class="pl-c">//we dont want the js src folder to get duplicated, so we only process the entry = "script.js"</span>
      <span class="pl-c1">entries</span>: <span class="pl-kos">[</span><span class="pl-s1">jsFolder</span> <span class="pl-c1">+</span> <span class="pl-s1">entry</span><span class="pl-kos">]</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
    <span class="pl-c">//2. babilify</span>
    <span class="pl-c">// turns js into regular vanilla js readible by the browswer</span>
    <span class="pl-c">// lots of different versions, default enviornmental version</span>
    <span class="pl-c">// transforms all entries</span>
    <span class="pl-kos">.</span><span class="pl-en">transform</span><span class="pl-kos">(</span><span class="pl-s1">babelify</span><span class="pl-kos">,</span> <span class="pl-kos">{</span><span class="pl-c1">presets</span>:<span class="pl-kos">[</span><span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">]</span><span class="pl-kos">}</span><span class="pl-kos">)</span>

    <span class="pl-c">// 3. bundle everything inside one single files</span>
    <span class="pl-c">// bundle is default of gulp</span>
    <span class="pl-kos">.</span><span class="pl-en">bundle</span><span class="pl-kos">(</span><span class="pl-kos">)</span>


    <span class="pl-c">// 4. tap the source</span>
    <span class="pl-c">// source method to see if the entry is still piped, grab the entry after the bundling</span>
    <span class="pl-c">// this is to keep track of the entry</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span> <span class="pl-s1">source</span><span class="pl-kos">(</span><span class="pl-s1">entry</span><span class="pl-kos">)</span> <span class="pl-kos">)</span>

    <span class="pl-c">// 5. rename .min</span>
    <span class="pl-c">// rename with extension</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span> <span class="pl-s1">rename</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">extname</span>: <span class="pl-s">'.min.js'</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">// 6. buffer the file</span>

    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span> <span class="pl-s1">buffer</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">)</span>

    <span class="pl-c">// 7. innit sourcemap</span>
    <span class="pl-c">// load existing maps all into one package together</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span> <span class="pl-kos">(</span><span class="pl-s1">sourcemaps</span><span class="pl-kos">.</span><span class="pl-en">init</span><span class="pl-kos">(</span><span class="pl-kos">{</span><span class="pl-c1">loadMaps</span>:<span class="pl-c1">true</span><span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">// 8. uglify</span>
    <span class="pl-c">// identical to minifying entire file</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span> <span class="pl-s1">uglify</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
    <span class="pl-c">// 9. write sourcemaps</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">sourcemaps</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s">'./'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>

    <span class="pl-c">// distribute</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">dest</span><span class="pl-kos">(</span><span class="pl-s1">jsDIST</span><span class="pl-kos">)</span><span class="pl-kos">)</span>

    <span class="pl-c">// export data into browserSync</span>
    <span class="pl-kos">.</span><span class="pl-en">pipe</span><span class="pl-kos">(</span><span class="pl-s1">browserSync</span><span class="pl-kos">.</span><span class="pl-en">stream</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>


<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// default task, array of concatinated tasks</span>
<span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">task</span><span class="pl-kos">(</span><span class="pl-s">'default'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'style'</span><span class="pl-kos">,</span><span class="pl-s">'js'</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// activate default and then browser-sync tasks</span>
<span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">task</span><span class="pl-kos">(</span><span class="pl-s">'watch'</span><span class="pl-kos">,</span><span class="pl-kos">[</span><span class="pl-s">'default'</span><span class="pl-kos">,</span> <span class="pl-s">'browser-sync'</span><span class="pl-kos">]</span><span class="pl-kos">,</span> <span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">{</span>
  <span class="pl-c">//after the trigger of the first watch</span>
  <span class="pl-c">//trigger the gulp watch method which keeps it up and running, triggers itself whenever there is an update</span>
  <span class="pl-c">//whenever there is a change, trigger the task</span>
  <span class="pl-c">// no reload on style task because style changes will get injected inside the style task itself with browserify stream</span>
  <span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">watch</span><span class="pl-kos">(</span><span class="pl-s1">styleWatch</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'style'</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">watch</span><span class="pl-kos">(</span><span class="pl-s1">jsWatch</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s">'js'</span><span class="pl-kos">,</span> <span class="pl-s1">reload</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">watch</span><span class="pl-kos">(</span><span class="pl-s1">htmlWatch</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">reload</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-s1">gulp</span><span class="pl-kos">.</span><span class="pl-en">watch</span><span class="pl-kos">(</span><span class="pl-s1">phpWatch</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">reload</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">// sometimes u dont want to reload when u are filling out a form etc.</span>


<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><strong>package.json</strong></p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;my-app&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;babel-core&quot;: &quot;^6.26.3&quot;,
    &quot;react&quot;: &quot;^16.8.6&quot;,
    &quot;react-dom&quot;: &quot;^16.8.6&quot;,
    &quot;react-iframe&quot;: &quot;^1.8.0&quot;,
    &quot;react-scripts&quot;: &quot;3.0.1&quot;,
    &quot;reactify&quot;: &quot;^1.1.1&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;react-scripts start&quot;,
    &quot;build&quot;: &quot;react-scripts build&quot;,
    &quot;test&quot;: &quot;react-scripts test&quot;,
    &quot;eject&quot;: &quot;react-scripts eject&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;extends&quot;: &quot;react-app&quot;
  },
  &quot;browserslist&quot;: {
    &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
    ]
  },
  &quot;devDependencies&quot;: {
    &quot;@babel/preset-env&quot;: &quot;^7.5.5&quot;,
    &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
    &quot;babelify&quot;: &quot;^10.0.0&quot;,
    &quot;browser-sync&quot;: &quot;^2.26.7&quot;,
    &quot;browserify&quot;: &quot;^16.3.0&quot;,
    &quot;gulp&quot;: &quot;^3.9.1&quot;,
    &quot;gulp-autoprefixer&quot;: &quot;^6.1.0&quot;,
    &quot;gulp-rename&quot;: &quot;^1.4.0&quot;,
    &quot;gulp-sass&quot;: &quot;^4.0.2&quot;,
    &quot;gulp-sourcemaps&quot;: &quot;^2.6.5&quot;,
    &quot;gulp-uglify&quot;: &quot;^3.0.2&quot;,
    &quot;vinyl-buffer&quot;: &quot;^1.0.1&quot;,
    &quot;vinyl-source-stream&quot;: &quot;^2.0.0&quot;
  },
  &quot;babel&quot;: {
    &quot;presets&quot;: [
      &quot;@babel/preset-env&quot;
    ]
  }
}

"><pre class="notranslate">{
  <span class="pl-ent">"name"</span>: <span class="pl-s"><span class="pl-pds">"</span>my-app<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"version"</span>: <span class="pl-s"><span class="pl-pds">"</span>0.1.0<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"private"</span>: <span class="pl-c1">true</span>,
  <span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"babel-core"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.26.3<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.8.6<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-dom"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.8.6<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-iframe"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.8.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"react-scripts"</span>: <span class="pl-s"><span class="pl-pds">"</span>3.0.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"reactify"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.1.1<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"scripts"</span>: {
    <span class="pl-ent">"start"</span>: <span class="pl-s"><span class="pl-pds">"</span>react-scripts start<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"build"</span>: <span class="pl-s"><span class="pl-pds">"</span>react-scripts build<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"test"</span>: <span class="pl-s"><span class="pl-pds">"</span>react-scripts test<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"eject"</span>: <span class="pl-s"><span class="pl-pds">"</span>react-scripts eject<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"eslintConfig"</span>: {
    <span class="pl-ent">"extends"</span>: <span class="pl-s"><span class="pl-pds">"</span>react-app<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"browserslist"</span>: {
    <span class="pl-ent">"production"</span>: [
      <span class="pl-s"><span class="pl-pds">"</span>&gt;0.2%<span class="pl-pds">"</span></span>,
      <span class="pl-s"><span class="pl-pds">"</span>not dead<span class="pl-pds">"</span></span>,
      <span class="pl-s"><span class="pl-pds">"</span>not op_mini all<span class="pl-pds">"</span></span>
    ],
    <span class="pl-ent">"development"</span>: [
      <span class="pl-s"><span class="pl-pds">"</span>last 1 chrome version<span class="pl-pds">"</span></span>,
      <span class="pl-s"><span class="pl-pds">"</span>last 1 firefox version<span class="pl-pds">"</span></span>,
      <span class="pl-s"><span class="pl-pds">"</span>last 1 safari version<span class="pl-pds">"</span></span>
    ]
  },
  <span class="pl-ent">"devDependencies"</span>: {
    <span class="pl-ent">"@babel/preset-env"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.5.5<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@babel/preset-react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.0.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babelify"</span>: <span class="pl-s"><span class="pl-pds">"</span>^10.0.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"browser-sync"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.26.7<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"browserify"</span>: <span class="pl-s"><span class="pl-pds">"</span>^16.3.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"gulp"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.9.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"gulp-autoprefixer"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.1.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"gulp-rename"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.4.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"gulp-sass"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.0.2<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"gulp-sourcemaps"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.6.5<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"gulp-uglify"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.0.2<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"vinyl-buffer"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.0.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"vinyl-source-stream"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.0.0<span class="pl-pds">"</span></span>
  },
  <span class="pl-ent">"babel"</span>: {
    <span class="pl-ent">"presets"</span>: [
      <span class="pl-s"><span class="pl-pds">"</span>@babel/preset-env<span class="pl-pds">"</span></span>
    ]
  }
}

</pre></div>
<p dir="auto"><strong>app.js</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from 'react';

import arrowLeft from './Assets/media/pyara_Dictionary/extr/ARROW_LEFT_SELECTED.png'
import arrowRight from './Assets/media/pyara_Dictionary/extr/ARROW_RIGHT_SELECTED.png'
import dayaSelected from './Assets/media/pyara_Dictionary/pyara_list/DAYA_selected.png'
import dharam from './Assets/media/pyara_Dictionary/pyara_list/DHARAM.png'
import himmath from './Assets/media/pyara_Dictionary/pyara_list/HIMMATH.png'
import mokham from './Assets/media/pyara_Dictionary/pyara_list/MOKHAM.png'
import sahib from './Assets/media/pyara_Dictionary/pyara_list/SAHIB.png'

import Iframe from 'react-iframe';

function App() {

  return (

    &lt;div className=&quot;row page_wrapper&quot;&gt;

      {/*&lt;!-- BASE  --&gt;*/}
      &lt;div id=&quot;pyaraVideo_slider_wrapper&quot;&gt;

        &lt;div className=&quot;wrapper&quot;&gt;

            &lt;div className=&quot;carousel&quot;&gt;
              &lt;div className=&quot;video-wrapper&quot;&gt;
                &lt;Iframe url=&quot;https://player.vimeo.com/video/343270204?background=1&amp;autoplay=1&amp;loop=1&amp;autopause=0&quot;
                  className=&quot;iframe&quot;
                  display=&quot;initial&quot;
                  position=&quot;relative&quot;
                  frameborder=&quot;0&quot;
                  gesture=&quot;media&quot;
                  allowfullscreen
                  height=&quot;100vh&quot;
                  width=&quot;100vw&quot;
                  allow=&quot;autoplay; fullscreen&quot;
                  webkitallowfullscreen
                  mozallowfullscreen/&gt;

              &lt;div className=&quot;video-wrapper&quot;&gt;
                &lt;Iframe url=&quot;https://player.vimeo.com/video/343270367?background=1&amp;autoplay=1&amp;loop=1&amp;autopause=0&quot;
                  className=&quot;iframe&quot;
                  display=&quot;initial&quot;
                  position=&quot;relative&quot;
                  frameborder=&quot;0&quot;
                  gesture=&quot;media&quot;
                  allowfullscreen
                  height=&quot;100vh&quot;
                  width=&quot;100vw&quot;
                  allow=&quot;autoplay; fullscreen&quot;
                  webkitallowfullscreen
                  mozallowfullscreen/&gt;

            &lt;/div&gt;
              &lt;div className=&quot;video-wrapper&quot;&gt;
                &lt;Iframe url=&quot;https://player.vimeo.com/video/343284907?background=1&amp;autoplay=1&amp;loop=1&amp;autopause=0&quot;
                  className=&quot;iframe&quot;
                  display=&quot;initial&quot;
                  position=&quot;relative&quot;
                  frameborder=&quot;0&quot;
                  gesture=&quot;media&quot;
                  allowfullscreen
                  height=&quot;100vh&quot;
                  width=&quot;100vw&quot;
                  allow=&quot;autoplay; fullscreen&quot;
                  webkitallowfullscreen
                  mozallowfullscreen/&gt;
              &lt;/div&gt;
            &lt;/div&gt;

        &lt;/div&gt;


      &lt;/div&gt;


      {/*&lt;!-- DETAIL
      &lt;div id=&quot;pyaraVideo_DETAIL_wrapper&quot; className=&quot;row col-xl-4 col-lg-4 col-md-10 col-sm-10 col-xs-10&quot;&gt;
        &lt;div id=&quot;DETAIL&quot;&gt;

          &lt;iframe src=&quot;https://player.vimeo.com/video/343285037&quot; width=&quot;100%&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen&quot; allowfullscreen&gt;&lt;/iframe&gt;

        &lt;/div&gt;
      &lt;/div&gt;
      --&gt;*/}


      &lt;div  id=&quot;pyara_nav_english&quot; className=&quot;row col-lg-9&quot; &gt;


        &lt;div id=&quot;PyaraPrev&quot; &gt;
          &lt;img className=&quot;img-fluid&quot; src={arrowLeft}/&gt;
        &lt;/div&gt;

        &lt;p&gt;GENEROSITY&lt;/p&gt;
        &lt;p&gt;COMPASSION&lt;/p&gt;
        &lt;p&gt;EMPATHY&lt;/p&gt;

        &lt;div id=&quot;PyaraNext&quot;&gt;
          &lt;img className=&quot;img-fluid&quot; src={arrowRight}/&gt;
        &lt;/div&gt;

      &lt;/div&gt;

      &lt;div id=&quot;pyara_nav&quot; className=&quot; col-lg-9&quot;&gt;

        &lt;div  className=&quot;pyara1_daya active pyara&quot;&gt;
          &lt;img className=&quot;img-fluid&quot; src={dayaSelected}/&gt;
        &lt;/div&gt;

        &lt;div  className=&quot;pyara2_dharam pyara&quot;&gt;
          &lt;img className=&quot;img-fluid&quot; src={dharam}/&gt;
        &lt;/div&gt;

        &lt;div  className=&quot;pyara3_himmath pyara&quot;&gt;
          &lt;img className=&quot;img-fluid&quot; src={himmath}/&gt;
        &lt;/div&gt;

        &lt;div className=&quot;pyara4_mokham pyara&quot;&gt;
          &lt;img className=&quot;img-fluid&quot; src={mokham}/&gt;
        &lt;/div&gt;

        &lt;div className=&quot;pyara5_sahib pyara&quot;&gt;
          &lt;img className=&quot;img-fluid&quot; src={sahib}/&gt;
        &lt;/div&gt;

      &lt;/div&gt;

      &lt;div id=&quot;explanation&quot; className=&quot; col-lg-9&quot;&gt;
        Panj Pyare are a Sikh philosophy of positive values in the community.
      &lt;/div&gt;



    &lt;/div&gt;
  &lt;/div&gt;
  );
}

export default App;
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">'react'</span><span class="pl-kos">;</span>

<span class="pl-k">import</span> <span class="pl-s1">arrowLeft</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/extr/ARROW_LEFT_SELECTED.png'</span>
<span class="pl-k">import</span> <span class="pl-s1">arrowRight</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/extr/ARROW_RIGHT_SELECTED.png'</span>
<span class="pl-k">import</span> <span class="pl-s1">dayaSelected</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/pyara_list/DAYA_selected.png'</span>
<span class="pl-k">import</span> <span class="pl-s1">dharam</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/pyara_list/DHARAM.png'</span>
<span class="pl-k">import</span> <span class="pl-s1">himmath</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/pyara_list/HIMMATH.png'</span>
<span class="pl-k">import</span> <span class="pl-s1">mokham</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/pyara_list/MOKHAM.png'</span>
<span class="pl-k">import</span> <span class="pl-s1">sahib</span> <span class="pl-k">from</span> <span class="pl-s">'./Assets/media/pyara_Dictionary/pyara_list/SAHIB.png'</span>

<span class="pl-k">import</span> <span class="pl-v">Iframe</span> <span class="pl-k">from</span> <span class="pl-s">'react-iframe'</span><span class="pl-kos">;</span>

<span class="pl-k">function</span> <span class="pl-v">App</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

  <span class="pl-k">return</span> <span class="pl-kos">(</span>

    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"row page_wrapper"</span><span class="pl-c1">&gt;</span>

      <span class="pl-kos">{</span><span class="pl-c">/*&lt;!-- BASE  --&gt;*/</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"pyaraVideo_slider_wrapper"</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"wrapper"</span><span class="pl-c1">&gt;</span>

            <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"carousel"</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"video-wrapper"</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Iframe</span> <span class="pl-c1">url</span><span class="pl-c1">=</span><span class="pl-s">"https://player.vimeo.com/video/343270204?background=1&amp;autoplay=1&amp;loop=1&amp;autopause=0"</span>
                  <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"iframe"</span>
                  <span class="pl-c1">display</span><span class="pl-c1">=</span><span class="pl-s">"initial"</span>
                  <span class="pl-c1">position</span><span class="pl-c1">=</span><span class="pl-s">"relative"</span>
                  <span class="pl-c1">frameborder</span><span class="pl-c1">=</span><span class="pl-s">"0"</span>
                  <span class="pl-c1">gesture</span><span class="pl-c1">=</span><span class="pl-s">"media"</span>
                  <span class="pl-c1">allowfullscreen</span>
                  <span class="pl-c1">height</span><span class="pl-c1">=</span><span class="pl-s">"100vh"</span>
                  <span class="pl-c1">width</span><span class="pl-c1">=</span><span class="pl-s">"100vw"</span>
                  <span class="pl-c1">allow</span><span class="pl-c1">=</span><span class="pl-s">"autoplay; fullscreen"</span>
                  <span class="pl-c1">webkitallowfullscreen</span>
                  <span class="pl-c1">mozallowfullscreen</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>

              <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"video-wrapper"</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Iframe</span> <span class="pl-c1">url</span><span class="pl-c1">=</span><span class="pl-s">"https://player.vimeo.com/video/343270367?background=1&amp;autoplay=1&amp;loop=1&amp;autopause=0"</span>
                  <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"iframe"</span>
                  <span class="pl-c1">display</span><span class="pl-c1">=</span><span class="pl-s">"initial"</span>
                  <span class="pl-c1">position</span><span class="pl-c1">=</span><span class="pl-s">"relative"</span>
                  <span class="pl-c1">frameborder</span><span class="pl-c1">=</span><span class="pl-s">"0"</span>
                  <span class="pl-c1">gesture</span><span class="pl-c1">=</span><span class="pl-s">"media"</span>
                  <span class="pl-c1">allowfullscreen</span>
                  <span class="pl-c1">height</span><span class="pl-c1">=</span><span class="pl-s">"100vh"</span>
                  <span class="pl-c1">width</span><span class="pl-c1">=</span><span class="pl-s">"100vw"</span>
                  <span class="pl-c1">allow</span><span class="pl-c1">=</span><span class="pl-s">"autoplay; fullscreen"</span>
                  <span class="pl-c1">webkitallowfullscreen</span>
                  <span class="pl-c1">mozallowfullscreen</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>

            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"video-wrapper"</span><span class="pl-c1">&gt;</span>
                <span class="pl-c1">&lt;</span><span class="pl-ent">Iframe</span> <span class="pl-c1">url</span><span class="pl-c1">=</span><span class="pl-s">"https://player.vimeo.com/video/343284907?background=1&amp;autoplay=1&amp;loop=1&amp;autopause=0"</span>
                  <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"iframe"</span>
                  <span class="pl-c1">display</span><span class="pl-c1">=</span><span class="pl-s">"initial"</span>
                  <span class="pl-c1">position</span><span class="pl-c1">=</span><span class="pl-s">"relative"</span>
                  <span class="pl-c1">frameborder</span><span class="pl-c1">=</span><span class="pl-s">"0"</span>
                  <span class="pl-c1">gesture</span><span class="pl-c1">=</span><span class="pl-s">"media"</span>
                  <span class="pl-c1">allowfullscreen</span>
                  <span class="pl-c1">height</span><span class="pl-c1">=</span><span class="pl-s">"100vh"</span>
                  <span class="pl-c1">width</span><span class="pl-c1">=</span><span class="pl-s">"100vw"</span>
                  <span class="pl-c1">allow</span><span class="pl-c1">=</span><span class="pl-s">"autoplay; fullscreen"</span>
                  <span class="pl-c1">webkitallowfullscreen</span>
                  <span class="pl-c1">mozallowfullscreen</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
              <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
            <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>


      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>


      <span class="pl-kos">{</span><span class="pl-c">/*&lt;!-- DETAIL</span>
<span class="pl-c">      &lt;div id="pyaraVideo_DETAIL_wrapper" className="row col-xl-4 col-lg-4 col-md-10 col-sm-10 col-xs-10"&gt;</span>
<span class="pl-c">        &lt;div id="DETAIL"&gt;</span>
<span class="pl-c"></span>
<span class="pl-c">          &lt;iframe src="https://player.vimeo.com/video/343285037" width="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen&gt;&lt;/iframe&gt;</span>
<span class="pl-c"></span>
<span class="pl-c">        &lt;/div&gt;</span>
<span class="pl-c">      &lt;/div&gt;</span>
<span class="pl-c">      --&gt;*/</span><span class="pl-kos">}</span>


      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"pyara_nav_english"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"row col-lg-9"</span> <span class="pl-c1">&gt;</span>


        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"PyaraPrev"</span> <span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">arrowLeft</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>GENEROSITY<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>COMPASSION<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>EMPATHY<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"PyaraNext"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">arrowRight</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"pyara_nav"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">" col-lg-9"</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"pyara1_daya active pyara"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">dayaSelected</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"pyara2_dharam pyara"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">dharam</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span>  <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"pyara3_himmath pyara"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">himmath</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"pyara4_mokham pyara"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">mokham</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

        <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"pyara5_sahib pyara"</span><span class="pl-c1">&gt;</span>
          <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">"img-fluid"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-s1">sahib</span><span class="pl-kos">}</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

      <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">id</span><span class="pl-c1">=</span><span class="pl-s">"explanation"</span> <span class="pl-c1">className</span><span class="pl-c1">=</span><span class="pl-s">" col-lg-9"</span><span class="pl-c1">&gt;</span>
        Panj Pyare are a Sikh philosophy of positive values in the community.
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>



    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">App</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Expected behavior/code</strong><br>
I expected the gulp file to compile properly and export a minfied javascript file that will be imported into my index.html file. This way the index will have an easier time processing the code.</p>
<p dir="auto">The gulp file should produce it in a folder, it works perfectly for my scss task in gulp but not js task.</p>
<p dir="auto"><strong>Babel Configuration (.babelrc, package.json, cli command)</strong><br>
,<br>
"babel": {<br>
"presets": [<br>
"@babel/preset-env"<br>
]<br>
}</p>
<p dir="auto"><strong>Environment</strong></p>
<ul dir="auto">
<li>
<p dir="auto">"gulp": "^3.9.1",</p>
</li>
<li>
<p dir="auto">Babel version(s): "@babel/preset-env": "^7.5.5",<br>
"@babel/preset-react": "^7.0.0",<br>
"babelify": "^10.0.0",<br>
"babel-core": "^6.26.3"</p>
</li>
<li>
<p dir="auto">Node/npm version: [6.9.0]</p>
</li>
<li>
<p dir="auto">OS: [OSX 10.13.4]</p>
</li>
<li>
<p dir="auto">How you are using Babel: [<code class="notranslate">cli</code>](not sure)</p>
</li>
</ul>
<p dir="auto"><strong>Possible Solution</strong><br>
I know the problem has something to do with the preset I am choosing, when I run npm start, my app loads properly and everything is linked.</p>
<p dir="auto">The only issue im having is compiling the js task in my gulp file which uses Babel, it breaks at the Babel step</p>
<p dir="auto"><strong>Additional context/Screenshots</strong><br>
Please some one help me with this I have spent 1 week so far trying to fix this and its a nightmare. Its the worst. I really just want to minify my js :( this hurts.</p></div>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/krainboltgreene/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/krainboltgreene">@krainboltgreene</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6.3.17</li>
<li><strong>Node version:</strong> 5.2.0</li>
<li><strong>npm version:</strong> 3.3.12</li>
</ul>
<h3 dir="auto">Description</h3>
<p dir="auto">I'm generating my code with <code class="notranslate">babel</code> and running with <code class="notranslate">node</code> everything is transformed correctly and the server runs. When I try to use <code class="notranslate">babel-node</code> it errors out with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$ ./node_modules/.bin/babel-node ./source/
/Users/krainboltgreene/Code/libmythoas/mythoas.js/source/index.js:1
import http from &quot;http&quot;;
^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:54:16)
    at Module._compile (module.js:375:25)
    at loader (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Function.Module.runMain (module.js:431:10)
    at /Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/lib/_babel-node.js:161:27
    at Object.&lt;anonymous&gt; (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/lib/_babel-node.js:162:7)
    at Module._compile (module.js:399:26)"><pre class="notranslate"><code class="notranslate">$ ./node_modules/.bin/babel-node ./source/
/Users/krainboltgreene/Code/libmythoas/mythoas.js/source/index.js:1
import http from "http";
^^^^^^

SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:54:16)
    at Module._compile (module.js:375:25)
    at loader (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:345:32)
    at Function.Module._load (module.js:302:12)
    at Function.Module.runMain (module.js:431:10)
    at /Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/lib/_babel-node.js:161:27
    at Object.&lt;anonymous&gt; (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/lib/_babel-node.js:162:7)
    at Module._compile (module.js:399:26)
</code></pre></div>
<p dir="auto">This only makes sense if it's not looking at my <code class="notranslate">.babelrc</code>.</p>