shkuznetsov / gulp-minify-inline Goto Github PK

View Code? Open in Web Editor NEW

28.0 28.0 5.0 95 KB

gulp plugin that minifies inline JS and CSS

License: MIT License

JavaScript 89.27% HTML 10.73%

gulp-minify-inline's People

Contributors

Stargazers

Watchers

Forkers

hivre mtabini radist2s javdl arturparkhisenko

gulp-minify-inline's Issues

New dependency name: uglify-es => terser #1

There has been development on a new fork of uglify-es, which is now called terser and has its own package!

"terser": "^3.7.3"

Please upgrade to our new version.

Problem with non-english characters

It changes all non-english characters(ñçáà, джйё,...) to &xxx; format. Don't you know how to turn it off?

Breaks Php Files?

Hi,

Thanks for writing awesome plugin, it does great job to minifying the inline JS and CSS.
Just one issue I am facing is that if I run php files through it , it will break the php files, one thing I found specially was that it had replaced the <?php with just 'php' ...

Minify ONLY the inline css

Great gulp package! But I only want to minify the <style> tags. Not the <script> tags. I can accomplish this by doing:

  .pipe(minifyInline({
    jsSelector: 'pleasedontminifyscripts'
  }))

How to catch errors?

I got error

undefined:1555
    throw new JS_Parse_Error(message, filename, line, col, pos);
    ^
Error

when running gulp-minify-inline, but I have no idea which line and which file went wrong

Is there any way to catch errors?

Inline minification fails with an EJS tag and a <script> tag

Using an EJS tag with a script tag that contains code causes gulp-minify-inline to destroy the EJS tag.

It turns: <%- include("/partials/head.ejs") %> into <%- include("="" partials="" head.ejs")="" %="">, which is meaningless gibberish (Express throws an error when it tries to parse it).

The mangling doesn't occur if a file only contains <script> tags or EJS tags. It's only when both are present in the same file that the EJS tags are destroyed.

The only gulp task I'm running is minifyInline, so it's definitely being caused by it. Here is my EJS file (renamed to .txt for github) and my gulpfile.

Fully minify HTML?

If you minify the following:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/contentful-ui-extensions-sdk@2/dist/cf-extension.css">
<style>
section {
  border-bottom: 1px solid rgba(0, 0, 0, .2);
  padding-bottom: 2em;
  margin-bottom: 2em;
}
.cf-form-field {
  margin-left: 1em;
}
</style>
</head>
<body>
  <div id="content"></div>
  <script src="https://unpkg.com/contentful-ui-extensions-sdk@2"></script>
</body>
</html>

Produces the following:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/contentful-ui-extensions-sdk@2/dist/cf-extension.css">
<style>section{border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:2em;margin-bottom:2em}.cf-form-field{margin-left:1em}</style>
</head>
<body>
<div id="content"></div>
<script src="https://unpkg.com/contentful-ui-extensions-sdk@2"></script>
</body>
</html>

Instead of:

<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="https://unpkg.com/contentful-ui-extensions-sdk@2/dist/cf-extension.css"><style>section{border-bottom:1px solid rgba(0,0,0,.2);padding-bottom:2em;margin-bottom:2em}.cf-form-field{margin-left:1em}</style></head><body><div id="content"></div><script src="https://unpkg.com/contentful-ui-extensions-sdk@2"></script></body></html>

Is there any configuration option for removing new lines?

UglifyJS2 doesn't work on template literals

See mishoo/UglifyJS#1401

Can't install gulp-minify-inline

Unexpected token < in JSON at position 14102

Throws an error when using ES6 template literals

gulp-minify-inline (v0.2.1) throws an error when using ES6 template literals.

This works fine:

var win = window.open('https://youtu.be/' + this.videoId, '_blank');

This throws an error:

var win = window.open(`https://youtu.be/${this.videoId}`, '_blank');

SyntaxError: Unexpected character '`'
    at JS_Parse_Error.get (eval at <anonymous> (.../node_modules/gulp-minify-inline/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)

It looks like the error comes from uglify-js, which doesn't seem to support ES6 syntax. Shall we switch to uglify-es instead? Do you want me to send a PR?

Cheers!

takes for ever to complete minification

I think there is some import conflict or reference error, it takes forever to complete. Is there any verbose mode when the task is in progress. It will help to get the actual error.

Unminfies my html

Thanks for the plugin. The issue I have is that I'm feeding in html that is already minified though has some inline css and javascript which is not. The plugin minifies the inline css and javascript but unminfies the html! Any ideas on why that's happening? Thanks

Causes 'Uncaught SyntaxError: Unexpected token ILLEGAL'

This is the only js in my <head> that is inside a script tag.

// Add .js class if not using Modernizr
document.documentElement.className = 'js';

// Show :active styles on touch devices
document.addEventListener('touchstart', function(){}, true);

<?php ?> inside HTML tags break.

So it seems this is pin pointed to when gulp minify inline runs for js.

The original code:
PRE MINIFY
<body <?php body_class(); ?>>

GULP MINIFY INLINE
<body <?php="" body_class();="" ?="">>

You can see it adds =""

I don't know how to exactly pin point the pipe to exclude inline tags inside of HTML Tags.
.pipe($.if('*.php', $.minifyInline({ js: false })))
Prevents the issue, but I believe it also does not minify <script> tags.

Anyway to ignore script tags masquerading as templates?

tl;dr Am curious if you have a way of ignoring script tags that aren't really script tags?

tl;
The problem in one of my files is that it is demo code and while I would normally pre-process the templates, it's easier to leave the template in the file (see the example of the handlebar templates here: http://handlebarsjs.com/

Cut and paste the script tag that's not really a script tag:

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

The script tags in my file are pretty much like this (bit different) but they are being passed to uglify JS and they are being processed, and the error breaks the build.

Minify inline JSON

Uglify has a CLI parameter --expr or parser oprion expression for parsing JSON. How should I set up options for gulp-minify-inline so that it invokes Uglify in this JSON mode?

I'm trying to minify HTML file that contains JSON data:

<body>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "http://example.org/blog/",
      "name": "Blog"
    }
  }]
}
</script>
...
</body>

I have tried invoking gulp-minify-inline with options like this:

var options = {
  js: {
      expr: true
  },
  jsSelector: 'script[type="application/ld+json"]'
};

gulp.task('minify', function() {
  gulp.src('src/*.html')
    .pipe(minifyInline(options))
    .pipe(gulp.dest('dest/'))
});

But it fails with JS_Parse_Error probably because the expr option is not passed down to Uglify.

I have tried several versions of the options such as expression: true or parser: {expression: true} but never got it right. Is this supported? What is the correct way to write options for JSON minification?

[email protected] is deprecated

Hi, your package is using a deprecated version of gulp-util.
Please check guidelines: https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
And thanks for the package! 👍

~~I'll try to make a PR now.~~
PR ready ;)