How to connect "html-minifier" to gulp? - javascript

I am using gulp and I get an error on startup...
How do I fix this?
The returned value is not a function.
I've been trying to fix this for hours now, but I don't understand what's wrong.
Maybe this is somehow possible using this plugin? vinyl-source-stream
const htmlMinify = require('html-minifier').minify
function html() {
const postcssPlugins = [
autoprefixer({
overrideBrowserslist: [
'>0.25%',
'not ie 11',
'not op_mini all'
]
}),
pxtorem({
rootValue: 16,
unitPrecision: 5,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
replace: false,
mediaQuery: false,
minPixelValue: 0,
})
];
const postcssOptions = { from: undefined }
const filterType = /^text\/css$/
const plugins = [
posthtmlPostcss(postcssPlugins, postcssOptions, filterType)
];
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true
}
return src(config.app.html)
.pipe(include({ prefix: '##' }))
.pipe(posthtml(plugins))
.pipe(htmlMinify(options))
.pipe(dest(config.build.html))
}
exports.stream = series(clear, html, stream)

If using plugin "vinyl-source-stream".
The solution to this question would be the following code.
In this code, I used plugins that work with streams.
But this code only converts one file!
You can read more details about each plugin on npmjs.
html-minifier, vinyl-fs, vinyl-source-stream, map-stream
const { src, dest, series } = require('gulp');
const htmlMinify = require('html-minifier');
const vfs = require('vinyl-fs');
const source = require('vinyl-source-stream');
const map = require('map-stream');
const options = {
includeAutoGeneratedTags: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
sortClassName: true,
useShortDoctype: true,
collapseWhitespace: true
};
function sol() {
let minify = function(file, cb) {
cb(null, htmlMinify.minify(file.contents.toString(), options));
};
return vfs
.src(['app/index.html'])
.pipe(map(minify))
.pipe(source('index.html'))
.pipe(vfs.dest('build'));
}
exports.sol = series(sol);
This was the answer to this particular question.
There is a more elegant solution to this problem.
No third party plugins required. I described it in this post.

Related

firebase ESLINT questions

I am having some small issues with ESlint
here is the code snip:
module.exports = {
root: true,
env: {
es6: true,
node: true,
},
extends: [
"eslint:recommended",
"google",
],
rules: {
quotes: ["error", "double"],
},
parserOptions: {
ecmaVersion: 8, // or 2017
},
};
questions::
I have a max of 80 characters per line, how do I remove this?
I can't use let to run a for loop, it always changes to const
for ( let userData in chatUsersData) {
if ( userData["userId"]!=senderUserId) {
receiverUserId = userData["userId"];
}
}

preserve json object used as dictionary with terser

I currently bundle my typescript code with rollup and want to use terser for minifying/uglifying. In my code I have a dictionary object and imported it into my typescript code.
const dict = { ironResource : "Iron" }
In my code I use it to translate identifiers to other languages or access configs by item identifiers (ironResource). Terser will mangle my keys and destroys the purpose of the object.
const B1 = { aB1 : "Iron" }
Terser settings:
terser({
parse: {
},
compress: {
},
mangle: {
properties: {
}
},
format: {
},
ecma: 5,
keep_classnames: false,
keep_fnames: false,
ie8: false,
module: false,
nameCache: null,
safari10: false,
toplevel: false,
})
How to stop terser from doing this?
I would expect that you need to set mangle like this:
mangle: {
properties: false
},
Or set the correct options in the properties option object to keep those in particular. For example quote the property names and set keep_quoted to true.

How can i convert an object in a specific format into another format

I am having a hard time trying to convert an object supplied in a specific format from API into a target format using javascript. Please note that in the target format, the false values are not present. This is intentional. Can someone please help by showing how I can do the this kind of conversion. Thank you
// Original format
const rules= [
{
dealer: {
view: true,
edit: false,
add: false
},
franchise: {
view: true,
edit: true,
add: true
},
branch: {
view: true,
edit: false,
add: false
}
}
]
// Target format
const rules = [
{
actions: ["view"],
subject: ["dealer"]
},
{
actions: ["view"],
subject: ["franchise"]
},
{
actions: ["edit"],
subject: ["franchise"]
},
{
actions: ["add"],
subject: ["franchise"]
},
{
actions: ["view"],
subject: ["branch"]
}
];
I implemented mapping function which take each item and map it according to the value if true
let rules = [
{
dealer: {
view: true,
edit: false,
add: false
},
franchise: {
view: true,
edit: true,
add: true
},
branch: {
view: true,
edit: false,
add: false
}
}
]
rules = rules.map(item => {
const keys = Object.keys(item);
let mappedItem = []
keys.forEach(key => {
for (const property in item[key]) {
if (item[key][property]) {
mappedItem.push({ subject: [key], actions: [property] })
}
}
})
return mappedItem;
});
let rules= [
{
dealer: {
view: true,
edit: false,
add: false
},
franchise: {
view: true,
edit: true,
add: true
},
branch: {
view: true,
edit: false,
add: false
}
}
];
const result = rules.map(obj => Object.keys(obj).map(k => ({
subject: [k],
actions: Object.keys(obj[k]).filter(action => obj[k][action])
})).reduce((acc, cur) => ([
...acc,
...cur.actions.map(a => ({subject: cur.subject, actions: [a]}))
]),[]))
console.log(result);

How to use markdown-it plugins options in nuxt.js

I'm using #nuxtjs/markdownit to parse markdown files, I want to enable creating permanent links feature in 'markdown-it-anchor' plugin, I used following code in nuxt.config.js but not working:
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/markdownit'
],
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
typographer: true,
html: false,
use: [
'markdown-it-anchor',
'markdown-it-attrs',
'markdown-it-div',
'markdown-it-toc-done-right',
'markdown-it-emoji'
]
},
'markdown-it-anchor': {
level: 1,
// slugify: string => string,
permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'header-anchor',
permalinkSymbol: '¶',
permalinkBefore: true
},
Self answering: I found the syntax in this post
markdownit: {
preset: 'default',
linkify: true,
breaks: true,
typographer: true,
html: false,
use: [
[
'markdown-it-anchor',
{
level: 1,
// slugify: string => string,
permalink: true,
// renderPermalink: (slug, opts, state, permalink) => {},
permalinkClass: 'header-anchor',
permalinkSymbol: '¶',
permalinkBefore: true
}
],
'markdown-it-attrs',
'markdown-it-div',
'markdown-it-toc-done-right',
'markdown-it-emoji'
]
},

Telegram bot inline keyboard via Node.JS

I'm using the node-telegram-bot-api module,
How can I make my keyboard to inline Keyboard?
This is my code:
bot.onText(/^\/start$/, function (msg) {
const opts = {
reply_to_message_id: msg.message_id,
reply_markup: {
resize_keyboard: true,
one_time_keyboard: true,
keyboard: [ ['Level 1'] ]
}
};
bot.sendMessage(msg.chat.id, "I'm a test robot", opts);
});
I answered a question similar to this link: How can create menu for telegram bot in bot father?
in your case you could use:
keyboard: [["uno :+1:"],["uno \ud83d\udc4d", "due"],["uno", "due","tre"],["uno", "due","tre","quattro"]]
In your case the solution would be:
const opts = {
reply_to_message_id: msg.message_id,
reply_markup: JSON.stringify({
inline_keyboard:
[
[{text: 'Level 1'}],
]
})
};
You could use:
https://github.com/RealPeha/telegram-keyboard
The library if focused on Telegraf, but you could use without it.
You just need to provide an InlineKeyboardButton object instead of plain text in your keyboard array of arrays.
bot.onText(/^\/start$/, function (msg) {
const opts = {
reply_to_message_id: msg.message_id,
reply_markup: {
resize_keyboard: true,
one_time_keyboard: true,
keyboard: [
[{text: 'Level 1'}],
],
}
};
bot.sendMessage(msg.chat.id, "I'm a test robot", opts);
});

Categories