I am trying to use imagemin with imagemin-pngquant to reduce images in an AWS Lambda function. Here is the code that I've made using the docs as a reference:
(image.data is the Buffer I'm creating from an axios .get() with arrayBuffer as the responseType)
// We want to minify the image before we upload it
let converted_image = await imagemin.buffer(await image.data, {
plugins: [
imageminPngquant({
quality: [.55, .65],
speed: 8,
strip: true
})
],
})
However, when I try to use the pngquant plugin to compress pngs, it does not work. Here is the exact error that I'm getting:
Error: Error: /var/task/node_modules/pngquant-bin/vendor/pngquant: /var/task/node_modules/pngquant-bin/vendor/pngquant: cannot execute binary file"}%
Related
Describe the bug
react-monaco-editor cannot be used together with worker-loader.
To Reproduce
create a new typescript app with CRA, run a min react-monaco-editor demo. (everything is fine)
install worker loader and add config in config-overrides.js, and start app.
example repo to reproduce
ERROR in ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)
Child vs/editor/editor compiled with 1 error
assets by status 1.27 KiB [cached] 1 asset
./node_modules/monaco-editor/esm/vs/language/json/json.worker.js 39 bytes [not cacheable] [built] [1 error]
ERROR in ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js
Module build failed (from ./node_modules/worker-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'replace')
at getDefaultChunkFilename (/Users//Documents/test/my-project/node_modules/worker-loader/dist/utils.js:23:24)
at Object.pitch (/Users//Documents/test/my-project/node_modules/worker-loader/dist/index.js:61:108)
Child vs/language/json/jsonWorker compiled with 1 error
details of my config-overrides.js
const webpack = require('webpack');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = function override(config, env) {
config.plugins.push(
new MonacoWebpackPlugin({
languages: ['json']
})
);
config.stats = {
children: true
}
config.module.rules.push(
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
options: {
inline: 'fallback',
filename: '[contenthash].worker.js',
},
},
},
{
test: /\.worker\.ts$/,
use: [
{
loader: 'worker-loader',
options: {
inline: 'fallback',
filename: '[contenthash].worker.js',
},
},
'ts-loader',
],
},
);
return config;
};
Environment (please complete the following information):
OS: MacOS
Browser Chrome
Bundler webpack5 (CRA)
[ ] I will try to send a pull request to fix this issue.
I have solved it. It seems not to be a problem of react-monaco-editor or monaco-editor.
The problem is between worker-loader and monaco-editor-webpack-plugin.
I temporarily update my worker-loader config to match workers in my src folder only and solve this problem.
It could be better to figure out how to configure it in monaco-editor-webpack-plugin because it build files contains worker from monaco-editor without hashcode.
var path = RNFetchBlob.fs.dirs.DocumentDir
RNFetchBlob
.config({
path: toFile,
addAndroidDownloads: {
useDownloadManager: true,
mime: 'text/plain',
description: 'Downloading...',
notification: false
}
})
.fetch('GET', fromUrl)
.progress((received, total) => {
})
I am using the above code for downloading files in the react-native. This is working fine in IOS. But not working with android.
I also tried
var path = RNFetchBlob.fs.dirs.DownloadDir
I also check with permission in Manifest
<uses-permission android:name="android.permission.MANAGE_DOCUMENTS"/>
But nothing worked so Please let me know how can i resolve it. In the android and download files in the com.appname folder.
Thanks
I'm working on a legacy site that has some pre-set-up Gulp commands.
I want to compile some .less files into .css. The existing script is as such:
gulp.task('less', function(){
return gulp.src('./src/css/less/app.less')
.pipe(less({
paths: [ path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest('./src/css/'))
});
However, when I run this I get an error:
Error: File not found with singular glob: /src/css/less/app.less (if this was purposeful, use `allowEmpty` option)
I've checked all paths, all #import and directories and they're all ok.
I am using Gulp Local: 4.0.0, CLI: 2.3.0.
Would anyone know could be causing this?
Maybe later, but Gulp 4 has a new syntax for writing tasks.
Also, you have to fix the wrong path to the source file:
// gulpfile.js
const SRC = 'src';
const DIST = 'src';
function lessTask(cb) {
return src(SRC + '/less/app.less')
.pipe(less())
.pipe(dest(DIST + '/style.css'));
}
exports.default = series(lessTask);
# On terminal:
gulp
Using vue cli 3. How to correctly optimize all images png/jpg/svg from src/assets/images using https://www.npmjs.com/package/imagemin-webpack-plugin in vue.config.js:
const ImageminPlugin = require('imagemin-webpack-plugin').default
module.exports = {
configureWebpack: {
devtool: 'source-map',
plugins: [
new ImageminPlugin({
pngquant: {
quality: '90-95'
}
})
]
}
}
But it seems like it's not processing my images, what config setting do i miss?
The imagemin-webpack-plugin by default should optimize PNGs, GIFs, JPEGs, and SVGs pretty well. So even if you use no options (EX: new ImageminPlugin()) you will get all of those. If you want to customize how much it's compressing things, you can always take a look at the docs to customize it.
If your images aren't being optimized, it may be because the plugin has a "fallback" where if the optimized image is LARGER than the original image, it will just use the original one. Sometimes source images just won't compress any better, and falling back to the original seemed like a better default.
By default optimization JPEGs did not occur in my case, everything worked after install imagemin-mozjpeg package
var ImageminPlugin = require('imagemin-webpack-plugin').default
var imageminMozjpeg = require('imagemin-mozjpeg')
...
configureWebpack: {
plugins: [
new ImageminPlugin({
...
plugins: [
imageminMozjpeg({
quality: 85
})
]
})
]
}
How do we add PostCSS support to Vue cli 3 (I'm using beta 7)? Is there a plugin for it? Its not supported out of the box.
When I tried to import like this
import './index.pcss'
using the default cli generated project
./src/index.pcss
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .sofa {
| font-family: "sofachrome", serif;
| }
# ./src/main.js 5:0-22
my postcssrc.js:
module.exports =
{
'plugins': {
'autoprefixer': {},
'postcss-smart-import': {},
'postcss-custom-properties': {},
'postcss-nested': {}
}
}
Just use the .css extension, not .pcss. If you must use .pcss you'll have to configure that in webpack. As for how to properly tap into that rule to do that I'd need to research a bit. Though, I think just using .css is a clear win.
PostCSS (as pointed out by Bill and Yuriy) works by default, but the Webpack loader is only configured for .css extensions. To modify it, update your vue.config.js:
module.exports = {
chainWebpack: config => {
config.module
.rule('pcss')
.use('postcss-loader')
.tap(options =>
merge(options, {
sourceMap: false,
})
)
}
}
Modify the example according to your needs.
Read more in vue-cli docs