Create a typescript + gulp + browserify project

readme.md

Typescript-node-frontend-browser-project

Pre-requisite: install gulp globally npm i -g gulp

• Create project directory cd into it and then run npm init
• Install following deps for dev via npm [yes gulp again] npm i --save-dev gulp typescript gulp-typescript browserify vinyl-source-stream vinyl-buffer gulp-util gulp-uglify gulp-sourcemaps gulp-imagemin babelify@8 babel-core babel-preset-es2015 tsify
• Create below gulpfile.js in project root folder and run the gulp command from project root dir. [runt hsi command once as it will create project sturcture]
• gulp watch for live editing or use gulp for offline building of project

project sturcture

src: contains all your ts , html, css , image file lib: is an intermediatory file, where typescript conpiled js is palced dist: is the actual folder which contains your distribution code. the one you will expose in your producttion server.

gulpfile.js

"use strict";

const gulp = require('gulp');
const ts = require('gulp-typescript');
const browserify = require('browserify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const gutil = require('gulp-util');
const uglify = require('gulp-uglify');
const sourcemaps = require('gulp-sourcemaps');
const imagemin = require('gulp-imagemin');
const tsify = require("tsify");
const babelify = require('babelify');

//for creating directories
const fs = require('fs');

function clean(cb) {
    ['dist', 'lib'].forEach(dirPath=>{
        fs.rmdirSync(dirPath, {recursive: true});
    })
    cb();
}

//src for source code, 
//lib is for compilation out put of typescript file, 
//dist is for prod use
const project_structure = [
    'src',
    'src/assets/fonts',
    'src/assets/img',
    'dist',
    'lib'
]

//TASK: creates project skeleton if its not created before hand
function create_project_skeleton(cb){
    project_structure.forEach(dirPath=>{
        if(!fs.existsSync(dirPath)){
            fs.mkdirSync(dirPath, {recursive: true});
            console.log('📁  folder created:', dirPath);
        }
    });
    if(! fs.existsSync('./src/tsconfig.json')){
        fs.writeFileSync("./src/tsconfig.json", `{
            "compilerOptions": {
                "module": "ES2015",
                "target": "ES2018",
                "noImplicitAny": true,
                "removeComments": true,
                "preserveConstEnums": true,
                "sourceMap": true
            }
          }`);
    }

    if(!fs.existsSync('./src/index.ts')){
        fs.writeFileSync('./src/index.ts', "//This will be the 'main' entry point for your application");
    }

    cb();
}


const htmlPaths=["src/**/*.html", "src/**/*.css", "src/**/*.ttf"];
//TASK: copy all html, css, fonts files 
function copy_html(cb){
    gulp.src(htmlPaths)
    .pipe(gulp.dest('dist'));

    cb();
}

//TASK: minifies images
function minify_image(cb){
    const l = fs.readdirSync('./src/assets/img');
    if(l.length> 0){
        gulp.src('src/assets/img/**/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/assets/img'));
    }
    
    cb();
}

const tsFilesGlob = [
    "src/**/*.ts",
    "!./node_modules/**/*.ts"
];
function compile_ts_file(cb){
    const tsconfig = require('./src/tsconfig.json');
    gulp.src(tsFilesGlob)
      .pipe(ts(tsconfig.compilerOptions))
      .pipe(gulp.dest('./lib'));

    cb();
}

function do_browserify(cb){
    const b = browserify({
        entries: './lib/index.js',
        debug: false,
      }).transform(babelify.configure({
        presets : ["es2015"]
    }));
    b.bundle()
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
            // Add transformation tasks to the pipeline here.
            //.pipe(uglify())
            .on('error', gutil.log)
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./dist/'));

        cb();
}
const compile_and_browserify= gulp.series(compile_ts_file,
    do_browserify);

function build(cb) {
    gulp.series(create_project_skeleton, clean,
        copy_html, minify_image, compile_and_browserify
        )();

    cb();
}



exports.create_project_skeleton = create_project_skeleton;
exports.copy_html = copy_html;
exports.minify_image = minify_image;
exports.compile_ts_file = compile_ts_file;
exports.do_browserify= do_browserify;
exports.clean = clean;

exports.default = build;
exports.watch = gulp.task('watch',()=>{
    gulp.watch([...htmlPaths],copy_html);
    gulp.watch([...tsFilesGlob], compile_and_browserify);
})