Front-end development is an interesting beast of its own. It mostly deals with user experience, which requires constant tuning of page layout and experience flow.
Do you find yourself refresh that page for the 18 times? Do you find yourself run the script every time before deployment to uglify the page? There is a ton of room for automation here!
Most famously, the Front-end world seems to be using Gulp or Grunt for this kind of task (this statement may be false very soon with the speed of tool iteration in the JS community). Not to spark any debates here, but I am pretty happy with Gulp, mainly because of its pipelining operators feels very functional.
This post outlines a simple setup that I borrowed from various places and it should be enough to get you started with automating many of the repetitive tasks.
Setting up Gulp is relatively straightforward, you first need to install Gulp globally to use it as a command line tool. With yarn
, this is as easy as
1 | yarn global add gulp |
For Gulp to run within a project, at the root of the project folder, you need to create a gulpfile.js
file with
1 | var gulp = required('gulp'); |
A common use case of Gulp is to automatically uglify/minify the .css
, .js
and .html
files. This is a required step before any front-end deployment to reduce the size of files being shipped to clients. A few packages are used to achieve this goal, which can be introduced as development dependencies for your project by
1 | yarn dev add gulp-clean-css, gulp-uglify, gulp-contact, \ |
Another use case is to generate various size of an images for responsive design. It usually means modify the dimension and quality of an image so that it could be displayed reasonable and fast on either desktop or phones. That’s a part of the UI usually requires constant iterations and refinement. A handy package can be used to save time by auto modify images as you iterate.
1 | yarn dev add gulp-responsive |
Lastly, and this is a killing feature in my eyes, Gulp saves you from refreshing the page hundreds of times – an inevitable action during front-end development. The way it works is Gulp runs a test web server that constantly watching the directories and refresh the page once it detects a change. For this to work, another package needs to be installed.
1 | yarn dev add gulp-webserver |
Assuming you put all the raw files inside a source
folder and want to have your optimized files inside a build
folder, you could add the following code into the gulpfile.js
to achieve all the automation listed above.
1 | var gulp = require('gulp'); |
And, with that, you could just hit the following command in the project’s root directory and watch magic to happen.
1 | gulp |