How To Use Gulp And Prettier on Code Snippets and API Outputs

Code editors come with "beautifiers" which programmers can use to make code uniformly and conventionally laid out, aka: "pretty". But sometimes you have a snippet of code, maybe copied from the web, or maybe a packet of JSON curled on the command line, and you want to quickly format it. Here is a way of using and to build a cute project to automate this common task. This will be a fun utility you can run in the background; and for those looking to learn , it makes for a neat primer for a less common use case. gulp prettier gulp Prerequisites You'll need and installed Node npm You'll need installed as a global package: gulp npm i gulp -g You'll need to know how to run or on a command line. curl http What is gulp? is a NodeJS-based task runner. is another well known library built for the same purpose, but in this article we'll use because I like it better. In my opinion, is more like code; is more like configuration. Either are good. I like gulping better than I like grunting. If you want to grunt, find a grunter. I'm a gulper. Unless it's beer. Then I'm a sipper. gulp grunt gulp gulp grunt uses a concept called a "pipe". A pipe is nothing more than a chain of functions where each transforms the input in some way before passing on the output of each stage to the next function. Metaphorically, this would be a valid task: gulp gulp { src(potatoes) .pipe(wash()) .pipe(peel()) .pipe(slice()) .pipe(season()) .pipe(fry()) .pipe(drain()) .pipe(cool()) .pipe(bag()) .pipe(dest(shop)) } ( ) function gulpPotatoesTask return Obviously can't make potato chips (or "crisps" as we say in the UK); but it can perform many useful computer tasks. itself doesn't have any task functions, all it does is pipe content from one function to another. The actual functions are imported from based libraries; some of them friendly versions of well known npm libraries. There are lots of them! You can even write your own. gulp gulp gulp gulp Tasks can be simple, like copying files from one place to another; or compiling code, or compressing files; or deploying applications... Usually the tasks completes are trivial. They could be easily achieved with a few command line statements. What brings to the party is convenience. gulp gulp A task only saves you a few seconds each time... but if you use to handle the quick tasks you do frequently, the time saved adds up... gulp gulp We're going to look at a simple use case. Working pretty When I'm developing a REST API, I'm often curling the endpoint to verify the output. On the command line, the output is not pretty, so it makes it hard to verify whether a large JSON packet... especially a list of records... is error free. I'd usually to copy and paste the result into my code editor and run a "beautify" command. That's a simple task, which takes a few seconds, which I have to do a lot! It's a perfect candidate for a task. gulp Let me show you what I mean with help from cat-facts. On a command line, using or or something else you like, run this: curl http curl -X GET https://cat-fact.herokuapp.com/facts You'll see some output like this: [{ :{ : , : , : }, : , : , : , : , : , : , : , : , : , : },{ :{ : , : }, : , : , : , : , : , : , : , : , : , : },{ :{ : , : }, : , : , : , : , : , : , : , : , : , : },{ :{ : , : }, : , : , : , : , : , : , : , : , : , : },{ :{ : , : }, : , : , : , : , : , : , : , : , : , : }] "status" "verified" true "sentCount" 1 "feedback" "" "type" "cat" "deleted" false "_id" "5887e1d85c873e0011036889" "user" "5a9ac18c7478810ea6c06381" "text" "Cats make about 100 different sounds. Dogs make only about 10." "__v" 0 "source" "user" "updatedAt" "2020-09-03T16:39:39.578Z" "createdAt" "2018-01-15T21:20:00.003Z" "used" true "status" "verified" true "sentCount" 1 "type" "cat" "deleted" false "_id" "588e746706ac2b00110e59ff" "user" "588e6e8806ac2b00110e59c3" "text" "Domestic cats spend about 70 percent of the day sleeping and 15 percent of the day grooming." "__v" 0 "source" "user" "updatedAt" "2020-08-26T20:20:02.359Z" "createdAt" "2018-01-14T21:20:02.750Z" "used" true "status" "verified" true "sentCount" 1 "type" "cat" "deleted" false "_id" "58923f2fc3878c0011784c79" "user" "5887e9f65c873e001103688d" "text" "I don't know anything about cats." "__v" 0 "source" "user" "updatedAt" "2020-08-23T20:20:01.611Z" "createdAt" "2018-02-25T21:20:03.060Z" "used" false "status" "verified" true "sentCount" 1 "type" "cat" "deleted" false "_id" "5894af975cdc7400113ef7f9" "user" "5a9ac18c7478810ea6c06381" "text" "The technical term for a cat’s hairball is a bezoar." "__v" 0 "source" "user" "updatedAt" "2020-11-25T21:20:03.895Z" "createdAt" "2018-02-27T21:20:02.854Z" "used" true "status" "verified" true "sentCount" 1 "type" "cat" "deleted" false "_id" "58e007cc0aac31001185ecf5" "user" "58e007480aac31001185ecef" "text" "Cats are the most popular pet in the United States: There are 88 million pet cats and 74 million dogs." "__v" 0 "source" "user" "updatedAt" "2020-08-23T20:20:01.611Z" "createdAt" "2018-03-01T21:20:02.713Z" "used" false ...which ain't pretty! We're going to write a task which can be used to immediately view a version of this (and other types of) output. gulp prettier What is prettier? formats types of code, like Markdown, HTML, Javascript, JSON, php, SASS, JSX, and a few others. By format or "prettier" we mean making Prettier Yuck [{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: },{x: ,y: }] 0.8237408992028434 0.13037233515888857 0.6963719435837943 0.4649206270118649 0.7648934156460141 0.5717398107678364 0.9959169251265363 0.2694142052523685 0.6960740127788656 0.4607191696858737 0.7997975402971844 0.7237427911168932 0.2787610912100449 0.9407814810049839 0.3814844890207585 0.5966765925995574 0.8582462233630488 0.40239228496424784 0.7787669281973615 0.08106311625800644 0.2141057128647048 0.9657071629620191 0.8275684202905218 0.5451389175963794 0.165628605615336 0.14122051271223968 0.20818796522948935 0.7404504627391517 0.9674488899456264 0.20797270494407227 0.4749080813580391 0.5771024073819466 0.8843075075690756 0.6923906507976978 0.3726781663836376 0.09623360192541552 0.9597557422088943 0.7070691995654992 0.6074224539058268 0.9773926533307942 look Yummy [ { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: }, { x: , y: } ] 0.8237408992028434 0.13037233515888857 0.6963719435837943 0.4649206270118649 0.7648934156460141 0.5717398107678364 0.9959169251265363 0.2694142052523685 0.6960740127788656 0.4607191696858737 0.7997975402971844 0.7237427911168932 0.2787610912100449 0.9407814810049839 0.3814844890207585 0.5966765925995574 0.8582462233630488 0.40239228496424784 0.7787669281973615 0.08106311625800644 0.2141057128647048 0.9657071629620191 0.8275684202905218 0.5451389175963794 0.165628605615336 0.14122051271223968 0.20818796522948935 0.7404504627391517 0.9674488899456264 0.20797270494407227 0.4749080813580391 0.5771024073819466 0.8843075075690756 0.6923906507976978 0.3726781663836376 0.09623360192541552 0.9597557422088943 0.7070691995654992 0.6074224539058268 0.9773926533307942 So let's start making pretty from ugly; yummy from yuck; unreadable to ... well... you get the point. Scaffolding Start by creating a new folder for the project and initialize a package: npm mkdir pretty-ugly cd pretty-ugly npm init -y At this stage you'll have a folder with a file - and that's it. Next we'll install some npm packages. package.json npm i del gulp gulp-prettier prettier vinyl-paths When the install is finished, run gulp gulp [17:40:34] No gulpfile found No gulpfile found!? Good point! So create with your favourite text editor and put it in the root of your new project. Copy the following into the file and save it. gulpfile.js /pretty-ugly/gulpfile.js { src, dest, watch } = ( ) prettier = ( ), del = ( ), vinylPaths = ( ) prettyUglyFiles = [ ] prettyUglyTask = { src(prettyUglyFiles) .pipe(vinylPaths(del)) .pipe(prettier()) .pipe(dest( )) } prettyUgly = { watch(prettyUglyFiles, prettyUglyTask) } exports.default = prettyUgly const require "gulp" const require "gulp-prettier" require "del" require "vinyl-paths" let "./pretty/ugly/*.*" let => () return "./pretty/" let => () return For those of you who know , this will be familiar. For those who don't know , I will break it down. If you are a user it will be useful for you to compare the approach. gulp gulp grunt First we import all the libraries we need from gulp: , , and are part of 's core API; functions which form the backbone of tasks. src dest watch gulp gulp gets to retrieve one or more source files/folders. src gulp gets to "pipe" the result of some transformation of those files into a destination folder. dest gulp gets to (duh!) watch for changes in the src which can be used to trigger a new transformation of them which is piped into the destination folder. watch gulp Next we import some of the based transforming functions from other npm libraries. gulp prettier = ( ), del = ( ), vinylPaths = ( ) const require "gulp-prettier" require "del" require "vinyl-paths" Task 1: prettyUglyTask The "pipe" in is simple. prettyUglyTask prettyUglyFiles = [ ] prettyUglyTask = { src(prettyUglyFiles) .pipe(vinylPaths(del)) .pipe(prettier()) .pipe(dest( )) } let "./pretty/ugly/*.*" let => () return "./pretty/" We ask to fetch all files in the source directory referenced by gulp prettyUglyFiles We ask to delete the source files. Don't worry too much about what does - think of it as a marshal which deletes the files while keeping them in the pipe. gulp vinyl-paths We ask to ask to run its magic on them and make them (duh!) prettier. gulp prettier We get to save the prettier files into a different folder. The reason for using a different folder is that we're going to watch the source directory for changes and we don't want to get into an infinite loop! gulp gulp Task 2: prettyUgly prettyUgly = { watch(prettyUglyFiles, prettyUglyTask) } let => () return The task is simple. We ask to watch the source folder and if anything changes, we ask it to perform Task 1: prettyUglyTask. Watch handles the piping of the changed files into the function. prettyUgly gulp prettyUglyTask exports.default = prettyUgly It is Task 2, which we export. When we run , it will run Task 2, which does nothing until the files in the source directory change. prettyUgly, gulp The folder structure we're using is purely to humour me. We put the "ugly" files into the ugly folder and puts the prettier versions into the pretty folder. You'll need these folders so make them: gulp mkdir -p pretty/ugly You could use a different folder structure, i.e. making pretty and ugly siblings, but I like the nomenclature which implies the action, e.g. "[make] pretty [of that which is] ugly". I like that the files I want to see are in the parent folder, and the files I never want to see (the ugly ones) are buried. Small things please little minds. At this point your project will look like this: pretty-ugly |- node_modules |- pretty | - ugly |- gulpfile.js |- package-lock.json |- package.json Now open up a different terminal and type the command: gulp gulp [20:54:25] Using gulpfile ~/Dev/timitee/pretty-ugly/gulpfile.js [20:54:25] Starting 'default'... In your original terminal (and with an eye on your second terminal), type this: curl -X GET "https://cat-fact.herokuapp.com/facts" --output ~/Dev/timitee/pretty-ugly/pretty/ugly/catfacts.json You'll notice that gulp wakes up and prints: [20:56:04] Starting 'prettyUglyTask'... [20:56:04] Finished 'prettyUglyTask' after 164 ms [20:56:05] Starting 'prettyUglyTask'... [20:56:05] Finished 'prettyUglyTask' after 9.68 ms Even though we our "cat facts" into the folder, you'll open the from the folder. --output pretty/ugly catfacts.json pretty With this gulp task running, you can put (or output) any file recognizes (see https://prettier.io/) into the folder, and it will format the file and move the pretty version into the (duh!) folder. prettier ugly pretty And that's pretty-ugly! I hope this leaves you with: A taste of . gulp A handy utility you can use in your daily workflow. Some pretty files. A couple of cat facts. Core, Thanks! https://gulpjs.com/ https://prettier.io/ https://cat-fact.herokuapp.com https://mixedanalytics.com/blog/list-actually-free-open-no-auth-needed-apis/ Photo by from mikoto.raw Pexels