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
How to set up auto-fix on save by using the project’s Eslint config with VS Code

This is a quick instruction to set up auto-fix on save by using the project’s eslint config with VS Code. It works for both TS and JS. 1. Install ESLint plugin for VS Code. 2. Add config to VS code Go to Code -> Preference -> Settings (or press cmd …

Front-End
How to configure debugger when running jest for React unit tests with VS Code

We can debug the jest test with console.log (make sure to remove the -silent option). But, attaching a debugger and stepping through the tests sometimes may help us to troubleshoot quicker under certain circumstances. 1. Install Jest Plugin Install Jest plugin. 2. Configure Press cmd + shift + p. Find …

Front-End
Unable to Get Local Issuer Certificate for installing Npm Modules

unable to get local issuer certificate error with yarn install from a private npm repository (such as JFrog), you can try running this command: yarn config set “strict-ssl” false yarn install Error message example error An unexpected error occurred: “https://npco.jfrog.io/artifactory/api/npm/npm-mdh/@mdh/my-library/-/@mdh/my-library-3.21.0.tgz: unable to get local issuer certificate”.