vfk / gulp-html-replace Goto Github PK
View Code? Open in Web Editor NEWReplace build blocks in HTML. Like useref but done right.
License: MIT License
Replace build blocks in HTML. Like useref but done right.
License: MIT License
This might not be the right place to ask this.., but my html blocks
aren't keeping the correct order when running my build task. Do you know the best way to fix this?
Consider the following scenario:
HTML
<!-- build:css -->
<link rel="stylesheet" href="css/zebra.css">
<link rel="stylesheet" href="css/apple.css">
<!-- endbuild -->
GULP FILE (gulpfile.js)
/* HTML
************************************/
gulp.task('html', function() {
return gulp.src(config.htmlin)
.pipe(htmlreplace({
'css': 'css/styles.min.css'
}))
.pipe(htmlmin({
sortAttributes: true,
sortClassName: true,
collapseWhitespace: true
}))
.pipe(gulp.dest(config.dist));
});
/* CSS
************************************/
gulp.task('css', function() {
return gulp.src(config.cssin)
.pipe(sourcemaps.init())
.pipe(autoprefixer({ browsers: ['last 4 versions'], grid: true }))
.pipe(concat(config.cssoutname))
.pipe(cleancss())
.pipe(sourcemaps.write())
.pipe(gulp.dest(config.cssout))
.pipe(browsersync.stream());
});
RESULT (styles.min.css)
.apple{background:red;}.zebra{background:black;color:white;}
I know the problem exists when concatenating the files together..but I'm unsure how to get gulp-html-replace
and gulp-concatenate
to work together.
Hi @VFK,
I use gulp-useref in projects (like https://github.com/Swiip/generator-gulp-angular) and I am not totally happy.
I think migrate to your gulp-html-replace
But can you expose why your plugin is better?
I've basically copy pasted your example but surprisingly it's leaving the html intact.
My gulpfile task:
var build_destino = 'build/';
gulp.task('htmlreplace', ['clean'], function() {
gulp.src('index.html')
.pipe(htmlreplace({
'css': 'css/style.min.css',
'js': 'js/main.min.js'
}))
.pipe(gulp.dest(build_destino));
});
Console output is clean:
[02:23:59] /.../web $ gulp
[02:24:58] Using gulpfile /.../web/gulpfile.js
[02:24:58] Starting 'clean'...
[02:24:58] Finished 'clean' after 13 ms
[02:24:58] Starting 'scripts'...
[02:24:58] Starting 'styles'...
[02:24:58] Starting 'images'...
[02:24:58] Starting 'htmlreplace'...
[02:24:58] Finished 'htmlreplace' after 4.07 ms
[02:24:58] Starting 'minhtml'...
[02:24:58] Finished 'minhtml' after 4.95 ms
[02:24:58] Starting 'resto'...
[02:24:58] Finished 'resto' after 3.78 ms
[02:24:59] Finished 'styles' after 307 ms
[02:24:59] Finished 'scripts' after 614 ms
[02:25:01] gulp-imagemin: Minified 16 images (saved 0 B - 0%)
[02:25:01] Finished 'images' after 2.85 s
[02:25:01] Starting 'default'...
[02:25:01] Finished 'default' after 4.67 μs
[02:25:01] /.../web $
index.html before:
<!-- build:css -->
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/fontface.css" />
<link rel="stylesheet" href="css/estilos.css" />
<!-- endbuild -->
And after:
<!-- build:css -->
<link rel="stylesheet" href="css/foundation.min.css" />
<link rel="stylesheet" href="css/fontface.css" />
<link rel="stylesheet" href="css/estilos.css" />
<!-- endbuild -->
(same with the JS part)
So... any clues? Thanks!
Hi,
I'm trying to add a way to customize "build" and "endbuild" tags inside the parser regexp, so I moved the regexp inside the Parser
constructor and converted the regexp literal to a string:
this.regex = new RegExp("(\\n?)([ \\t]*)(<!--\\s*" + config.tagName + ":(\\w+(?:-\\w+)*)\\s*-->)\\n?([\\s\\S]*?)\\n?(<!--\\s*end" + config.tagName + "\\s*-->)\\n?", "ig");
Inside the regexp I just escaped the "\"
character and concatenated a custom tagname. For some reason the tests fail because the output is different. Since I'm no expert in RegExp, could you please let me know if the regexp above is correct?
The fork is here: https://github.com/lucassp/gulp-html-replace
Thanks!
Hi,
I've encountered an issue with this plugin when piping some "partially" minified.
I'm using jade templating with non-prettified output. The html output is still more than one line because I have some inline javascript that is outputted as is on multiple line (analytics code).
For that reason, we don't get in the special case where you split the lines manually and as a result, the output is mangled and incomplete.
I have removed the linefeed from the google analytics snippet as a workaround for now.
Cheers
In node_modules/gulp-html-replace directory node_modules not created
module.js:471
throw err;
^
Error: Cannot find module '../node_modules/gulp-html-replace/node_modules/clone'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/home/baskovskiy/Рабочий стол/frontend-v2/gulp-tasks/build_version.js:2:15)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
Hi,
It would be nice to have 'options' for the final script file to be able to add 'defer' or 'async' attributes.
More generic, be able to add 'attr'='value' in the script tag.
Thx
Hi,
I was hoping to use gulp-html-replace for updating script embeds with hashed filenames for cache control. But now I see, that it removes the block tags after replace, which prevents me from replacing it again and again.
It would be awesome, if I could have a flag, that tells your script to not remove the block tags, so that I could replace over and over again, whenever i create a new hash filename.
I have several HTML files i'm looping through in order to update my 'source' files with my 'dist' files. An example would be /indext.hml
linking to <script src="js/main.js>
and /pages/foo.html
linking to the same file via <script src="../js/main.js">
.
Given the relative paths, setting a static option value doesn't work. I could set a root value, but this is actually a boilerplate build system that is shared, so that makes it a tougher sell. Here's my task, didn't know if you had any ideas on how it would be possible to pass the base path in...
var gulp = require('gulp'),
htmlreplace = require('gulp-html-replace'),
htmlFiles = ['./**/*.html'];
gulp.task('html', function() {
return gulp
.src(htmlFiles , { cwd: './src', base: './src' })
.pipe(htmlreplace({
'css-vendor': relative.path + 'vendor.css',
'css-app': relative.path + 'app.css',
'js-vendor': relative.path + 'vendor.js',
'js-app': relative.path + 'app.js'
}))
.pipe(gulp.dest('./dist'));
Hi,
This is kind of related to issue #1. We are using RequireJS on a website and need to modify 2 attributes in our script
tag: data-main
and src
.
Would something like this fit in your vision of the plugin (allowing to pass an array or replacement when using a template) ?
.pipe(htmlreplace({
'rjs': {
src: [data-main.js', 'require-src.js'],
tpl: '<script data-main="%1$s" src="%2$s"></script>'
}
}))
Cheers
I have this case where I'm generating a stylesheet from SASS and want to inject it into the page: I'm inline a subset of the main stylesheet for rendering optimisation (above the fold).
Right now, gulp-html-replace
supports string or file path as a replacement but it would be nice for my use case, and any input actually, if it could be delivered through a stream of Vinyl files.
See bellow. The main stream would "wait" internally for the cssInline
input stream to end then continue.
gulp.src('app/index.html', {base: 'app'})
.pipe(htmlreplace({
cssInline: {
src: gulp.src('inline.scss').pipe(sass()),
tpl: '<style>%s</style>'
}
}))
When using the multiple tag replacement feature, the source tags array gets put into the first placeholder.
Ex. Code:
gulp.task('statics-admin', function () {
return gulp.src(['src/admin/index.cshtml'])
.pipe(htmlreplace({
js: {
src: [['ui/dist/admin/main.js', 'ui/bower_modules/requirejs/require.js']],
tpl: '<script src="%s" data-main="%s"></script>'
}
}))
.pipe(gulp.dest('./dist/admin'));
});
With the initial script tag looking like:
< script src="ui/bower_modules/requirejs/require.js" data-main="ui/src/admin/main"></script>
The output for the script tag becomes:
< script src="ui/dist/admin/main.js,ui/bower_modules/requirejs/require.js" data-main="%s"></script>
Based off of the documentation for util.format, it is expecting a format string, and then a list of parameters. Ex.
util.format('%s:%s', 'foo', 'bar', 'baz'); // 'foo:bar baz'
Inside lib/block.js, the following line is executed:
if (this.template) {
return this.indent + util.format(this.template, replacement);
}
With replacement being an array of an array, we get incorrect results, because util.format is expecting another variable after replacement.
I use gulp-html-replace in a small static page. It consists of 7 different pages with a bootstrap navigation.
I want to set the CSS class "active" for different HTML pages in the appropriate navigation and load the entire navigation from a template like I did with the footer.
gulp.task('buildHTML', function() {
gulp.src('src/html/*.html')
.pipe(htmlreplace({
footer: gulp.src('src/html/parts/footer.part.html'),
js: {
src: ['jquery-3.2.1.min.js', 'bootstrap.min.js'],
tpl: '<script type="text/javascript" src="/js/%s"></script>'
}
}))
.pipe(gulp.dest(rootDir + '/'));
});
Is this possible?
Hello,
When launching the build the path is not replaced by .min.
I tried several ways following the documentation nothing works
My gulp
gulp.task('replace', function () {
return gulp.src(['*.html'])
.pipe(htmlReplace({
css: {
src: [['assets/css/app.min.css', 'assets/css/owl.carousel.min.css', 'assets/css/all.min.css']],
tpl: '<link rel="preload" href="%s" as="style" onload="this.rel=\'stylesheet\'">'
},
})).pipe(gulp.dest('./dist'));
});
gulp.task("default", gulp.series('clean', 'replace', 'build'));
<!-- build:css -->
<link rel="preload" href="assets/css/app.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/owl.carousel.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/all.css" as="style" onload="this.rel='stylesheet'">
<!-- endbuild -->
After build :
<!-- build:css -->
<link rel="preload" href="assets/css/app.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/owl.carousel.css" as="style" onload="this.rel='stylesheet'">
<link rel="preload" href="assets/css/all.css" as="style" onload="this.rel='stylesheet'">
<!-- endbuild -->`
Thank you for your help
Thanks for the clever tool!
I'm using extract-text-webpack-plugin to generate a manifest file:
{
"app.css": "app.bundle.8974f7041fb37318bbde0e39d3c9e2d1.css",
"app.css.map": "app.bundle.8974f7041fb37318bbde0e39d3c9e2d1.css.map",
"app.js": "app.bundle.fa373866e4cc4051adb3.js",
"app.js.map": "app.bundle.fa373866e4cc4051adb3.js.map"
}
to pipe into gulp-html-replace like this:
const manifest = require('./manifest.json')
gulp
.src('.app/index.html')
.pipe(gulpHtmlReplace(manifest))
.pipe(gulp.dest('dist/index.html'))
But it seems it doesn't like the .
's in the filenames because my index.html never changes:
<!-- build:app.css -->
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:app.js -->
<script src="app.js"></script>
<!-- endbuild -->
However, if I manually remove the "." from the manifest filenames and the task names in the html (so that they both read like <!-- build:appcss -->
) then it does its job:
<link rel="stylesheet" href="app.bundle.8974f7041fb37318bbde0e39d3c9e2d1.css">
<script src="app.bundle.fa373866e4cc4051adb3.js"></script>
I couldn't see anything in the readme mentioning special characters. Is this a bug?
As a workaround I could always strip special characters out of the generated manifest but this isn't ideal since I don't know what could break the tasks besides just periods.
Thanks for any help.
How should I go about intercepting the contents of blocks found by this plugin, so that I can (for example) run a concat
task on all scripts found in a block?
Hi,
Is it possible to just replace the file name instead replace the entire path?
I have issue that the path is dynamically added.
Example:
<!-- build:app-css -->
<link rel="stylesheet" href="{% if rootPath %}{{ rootPath }}{% endif %}{% if subPath %}{{ subPath }}{% endif %}css/app.css">
<!-- endbuild -->
Is there a way to just replace the file name?
After run build, i only need to rename the 'app.css' with suffix 'app.min.css' without changing the path and directory.
plugin unexpectedly replaces forward slashes:
<!-- build:js -->
<script src="/assets/scripts/lib/require/require.js" data-main="/assets/scripts/main"></script>
<!-- endbuild -->
gulp.src('index.html')
.pipe(htmlreplace({
js: {
src: '/assets/scripts/main.js',
tpl: '<script="%s">'
}
}))
.pipe(chmod(777))
.pipe(gulp.dest(paths.html.dest));
results in
<script=" assets scripts main.js">
Hi,
when I have a file, that generally has LF line endings, but for some reason, there
are also some CRLF line endings, then htmlreplace does not replace anything in the file.
I would like to run htmlReplace twice rather than once. After the first run, it seems like the comments are removed
gulp-html-replace/lib/block.js
Line 24 in 549aaaa
Let me your thoughts and I am willing to make a PR.
htmlReplace({
config: {
src: '',
tpl: '<!-- build:config --><!-- endbuild -->'
}
})
Image i have this index.html
<!-- build:dev -->
<script src=angular.js></script>
<script src=app.js></script>
<!--endbuild -->
<!-- build:prod -->
<!-- <script src=bundle.js></script> -->
<!--endbuild -->
it would be nice if i can have a task to specify to comment out the section of build dev and uncomment the section of build prod
so the result would be:
<!-- build:dev -->
<!-- <script src=angular.js></script> -->
<!-- <script src=app.js></script> -->
<!--endbuild -->
<!-- build:prod -->
<script src=bundle.js></script>
<!--endbuild -->
What do you guys think?
In Jetbrains IDE WebStorm, replacing content and keeping the blocks seems to add a newline under the blocks when the content is changed.
gulp.task('prodBaseUrl', function(){
gulp.src('index.html')
.pipe(htmlReplace(
{
base:{
src: 'https://myprodurl.com/index.html',
tpl: '<base href="%s" />'
}
},
{
keepBlockTags: true
})
)
.pipe(gulp.dest('./'));
});
after a couple of transformations, my index.html goes from this
<!-- build:base -->
<base href="https://myprodurl.com/index.html" />
<!-- endbuild -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css'>
to this
<!-- build:base -->
<base href="https://myprodurl.com/index.html" />
<!-- endbuild -->
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans' type='text/css'>
With gulp-userref I can concat script files into one, minify the result and replace the script tags with the new minified script. I can't see how that is possible in gulp-html-replace - is it?
OTH gulp-html-replace will let me replace a block with something I specify and gulp-userref doesn't do this.
I need to be able to perform both of these tasks.
Thanks for very useful gulp plugin.
I have this code...
return gulp.src('app/*.html')
.pipe($.htmlReplace({
vulcanized: {
src: 'elements/elements.vulcanized.html',
tpl: '<link rel="import" href="%s">'
}
}))
.pipe(gulp.dest('dist'));
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- endbuild -->
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endbuild-->
</head>
<body class="polymer-theme" unresolved>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
After
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- build:js bower_components/webcomponentsjs/webcomponents.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<!-- build:vulcanized elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
</head>
<body class="polymer-theme" unresolved>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<title><!-- @build:<name> --></title>
Hey,
I tring to include all js files in folder and subfolders.
htmlreplace({
js: {
src: '/dir/*/.js',
tpl: '<script src="%s"></script>'
}
})
What the way to do that?
Thanks,
Pavel
Not as much of an issue as a feature request but can it check if the file is html and not attempt the operation if not.
Hi,
In my development workflow i want to be able to see all my javascript files, and i don't want to list them all.
Is it possible to support wildcards in the files array?
cumps ;)
When using GHR with options keepUnassigned
and keepBlockTags
, every time I run the plugin, a newline is added below the content, but above the 'endbuild' comment.
For example:
<!-- build:icon -->
<link rel="shortcut icon"
href="../assets/favicon64.png" />
<!-- endbuild -->
<link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400'
rel='stylesheet'
type='text/css'>
After a few runs, I get this:
<!-- build:icon -->
<link rel="shortcut icon"
href="../assets/favicon64.png" />
<!-- endbuild -->
<link href='https://fonts.googleapis.com/css?family=Inconsolata|Open+Sans:300,400'
rel='stylesheet'
type='text/css'>
This is very similar to #42 but here the newline is getting added before the closing comment, rather than below.
By the way, I tried debugging this issue, and what I noticed is that because during this particular run of the plugin, the icon
block didn't have any matching task in the config and therefore no replacements
, the Block class is returning originalContent
, and since it already has a newline, join
ing that with the beginTag
and the endTag
is what is adding extra linefeeds. I was able to fix this locally by changing:
if (!this.replacements.length) {
return this.config.keepUnassigned ? [this.originalContent] : [];
}
to:
if (!this.replacements.length) {
return this.config.keepUnassigned ? [this.indent + this.originalContent.trim()] : [];
}
I would like to select files through this way :
gulp.src('./src/index.html')
.pipe(g.htmlReplace({
js: './src/**/*.js'
}))
but the file just like this :
<script src="./src/**/*.js"></script>
what I want is to replace all the matching files, is it possible?
thanks.
I've created a branch that allows extended substitution codes in a template - right now only %f and %e for the current filename (without extension) and extension.
htmlreplace({
tag: {
src: '',
tpl: '<script src="%f.min.js"></script>'
}
}
If the file containing <!-- build:tag -->
was named xyzzy.html then <script src="xyzzy.min.js"></script>
would be inserted into the file. All the normal options for src:
will work in the same build tag and the template can include %s
as well to handle the normal options.
The mechanism could be extended to insert timestamps or almost any bit of information. With some more work it could be extended further to let the user provide functions to supply information to be inserted.
If you're interested in checking it out I can push my changes to a branch. Or I could just send the zipped code. Let me know. I haven't updated the README.md yet; if you'd like to integrate the changes I will.
Thanks for putting this together. It's been great for me to learn more about how a gulp extension works.
Is there any way to use jade comments (double forward slashes) instead of HTML comments to denote build blocks?
So instead of
<!-- build:js -->
<!-- endbuild -->
can I use
//build:js
//endbuild
I generate html with build comments, but after replace my html is empty
I have bunch of html pages which have 1 or more link tags. Im not sure from you readme if the following situation is possible with your plugin:
<link rel="stylesheet" href="dist/css/style.css/>
<link rel="stylesheet" href="dist/css/style2.css/>
to
<link rel="stylesheet" href="css/style.css/>
<link rel="stylesheet" href="css/style2.css/>```
Not working for me at all.
It is just deleting everything in index.html file, starting from the part that have to be modified:
So this part:
<!-- build:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="js/app.js"></script>
<!-- endbuild -->
And everything bellow it disappears.
Here is my gulp task.
gulp.task('htmR', function() {
gulp.src('app/index.html')
.pipe(htmlreplace({
js: 'js/bundleB.min.js'
}))
.pipe(gulp.dest('app/'));
});
Is it compatible with node 0.10?
Hello
is it possible to define the root folder with resolvePaths ?
My problem is that my root folder is a sub level to my gulpfile.js file
Exemple :
|-root
|--dist
|---subfolder
|---css
|---js
|--- index.html
|--node_modules
|--src
|---subfolder
|---sass
|---js
|--- index.twig
|--gulpfile.js
Thank you
Hi, so I have the following gulpfile:
var gulp = require("gulp");
var htmlreplace = require("gulp-html-replace");
gulp.task("build", function () {
return gulp.src("test.html")
.pipe(htmlreplace({
"test-content": ""
}))
.pipe(gulp.dest("dist"));
});
and this html file:
<html>
<body>
main content
<!-- build:test-content -->
test content here
<!-- endbuild -->
<!-- build:prod-content -->
prod content here
<!-- endbuild -->
</body>
</html>
when i run the gulp task i get the following....
<html>
<body>
main content
</body>
</html>
....the content within the "build:prod-content" block is being removed as well even though i have not asked the gulp task to touch it. Why is this happening and is there a way around this?
Im using v1.5.4, gulp v3.9.0
Many thanks
I had to add <!DOCTYPE html>
to my html to get this module not completely wang the output. This seems like a bug.
I have two html files that needs to be processed with similar blocks.
My gulpfile task:
//process view files - fix paths
gulp.task('process-view', function () {
return gulp.src([
'./index.html',
'./admin.html'
])
.pipe(htmlreplace({
css: 'assets/style.min.css',
js: {
src: [['js/context.min.js', 'js/require.js']],
tpl: '<script data-main="%s" src="%s"></script>'
}
}))
.pipe(gulp.dest('./dist/views'));
});
My HTML(s) all look like:
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- build:css -->
<link href="../assets/font-awesome.css" rel="stylesheet" />
<link href="../assets/pnotify.custom.min.css" rel="stylesheet" />
<!-- endbuild -->
<!-- build:js -->
<script src="../lib/jquery-2.1.3.min.js"></script>
<script data-main="../js/bootstrapper" src="../lib/require.js"></script>
<!-- endbuild -->
</head>
<body>
</body>
</html>
The problem lies with the second source file (./admin.html
).
The output (NOTE: line-breaks were removed):
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="assets/style.min.css">
<script data-main="<script data-main="%s" src="%s"></script>" src="js/context.min.js"></script> js/require.js
</head>
<body>
</body>
</html>
Please suggest a workaround for this.
Would be awesome to have the option to add Clousre for manipulating the data before replaceing it completely.
htmlreplace({'replace': 'test'}, function(data) {
// data.manipulate();
})
To support parsing useref blocks ie.
<!-- build:css combined/style.css -->
regex could become:
var regex = /(\n?)([ \t]*)(<!--\s*build:(\w+(?:-\w+)*)\s+[^-]*\s*-->)\n?([\s\S]*?)\n?(<!--\s*endbuild\s*-->)\n?/ig;
I need html replacement to work aside useref.
I possible I'd like to configure the blocks in html and feed only the contained scripts for example to the uglify plugin. Is this possible?
I have the following template:
<!-- Hotjar Tracking Code -->
<script>
(function (h, o, t, j, a, r) {
h.hj =
h.hj ||
function () {
(h.hj.q = h.hj.q || []).push(arguments);
};
h._hjSettings = { hjid: '%HJID%', hjsv: '%HJSV%' };
a = o.getElementsByTagName('head')[0];
r = o.createElement('script');
r.async = 1;
r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
a.appendChild(r);
})(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
</script>
And I was using this plugin like so:
function createCopyHTMLTask(env) {
return gulp
.src(html, { base: './' })
.pipe(
gulpHtmlReplace({
hotJar: fs.readFileSync(hotJarTemplatePath, 'utf-8')
}),
)
.pipe(gulp.dest(distPath));
}
And because of this logic:
https://github.com/VFK/gulp-html-replace/blob/HEAD/lib/block.js#L65-L69
My script was added like this:
<script src="<!-- Hotjar Tracking Code --> <script> (function (h, o, t, j, a, r) { h.hj =...
Which is obviously not right
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.