Gulp

This is a task runner



npm install --save-dev gulp 
npm install --save-dev gulp-cli
npm install --save-dev gulp-webserver

npm install --save-dev gulp-babel 
npm install --save-dev @babel/core

?? Babel-polyfill


Create gulpfile.js


var gulp = require("gulp"); 
var rename = require('gulp-rename');
var webserver = require('gulp-webserver');

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

function BuildFiles(done) {
     gulp.src('index.html')
       .pipe(gulp.dest('dist'));

     gulp.src('index.js')
       .pipe(rename('gulpbundle.js'))
       .pipe(gulp.dest('dist'))

   done();
};

function DevServer(done) {
     gulp.src('dist')
       .pipe(webserver({
           open: true,
           port: 8080,
           fallback: 'index.html'
    }));

   done();
};

exports.DevServer = DevServer;

/**
function Run(done) {
   BuildFiles();
   DevServer();

   done();
};
**/

exports.default = BuildFiles;


node ./node_modules/gulp/bin/gulp 
node ./node_modules/gulp/bin/gulp DevServer

Day 2


var _gulp = require("gulp"); 
var _rename = require('gulp-rename');
var _notify = require('gulp-notify');
var _webserver = require('gulp-webserver');
var _browserSync = require("browser-sync").create();
// var _babel = require('gulp-babel');


_gulp.task('BuildFiles', function f_BuildFiles(done) {
   _gulp.src('index.html')
      .pipe(_gulp.dest('dist'));

   _gulp.src('index.js')
      .pipe(_rename('gulpbundle.js'))
      .pipe(_gulp.dest('dist'))

   done();
});

_gulp.task("watch", _gulp.parallel(f_BrowserSync, f_WatchFiles))

// function f_DevServer(done) {
// _gulp.src('dist')
// .pipe(_webserver({
// open: false,
// port: 8080,
// fallback: 'index.html'
// }));

// done();
// };

function f_BrowserSync() {
   _browserSync.init({
      server: {
         baseDir: 'dist'
      }
   });
}

function f_WatchFiles() {
   //_gulp.watch(jsWatch, _gulp.series(js, _browserSync.reload));
   _gulp.watch('*.js', _gulp.series(f_JSFiles, f_Reload));
   _gulp.watch('*.html', _gulp.series(f_HTMLFiles, f_Reload));

   // _gulp.src('index.js')
   // .pipe( _notify({ message: 'Gulp is Watching' }));
}

function f_JSFiles(done) {
   _gulp.src('index.js')
      .pipe(_rename('gulpbundle.js'))
      .pipe(_gulp.dest('dist'))

   done();
}

function f_HTMLFiles(done) {
   _gulp.src('index.html')
      .pipe(_gulp.dest('dist'));

   done();
}

function f_Reload(done) {
   _browserSync.reload();
   done();
}



node ./node_modules/gulp/bin/gulp BuildFiles 
node ./node_modules/gulp/bin/gulp watch



© 2020 Better Solutions Limited. All Rights Reserved. © 2020 Better Solutions Limited TopPrevNext