My Gulp Job Example

Gulp is a build tool that automate application builds. It is usually used for front end build, but you can also use it for backend application build (e.g. automating .NET application build with gulp-msbuild).

When it comes to front end build automation, gulp is the most flexible and powerful build tool. The tasks can be written in JavaScript. The heavy lifting like compiling and minifying SASS, JavaScript or TypeScript can be handled by using existing gulp modules. It can put vendor scripts and your custom scripts into a single main file. The performance is good with JavaScript asynch executions and the ability to execute tasks in parallel.

Gulp is easy to learn. It is the tool that has extremely high effort-rewards ratio. When it comes to gulp, you only needs to know four functions.

gulp.task defines the task. You can simply pass the call back function that defines the actual task.

gulp.src is the folder where the task is executed.

gulp.des is the folder where the build product goes.

gulp.watch enables hot loading. It triggers build jobs whenever the file changes.

That is it. Once you know them, all you need to do is to use gulp modules that do all the magic.

Now, let me show you the gulp task I made. It used to compile front end code in this repo (Sakura Translation Frontend example). It copies images, compiles javascript and sass. You can use this as a boilerplate or expand your existing gulp job.

This is my gulp job!

If you have your gulp job example, please feel free to post the link in the comment!

Front-End
TypeScript: type aliases to check type equality

This post is to analyse how the type equality check by using type aliases proposed by Matt Pocock in his twitter post. These type aliases allow us to elegantly express type equality checks in unit tests. All we need to do is to pass the output and expected types in …

Front-End
Fixing it.only type error in Jest

If you are getting a type error with it.only in Jest, it could be due to incorrect TypeScript typings or incompatible versions of Jest and TypeScript. To resolve this issue, you can try the following steps: Make sure you have the latest versions of Jest and its TypeScript typings installed …

Front-End
yup conditional validation example

Here’s an example of a Yup validation logic where the first input field is optional but, if filled, it must contain only alphabetic characters, and the second input field is required: import * as Yup from “yup”; const validationSchema = Yup.object().shape({ firstField: Yup.string().matches(/^[A-Za-z]*$/, { message: “First field must contain only …