BrowserSync, Gulp and TypeScript

I was creating a simple web app with VueJS (without cli, no single file component) and I thought it would be good to have a local server which watches changes, auto-transpiles TypeScript and later maybe builds(minify, terser, copy files etc.) for the production. By using BrowserSync & Gulp, a typescript project can be easily watched, and the browser can be auto-reloaded in case of any changes. Let’s assume we have .ts files and index.html in “src” folder. The following gulpfile compiles the TS files into “dist” folder, watches for the changes and reloads the browser in case of changes. It still requires the build function for the production but it would be similar to development function, maybe terser plugin can be added.

const { series, watch, src, dest } = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
var server = require('browser-sync').create();

const paths = {
    scripts: {
        ts: 'src/*.ts',
        dest: 'dist/js/'
    }
};

function reload(done) {
    server.reload();
    done();
}

function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}


let development = function() {
    src('./index.html').pipe(dest('./dist/'));
    src('./css/**/*').pipe(dest('./dist/css'));
    src('./src/*.json').pipe(dest('./dist'));
    src('./assets/**/*').pipe(dest('./dist/assets/'));
    return tsProject.src()
        .pipe(sourcemaps.init())
        .pipe(tsProject())
        .pipe(sourcemaps.write())
        .pipe(dest('./dist/js/'));
};

const mywatcher = () => {
    console.log(paths.scripts.ts)
    const watcher = watch(paths.scripts.ts, series(development, reload))
    watcher.on('change', (path) => {
        console.log(`File ${path} was changed.`);
    });
};
const dev = series(development, serve, mywatcher );
exports.default = dev;

There is a gulp plugin for the same purpose: https://www.npmjs.com/package/gulp-webserver
Links:
1. https://www.browsersync.io/docs/gulp
2. https://gulpjs.com/docs/en/api/watch
#typescript #gulp #vuejs