I have created a Gulp plugin called php-include-html, which scans php files in Gulp and processes include and require statements to inline HTML snippets.
The snippet of the gulpfile looks like this...
var gulp = require("gulp");
var pump = require("pump");
var phpinc = require("php-include-html");
gulp.task("php",function(cb) {
pump([
gulp.src("*.php"),
phpinc({verbose:true}),
gulp.dest("build")
],cb);
});
This is a snippet from the php file before processing...
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Emma Malik's Official Website - Legal</title>
And here's the same snippet after processing...
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Emma Malik&s Official Website - Legal</title>
As you can see, the apostrophe has been HTML encoded. However, it doesn't seem to be all ampersands, just some of them, and some other characters as well, such as > to > but again, not all of them.
All the way through my plugin, this remains an apostrophe, it seems to be the gulp.dest rewriting the file which somehow converts it.
Things I've tried...
Stripping the UTF-8 BOM from the source file (strip-bom and
strip-bom-buf)
Adding the UTF-8 BOM to the destination file (gulp-header)
Using string manipulation instead of String.replace
Converting the destination contents to UTF-8 (gulp-convert-encoding)
Decoding after my plugin before gulp.dest (gulp-html-entities)
Using vinyl-file
Has anyone seen anything like this before, or know how to fix it?
False alarm, it turns out that it is actually the "gulp-sri-hash" plugin, which runs after mine, which is doing this. I need to investigate further as to what exactly is causing this, but at least I've figured out it's not me!
Related
Using the example in their docs, I created the following:
entry.js:
require('./style.scss');
console.log('The background is pink!')
style.scss:
body {
background: pink;
}
I then run this through browserify: browserify -t sassify entry.js > bundle.js and get this:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
require('./style.scss');
console.log('The background is pink!')
},{"./style.scss":2}],2:[function(require,module,exports){
module.exports = "body {\n background: pink; }\n";
},{}]},{},[1]);
I can see my css in there! But when I create a minimal html that loads the bundle, I see 'The background is pink!' in the console - but it stubbornly remains white. Am I forgetting anything? What does it take for the styles to actually show up?
index.html:
<html>
<body>
<h1>Pink!</h1>
</body>
<script src='bundle.js'></script>
</html>
In the sassify github page it says Currently breaks in some cases on node 0.11.x with latest version (2.0.1) of node-sass as documented in node-sass issue #550. This is also the reason why node 0.11 is currently not supported. Use at your own risk (though no actual risk is involved, it might just not work).
I too couldn't get it to work. As he says, it doesn't break anything. It just doesn't do anything at all.
You might want to try cody-greene's scssify. All you need is: npm i scssify -D
And in place of browserify -t sassify entry.js > bundle.js you need browserify -t scssify entry.js > bundle.js
You just need to make sure you use sassify#4.0.0
I have the migration plugin installed, can can see by doing a plugin -l command that it is installed.
When I hit it, however: http://localhost:9200/_plugin/migration
The response is rather... thin:
<head><meta http-equiv="refresh" content="0; URL=/_plugin/migration/></head>
What am I missing?
Ahhh, you need the trailing backslash...
http://localhost:9200/_plugin/migration/
Also, curl doesn't work well for it, use a browser.
The problem is that the docs here:
https://github.com/elastic/elasticsearch-migration
Are missing the trailing backslash...
How can you execute gradle processResources on files that contain $ characters without escaping the $ in the files?
I have some static html files located the /resources/static folder as suggested by the Spring Boot reference docs. However, when I try to execute gradle processResources, Gradle throws an exception
Caused by: org.gradle.api.GradleException:
Could not copy file '[...]/src/main/resources/static/dollar.html'
to '[...]/build/resources/main/static/dollar.html'.
[...]
Caused by: groovy.lang.GroovyRuntimeException:
Failed to parse template script (your template may contain an error
or be trying to use expressions not currently supported): startup failed:
SimpleTemplateScript7.groovy: 1: illegal string body character after dollar sign;
solution: either escape a literal dollar sign "\$5"
or bracket the value expression "${5}" # line 1, column 10.
out.print("""<!DOCTYPE html>
As far as I understand, the problem occurs because there is a $ character in one of the static files and $ is a reserved character for expressions when processing resources.
Proposed solutions:
Yes, escaping the $ with \$ (as suggested in the stacktrace) works, but I rather not change the html file if other options are available.
Trying to exclude the file from process resources causes the problem to disappear, but has the side effect of also excluding the file from being copied:
configure(tasks.processResources) {
exclude 'static/dollar.html'
}
I have also seen that you can filter processed resources. I guess that this is what I would like to do but I have not found a "ignore $ filter", is there any?
configure(tasks.processResources) {
filesMatching('static/dollar.html') {
filter = ???
}
}
Other suggestions?
The dollar.html file that causes the problem can be simplified to:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div>Dollar $</div>
</body>
JB Nizet's comment provided valuable insight. The problem was indeed due to the usage of expand() (although not immediately visible since it was located in an allProjects() script in the parent project). The reason why expand() was added in the first place was the desire to populate the info.build.* properties in the application.properties file (so that they are available through Spring Boot's info endpoint).
Solution: Use filesMatching() to only expand() selected files. The following snippet solved the specific problem related to Spring Boot:
processResources {
filesMatching('application.properties') {
expand(project.properties)
}
}
Just for future reference:
You could write the $ also as HTML entity: $
How can I parse the version number of Firefox programatically.
So, I don't have to visit the page every time.
All I would have to do is run the script, and it will give me the latest version.
http://download.cdn.mozilla.net/pub/mozilla.org/firefox/releases/latest/update/win32/en-US/
The file will always have ".complete.mar" in it. It's the only file with the word "complete" under this directory.
How can I parse the version "40.0.2" from it.
Download the latest release
The simple answer is Mozilla Release Engineering already provides a way to download the latest version. See https://ftp.mozilla.org/pub/firefox/releases/latest/README.txt
For example, I want to download the latest Linux 64-bit US English version of Firefox. So I would:
curl -Lo firefox.tar.bz2 'https://download.mozilla.org/?product=firefox-latest&os=linux64&lang=en-US'
tar -xjf firefox.tar.bz2
cd firefox
./firefox --version
Mind you those are stable releases and not RC or nightly. For those see release notes in the appropriate subfolder.
Notes:
The curl command URL is surrounded by single quotes (') to avoid bash interpreting the ampersands (&).
You would likely want to add your downloaded Firefox at the beginning of the $PATH (or %PATH% in Windows) environment variable.
Get latest release version number
To get the latest version number without downloading the archive you would use the HTTP HEAD method (curl -I option). Example,
curl -fI 'https://download.mozilla.org/?product=firefox-latest&os=linux64&lang=en-US' | grep -o 'firefox-[0-9.]\+[0-9]'
which will return something like firefox-67.0.4.
Because I have to know the lastest version numbers of many applications, I've created the online service called vergrabber which provides that information in json.
You may try this free service at http://vergrabber.kingu.pl/vergrabber.json
You are going to run into problems because the data you want to check is not within the same domain.
You can however using something like node webkit(now nwjs) to get pass the browser limitation.
To start download the nodewebkit files for your operating system from the following link:
http://nwjs.io/
Extract the contents.
Download JQuery and place it in the extracted folder(rename the file jquery.js).
create a new text file, add the following contents and save it as package.json
package.json contents:
{
"main": "index.html",
"name": "firefoxversion",
"version": "1",
"window": {
"title": "latest firefox version",
"icon": "link.png",
"toolbar": true,
"width": 800,
"height":600
}
}
Create a file name index.html and save the following contents:
index.html contents:
<html>
<head>
<title>Latest Firefox Version</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="result"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Next create a file named main.js and save the following contents:
main.js contents:
var url ="http://download.cdn.mozilla.net/pub/mozilla.org/firefox/releases/latest/update/win32/en-US/";
var version;
$.get(url,function(data){//begin function
$(data).contents().find("a").each(function(){//begin each function
//create an array to hold the hmtl
var html = [];
if($(this).attr("href").indexOf("complete.mar" !== -1 )){//begin if then
version = $(this).attr("href").split(".c");
//start building your html to output
html.push("Download the latest Firefox Version " + version[0] + " below:<br>");
//add the download button
html.push("<input type ='button' id ='firefox-latest' value = 'Download Firefox'>");
//display the html in the #result div
$("#result").html(html.join(""));
}//end if then
});//end each function
});//end function
//on click event for #firefox-latest
$(document).on("click","#firefox-latest",function(){//begin on click event
//change the window location to the file for the latest firefox version
window.location.href = url + version[0] + ".complete.mar";
});//end on click event
Lastly click on the nw.exe icon inside of the folder you extracted earlier
and you should see the latest version number of firefox.
Please tell me how to create a basic Jekyll site. I am especially confused about the file _config.yml and the YAML front matter.
I don't quite understand the wording of you questions, but I'll take a shot. I'm guessing you are referring to one of two things. Either the config file or the YAML front matter. Whichever one, see below for a basic primer to get a jekyll site up and running. It shows the usage of both in context.
In an empty directory, create the following:
A new directory named _layouts.
A new directory named _posts.
A new directory named _site.
A file named index.md with the following content:
---
layout: default
---
# My Jekyll site
Welcome to my Jekyll site
(Note: the "layout: default" surrounded by the two lines of dashes is the YAML Front Matter. Specifying "default" means that jekyll will use the "default.html" file in the _layouts directory listed below.)
A file named _config.yml with the following default content:
safe: false
auto: false
server: false
server_port: 4000
base-url: /
source: .
destination: ./_site
plugins: ./_plugins
future: true
lsi: false
pygments: false
markdown: maruku
permalink: date
maruku:
use_tex: false
use_divs: false
png_engine: blahtex
png_dir: images/latex
png_url: /images/latex
rdiscount:
extensions: []
kramdown:
auto_ids: true,
footnote_nr: 1
entity_output: as_char
toc_levels: 1..6
use_coderay: false
coderay:
coderay_wrap: div
coderay_line_numbers: inline
coderay_line_numbers_start: 1
coderay_tab_width: 4
coderay_bold_every: 10
coderay_css: style
There are two more files you'll want to create for the example,
Inside the "_layouts" directory, a file named default.html with the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Jekyll Site</title>
</head>
<body>
<!-- This will be replaced with your content -->
{{ content }}
</body>
</html>
Inside the "_posts" directory, a file named 2011-07-29-my-first-jekyll-post.md with the following:
---
layout: default
---
# My First Jekyll Post
The quick brown fox jumps over the lazy dog.
(Note: Once again, the "layout: default" surrounded by the two lines of dashes is the YAML Front Matter and specifies that "default.html" will be used for the template.)
At this point the directory structure should look like this:
./_config.yml
./_layouts
./_posts
./_posts/2011-07-29-my-first-jekyll-post.md
./_site
./index.md
Once all that is setup, from the command line go to the directory that has the index.md file in it and run jekyll. You should see a quick report like:
Configuration from /some-path/_config.yml
Building site: . -> ./_site
Successfully generated site: . -> ./_site
Two output file will have been created:
./_site/index.html
./_site/2011/07/29/my-first-jekyll-post.html
Those files correspond to the two markdown files after the were transformed to HTML and dropped into the default.html wrapper replacing the "{{ content }}" string.
That should get your started with the basics.