CODEWITHSUNDEEP
gulp
klewis
klewis

Reputation: 8350

Gulp - Remove sourcemap comment string from HTML file

I have generated a copy of a css file, changed the copy's extension from .css to .html, and also added <style> elements to wrap around the css rules. The following is the result...I know this all sounds irrational, but this is the an "intentional" format I need for a specific Google application.

The following is the copied file, which is now an HTML file called page-css.html

<style>
html body {
  border: solid 1rem blue;
}
html body .form-row {
  margin-bottom: 15px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBhZ2UtY3NzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0k7RUFDSTs7QUFFQTtFQUNJIiwiZmlsZSI6InBhZ2UtY3NzLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImh0bWwge1xyXG4gICAgYm9keSB7XHJcbiAgICAgICAgYm9yZGVyOiBzb2xpZCAxcmVtIGJsdWU7XHJcblxyXG4gICAgICAgIC5mb3JtLXJvdyB7XHJcbiAgICAgICAgICAgIG1hcmdpbi1ib3R0b206IDE1cHg7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG59Il19 */
</style>

How to can I use Gulp to remove that entire sourcemap string from that file so that its gone?

I have tried...

all in similar fashions...


const htmlmin = require('gulp-htmlmin');
const decomment = require('gulp-decomment');
const replace = require('gulp-string-replace');
const strip = require('gulp-strip-comments');

...

  //example 1
  .pipe(decomment({trim: true}))
  //example 2
  .pipe(htmlmin({ removeComments: true }))
  //example 3
  .pipe(strip())

...but none of these packages work for replacing/removing that entire sourcemap line...

I thought about using gulp-string-replace but I can't find any learning points on how to remove special characters and anything in between it. (e.g. /*#, *, */, ' ').

Below is my attempt via gulp to complete this process. But even with gulp-replace (as greplace below), it does not remove the sourcemap line...

Full Gulp Code Example




function genCSS(done) {
  return (
    src(paths.styles.src)
      .pipe(gulpif(!GPREP, sourcemaps.init({})))
      .pipe(sass().on("error", sass.logError))
      .pipe(
        gulpif(
          !GPREP, sourcemaps.write({
            addComment: true,
          })
        )
      )
      //CSS FILE WITH ITS SOURCEMAP IS READY FOR LOCAL DEV PURPOSES
      .pipe(dest(paths.styles.dest))

      //BEGIN THE COPIED/CONVERTED HTML FILE FOR GOOGLE APP PURPOSES
      .pipe(
        rename(function (path) {
          if (path.basename === "page-css") {
            path.extname = ".html";
          }
        })
      )
      .pipe(header("<style>\n"))
      .pipe(footer("</style>\n"))
      //ATTEMPTING TO REMOVE THE SOURCEMAP - BUT IT DOES NOT WORK...
      .pipe(greplace(/\/\*# sourceMappingURL[^\n]+\n/gm,''))
      //STORE THE FILE IN A CLASP LOCATION TO PUSH UP TO GOOGLE
      .pipe(dest(paths.styles.apps))
      .pipe(msync.stream())
  );
  done();
}

Many thanks on this learning process!

Upvotes: 0

Views: 57

Answers (1)

Sean
Sean

Reputation: 8032

You could use gulp-replace and RegEx if you're confident the formatting is consistent.

const replace = require('gulp-replace')

...

.pipe(replace(/\/\*# sourceMappingURL[^\n]+\n/gm,''))

...

Upvotes: 1

Related Questions