Guide on how to beautify HTML and generate output files in the identical directory as the current one

Question

Guide on how to beautify HTML and generate output files in the identical directory as the current one

Hey there! I'm currently working as a junior front-end developer and have recently delved into using gulp. One of the challenges I face is dealing with HTML files received from senior developers that aren't well-formatted, containing excessive whitespace and poor indentation. Here's an example:

<div id="preloader">

        <div id="status">&nbsp;</div>

    </div>

    <div id="nav-anchor"></div>



    <div class="top-navbar-fixed">

        <nav class="sibling-website-nav">

            <ul>

                <li><a href="">Accounting</a></li><li class="active"><a href="">Training</a></li>

                <!-- <li><a href="">Recruitment</a></li> -->

            </ul>

        </nav>

The unnecessary whitespace makes it hard to work with. Fortunately, gulp has a plugin called HERE, which can help clean up the code like so:

var prettify = require('gulp-html-prettify');

gulp.task('templates', function() {
  gulp.src('./lib/*.html')
    .pipe(prettify({indent_char: ' ', indent_size: 2}))
    .pipe(gulp.dest('./dist/'))
});

While this works well, it creates new files in a different directory. What I aim for is to format the existing files in their current directories. How can I achieve this using gulp?

javascript gulp

Answer 1

Answer №1

It seems like the solution is to make sure you use the pipe() function to direct your result to the correct directory. Here's a code snippet for reference:

var beautify = require('gulp-html-prettify');

gulp.task('templates', function() {
  gulp.src('./lib/*.html')
    .pipe(beautify({indent_char: ' ', indent_size: 2}))
    .pipe(gulp.dest('./lib/'))
});

Answer 2

It seems like the solution is to make sure you use the pipe() function to direct your result to the correct directory. Here's a code snippet for reference:

var beautify = require('gulp-html-prettify');

gulp.task('templates', function() {
  gulp.src('./lib/*.html')
    .pipe(beautify({indent_char: ' ', indent_size: 2}))
    .pipe(gulp.dest('./lib/'))
});

Guide on how to beautify HTML and generate output files in the identical directory as the current one

Answer №1

Similar questions

Is it possible for the UUIDs generated by the uuid package to be identical?

Using webpack to bundle node_modules into your application

Angular cookies may expire, but using the back button always revives them

The dynamic loading of videos through the YouTube API

What is the solution for handling undefined errors that occur when employing d3.select(this) within a Vue methods hook?

What is the best method for displaying a table using a JSON array?

Reading a JSON file using Javascript (JQuery)

Slide your finger upwards to shut down the mobile navbar in bootstrap

Display a close button for every individual item and use JavaScript to conceal the current item

Is there a specific measurement or scale for the dragging feature in jQuery UI draggables?

The hyperlink activation event is malfunctioning

Issue with the useSWR hook causing the DOM not to update correctly due to mutation

Calculating the total of n natural numbers by utilizing a for loop

Load pictures featuring a designated title

In my Node.js/Express.js application, I have a directory that holds various images. Whenever I attempt to view these images via their URL, I encounter a 404 error message

Creating a Dynamic Bar in Your Shiny Application: A Step-by-Step Guide

The function Route.delete() expects a callback function, however, it received an [object Undefined] instead

Encountering limitations in accessing certain object properties with the openweathermap API

Filtering incoming data from a Firestore database: A step-by-step guide

Activate the feature of smooth shading using Three.js