GulpJs using TS Scripting language

 In past example we had seen the use of the gulpjs for node project.

http://siddharathadhumale.blogspot.com/2021/06/gulpjs-and-its-uses-as-bild-tool.html

Lets say we want to use the same concept using Typescript programing language in this case please follow the below steps

We belive you already had installed following things in your PC

1- Node
2- NPM
3- GulpPS
4- Module such as
gulp-postcss
cssnano
autoprefixer
gulp-concat
gulp-terser
gulp-sourcemaps

We are taking the base project as we had taken in past example.

execute following command in sequence

1- npm init
2- npm install –-global gulp-cli
3- npm install –-save-dev gulp
4- npm install --save-dev gulp-concat@^2.6.1 gulp-terser@^1.2.0 gulp-sourcemaps@^2.6.5
5- npm install --save-dev gulp-postcss@^8.0.0 cssnano@^4.1.10 autoprefixer@^9.7.6
6- npm install --save-dev gulp-imagemin

Now creat a file called as gulpfile.esm.js, cssTask.ts and jsTask.ts

1- gulpfile.esm.js

import imagemin from "gulp-imagemin";
import { series, parallel, watch  } from "gulp";
import { src, dest } from 'gulp';
import gulp  from 'gulp';

import  cssTask  from "./cssTask.ts";
import  jsTask  from "./jsTask.ts";

const jsPath = 'src/assets/js/**/*.js';
const cssPath = 'src/assets/css/**/*.css';

function copyHtml() {
  return src('src/*.html').pipe(gulp.dest('dist'));
}

function imgTask() {
  return src('src/images/*').pipe(imagemin()).pipe(gulp.dest('dist/images'));
}

function watchTask() {
  watch([cssPath, jsPath], { interval: 1000 }, parallel(cssTask, jsTask));
}

exports.imgTask = imgTask;
exports.copyHtml = copyHtml;
exports.default = series(
  parallel(copyHtml, imgTask, cssTask, jsTask),
  watchTask
);

2- cssTask.ts

import gulp  from 'gulp';
import concat from "gulp-concat";
import sourcemaps  from "gulp-sourcemaps";
import postcss from "gulp-postcss";
import cssnano from "cssnano";
import  autoprefixer  from "autoprefixer";
import { src, dest } from "gulp";



const cssPath = 'src/assets/css/**/*.css';

function  cssTask () {

    return src(cssPath)
    .pipe(sourcemaps.init())
    .pipe(concat('style.css'))
    .pipe(postcss([autoprefixer(), cssnano()])) //not all plugins work with postcss only the ones mentioned in their documentation
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/assets/css'));

  }
    
//exports.cssTask = cssTask;
export default  cssTask;

3- jsTask.ts

import gulp  from 'gulp';
import concat from "gulp-concat";
import terser  from "gulp-terser";
import sourcemaps  from "gulp-sourcemaps";

import { src, dest } from "gulp";
import { data } from 'autoprefixer';

const jsPath = 'src/assets/js/**/*.js';


function jsTask () {


    return src(jsPath)
    .pipe(sourcemaps.init())
    .pipe(concat('all.js'))
    .pipe(terser())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/assets/js'));


  }

export default  jsTask ;

Now as suggested in the below url
https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles/

Install following two modules

npm i --save-dev ts-node
npm i --save-dev @babel/register
npm i --save-dev esm

Now run gulp as shown below and we will be able to get dist folder with minified css and uglify js.

Note:- You can download the code from given location

https://github.com/shdhumale/siddhuGulpTSProject.git