gulp.task('pug-general', function(){
gulp.src('bundles/pug/*.pug')
.pipe(pug({
outputStyle: 'compact'
}))
.pipe(gulp.dest('page/'));
});
I've been looking for a way to change output style for pug templates because, when it compiles it outputs a single line html file. Although I've written outputStyle: 'compact' I was just trying to see if it worked.
Pug has a "pretty" option. However it's set to false by default so if you would like more white space collapsed, you might like to try this gulp package https://github.com/jonschlinkert/gulp-htmlmin
Related
I'm trying to build a IIFE (immediately-invoked function expression) bundle using Rollup.
I would like to bundle all together my JS, CSS, and then some HTML which the Javascript depends on. Check this image to get an idea:
Is there a way to tell Rollup that my input (entry point) is seguro-vida-hipoteca.js, and have this file import my SCSS and HTML so it will be automatically injected when somebody uses my library?
That would be, the resulting CSS in the head, and the HTML to some div that I would expect to exist in the dom, or just at the end of body.
Is there a way to tell Rollup that my input (entry point) is seguro-vida-hipoteca.js?
Sure, that's what the input option is for.
Injecting Sass in the head is easily accomplishable with plugins such as rollup-plugin-postcss:
// rollup.config.js
import postcss from 'rollup-plugin-postcss';
export default {
// ...
plugins: [
postcss(),
],
}
import './style.scss'; // Now each stylesheet you import will
// be injected to <head>
About injecting/appending html, that is something you would normally do in your code and not through a plugin, although you can take advantage of Rollup to load template.html as a string (for example by using rollup-plugin-html):
import html from "rollup-plugin-html";
export default {
// ...
plugins: [
html({
include: "**/*.html",
}),
],
}
import template from './template.html';
document.querySelector('#mydiv').innerHTML = template;
Side note
This seems to be a good use case for WebComponents. More info here.
I have the code backend using Node.js and Front end in HTML. I tried to get the image stored in mongo to front end. But in HTML it doesn't shows the image. But when I paste the binary data of image in img src tag it works. Help plz.
index.js
function loadImages() {
let isbn=''
let imgSource=''
if (CURRENT_URL.includes('#')) {
isbn = CURRENT_URL.substr(CURRENT_URL.indexOf('#') + 1,
CURRENT_URL.length);
console.log(isbn);
}
axios.get(baseUrlLocal + '/book/image/'+isbn)
.then(response => {
console.log(response.data)
document.getElementById('imgSource')
.setAttribute(
'src', 'data:image/png;base64,' +
btoa(unescape(encodeURIComponent(response.data))) +"'"
);
})
.catch(err => {
console.log(err);
});
}
HTML
<div class="card-body" id="image-src">
<img id="imgSource" src="" alt="Red dot" />
</div>
I don't think you can do this in node.js
document.getElementById('imgSource')
.setAttribute(
'src', 'data:image/png;base64,' +
btoa(unescape(encodeURIComponent(response.data))) +"'"
);
document object is available in your browser mate. In node js you can't just use this like that. If you want to render the image you have processed, then you might want to look for a front end template engine
like
ejs
pug
handlebars
since ejs's syntax is a little bit annoying and can be very confusing sometimes you can use an alternative like handlebars take a look at here
handle bars is like a template engine. If you are familiar with Laravel or ASP.NET's Razor blade or Angular's string interpolation techniques this is very much like that so
go to your shell and install handlebars like this
npm install --save handlebars
since this is a little too much of a topic to discuss as an answer I'll just provide you with this link a tutorial on how to install and use handle bars. try that mate you will be able to achieve what you are looking for.. Cheers ...
I worked on a little startpage for my browser. Now I would like to make some changes to it, so it updates the index.html file depending on a text file, when this got changed. What whould be an efficiant way to solve this problem?
My approach would be to create a text file and read line by line from it and update the html file. In the text file I would store the links shown on my startpage - I thought maybe something like this:
|cat_media
https://mailbox.org,mail
https://netflix.com,netflix
...
http://crunchyroll.com,crunchy
https://jott-uh-be.bandcamp.com,bc
|cat_social
https://pr0gramm.com,pr0
https://stackoverflow.com,stackoverflow
https://twitter.com,twitter
https://instagram.com,insta
When the line starts with the symbol |, it creates a new <div> with the class category and the string in that line (e.G. class= 'category cat_media'). Otherwise, if the line starts with http, it will add a href-link (e.G. <a href='https://mailbox.org'>mail</a>) to the html-code.
I got this website hosted on my raspberry pi with nginx and uploaded it to my github pages.
You don't have to update the index.html file.
You can create dynamic content.
You can use PHP:
You can learn it here:
https://www.w3schools.com/php/default.asp
And here is how to read a file
http://php.net/manual/en/function.fread.php
Or if you cant use PHP you can use Javascript:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(() => {
$.ajax({
url:'your-config-file.xt',
success: function (data){
console.log(data); //this is the config file. just for loop it and modify the dom
}
});
});
</script>
But your config file must contains the string how the links should be shown.
For example:
|catergory one
yt: https://www.youtube.com
Here is the task :
gulp.task('process-css', function(){
return gulp.src('./app/css/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([postcssMixins, postcssCalc, postcssSimpleVars, postcssColor, postcssExtend, postcssNesting, autoprefixer]))
.on('error', function(errorHandler){
console.log(errorHandler.toString());
this.emit('end');
})
.pipe(concatCSS('style.css'))
.pipe(gulp.dest('./app/css/'));
});
I'm using the standard autoprefixer plugin (not gulp-autoprefixer, which basically did the same thing on the last task-runner I was using), but it only adds the -webkit- prefix. I tried it with properties like clip-path and display: flex, but it doesn't add the vendor prefixes. I tried changing the line to
.pipe(postcss([
postcssMixins, postcssCalc, postcssSimpleVars,
postcssColor, postcssExtend, postcssNesting,
autoprefixer([{browsers: '> 0%'}]))
but that didn't work either, what is wrong with it?
-- Fixed --
I think some of the other plugins is using autoprefixer too and it was messing with my configs. The way I fixed it was to add this at the bottom of my package.json file
"browserslist": [
"> 0%",
"last 2 versions"
]
Add it with a comma after the last curly brace for your devDependencies
Flex is very well supported so probably you don't need it anymore (autoprefixer don't add prefixes to the property by default anymore for a while — check can I use). But if you really need it you can do the steps:
Let's say you have css folder and dist folder for yours styles in your working directory.
create .browserslistrc file at the root of the working directory and put last 4 versions in it.
run postcss css/styles.css -u autoprefixer -o dist/styles.css in your terminal
I have multiple sass files (with one style.scss containing all includes) and a couple of css libraries, which I want to combine in one final style.min.css.
I've configured 2 tasks with elixir:
Compiles my sass file: 'style.scss' (containing all includes) to css: 'public/css/style.css'
Combines the compiled css: 'public/css/style.css' with other
stylesheets (libraries) into the final: 'public/css/style.min.css'
Here's my gulpfile:
elixir(function(mix) {
mix
.sass('style.scss', 'public/css/style.css')
.styles([
'path-to-lib/some-random-lib/lib.css',
'path-to-lib/another-random-lib/lib.css',
'/public/css/style.css'
], 'public/css/style.min.css')
});
Problem: The sass compile task creates correct sourcemap, pointing to the right lines in .scss, but the second task which combines the styles - creates a sourcemap that is pointing to the lines in 'public/css/style.css', instead of the ones in the .scss files :(
Does anybody know a way how I can force the final sourcemap to point to the lines in the sass files?
Finally, after 3 months, I found a solution!
Instead of calling both - mix.sass to compile SASS and then mix.styles to combine css stylesheets, I just wrapped up everything in the mix.sass
elixir(function(mix) {
mix.sass([
'path-to-lib/some-random-lib/lib.css',
'path-to-lib/another-random-lib/lib.css',
'/public/css/style.css'
'style.scss'
], 'public/css/style.css')
});
This trick fixes the source map issue.