Front-End Development Environment Template I use

I’ll introduce my Front-End package which is using webpack and gulp.

December 14, 2017

When I start to create websites, I usually use my boilerplate. Those are Node.js and webpack and gulp and so on. I would like to introduce my template.

Web Development Tools

I’m usually using nodebrew for managing Node.js.

Node.js & npm

node -v
npm -v

What is Node.js?

Node.js is a lean, fast, cross-platform JavaScript runtime environment that is useful for both servers and desktop applications

Why web developers use Node.js is because Node.js provides a lot of useful tools when you implement websites. You don’t need to use as an actual server. But you need to install to your computer.

What is nodebrew?

You can install Node.js only one version. However, sometimes it’s needed to change version. Once you use nodebrew, you can have multiple Node.js.


You can manage your project on npm. then it’s generated “package.json”. You can add any dependencies such as jQuery, gsap, reset-css. And also devDependencies which is babel, and gulp.



  "dependencies": {
    "gsap": "^1.20.3",
    "jquery": "^3.2.1",


import jQuery from 'jquery';
import { TweenMax, TweenLite, TimelineLite } from "gsap";
const $ = jQuery;

Sample package.json


Sample gulpfile.js