Currently, I am utilizing gulp for image compression. However, my requirement is to only compress images exceeding 200kb in size. Can JavaScript be used to loop through a directory and selectively run the minification process on files larger than 200kb? The tool I am working with is lossy-imagemin package. While my understanding suggests that this functionality typically requires a server-side language, I would greatly appreciate a conclusive response on this matter. Many thanks in advance.
Sure, it is absolutely doable on the client-side. Here's a simple demonstration utilizing gulp-filter to sieve out files that are smaller than 200kb.
const gulp = require("gulp");
const filter = require('gulp-filter');
const fs = require('fs');
// const path = require('path'); not necessary in this scenario
const someImageMin = require('your image min plugin');
gulp.task('default', function () {
// selecting only files > 200KB
// restore option required if you plan to reintegrate filtered-out files later
const myFilter = filter(file => (fs.statSync(file.path).size > 200000), {restore: true});
return gulp.src(['pics/*jpg', 'pics/*png'])
.pipe(myFilter)
.pipe(someImageMin())
// reintegration of filtered-out files
.pipe(myFilter.restore)
.pipe(gulp.dest('new'));
});
[gulp-ignore][2] is also an alternative method.
I am utilizing the Number input component from MUI, which includes Increment and Decrement buttons for adjusting numbers. Is there a method to limit the input to only accept values ranging from 0 to 100 ? Additionally, how can I decrease the width of the ...
html: In my HTML document, I have a unordered list (ul) with each list item (li) constructed like this: <li class="A">list-item <div>1</div> <div class="B">2 <div class="C">3</div> </div> ...
Having trouble pinpointing the issue as nothing is being displayed in the selected div. $(document).ready(function(){ var lat, lng, data; // Retrieve current location if (navigator.geolocation) { navigator.geolocation.getCurrentPositio ...
I am seeking to create a unique typography animation that involves animating the second text, which is colored and consists of multiple text elements to animate. The animation should showcase each text element appearing and disappearing one after the other ...
Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...
I recently attempted to install a project from a github repository and integrate it within my own. I utilized the command npm install github:openfn/core#v1.0.0 in my project directory, which added "core": "github:openfn/core#v1.0.0" to ...
Utilizing inputs from Material-Ui, I am retrieving values from an API to populate these inputs. If the API does not return any values, the user must enter them manually. In my implementation, I am utilizing Hooks with the initial state defined as: const [ ...
Is there a way to modify the default blue color that appears when content is selected on a webpage? I am wondering how to change this selection color to a custom color of choice. ...
Here is a function called validator: import validator from "validator"; import isEmpty from "is-empty"; export default function validate(data) { const errors = {}; for (const property in data) { console.log(property); //< ...
Currently listed in my package.json file are the following devDependencies: { "devDependencies": { "axios": "^0.19", "bootstrap": "^4.5.0", "cross-env": "^7.0", "laravel-mix": "^5.0.1", "lodash": "^4.17.19", ...
Is there a way to trigger the Ctrl+A key combination in a textarea element when a specific event occurs, without resorting to caret positioning or selecting all text separately? I'm looking for a method that simulates hitting Ctrl+A using a cross-brow ...
I am a beginner with ajax and prefer not to use frameworks. I attempted to use PHP to determine if a file is set and display either true or false, but it didn't work as expected. I'm unsure of where I went wrong. Below is my HTML and JS code: & ...
I am attempting to launch an electron app over ssh with X11 forwarding on a headless machine. Specifically, I am using the electron-quick-start repository. The app works fine when I run it by executing electron . in the cloned folder. However, when I try t ...
I seem to be experiencing an issue with buttons. To check if the function is being triggered, I used alert("") and found that it does enter the function when the button is clicked. However, after the alert, any other code inside the function seems to not w ...
I am currently trying to implement the tinyColorPicker plugin from here in my Angular app, but I am facing difficulties with it. An error message keeps appearing: TypeError: element.colorPicker is not a function In my index.html file, I have included th ...
Recently, I've been working on an Angular application that fetches photos and videos from a server and displays them as a slide one at a time. Now, I'm faced with the task of integrating this functionality into another app. Is there a method to t ...
For some reason, the event progress listener isn't firing in AJAX when using Chrome web browser. However, when simply using the form submit function to the form action, the file uploads as expected. Even though the file is uploading behind the scenes ...
This is the form I created: <form action="" ng-controller="forgotCtrl as forgot" name="forgotForm"> <div class="form-group row"> <label for="email" class="col-sm-2 form-control-label">Email address</label> ...
I am looking to perform Asynchronous Operations on every row of a specific database table, which could potentially contain 500,000, 600,000, or even more rows. My initial approach was: router.get('/users', async (req, res) => { const users = ...
I am attempting to update an attribute called items, which is a list of strings. Is it possible to update (append) the attribute only if it does not already exist? Something like a combination of list_append and if_not_exists. var params = { ... Upda ...