Hi i have a little bit of a problem in my Gulp configuration for images, my gulp task is supposed to minify all images in the resources folder and then place the minified version in the public directory, however only the PNG images are being exported correctly...
gulp.task('images', function() {
gulp.src(assets + 'images/**')
.pipe(imagemin({
progressive: true,
optimizationLevel: 7,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest(public + 'images/'));
});
That is the task that i'm running, i am currently using imagemin version ^2.4.0
Got the same issue, here is my config:
let developmentAssets = "src",
productionAssets = "dist";
module.exports = {
optimize : {
images: {
src: developmentAssets + '/img/**/*.{jpg,jpeg,png,gif,svg}',
options: {
optimizationLevel: 3,
progessive: true,
interlaced: true
}
}
}
};
and then in your task
/*
This is my particular setting to have everything organized
read this amazing gulp tutorial: http://stefanimhoff.de/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html/
*/
config = require('./gulp/config'),
configImg = config.optimize.images,
.pipe(imagemin(configImg.options))
Hope that it helps.
Related
I have a script to convert images to node, but am having an issue where I receive the successful message, yet nothing is output.
import imagemin from "imagemin";
import webp from "imagemin-webp";
var outputFolder = "./FSS-assets/webp"; // Output folder
var PNGImages = "./FSS-assets/*.png"; // PNG images
var JPEGImages = "./FSS-assets/*.jpg"; // JPEG images
imagemin([PNGImages], outputFolder, {
plugins: [webp({
lossless: true // Losslessly encode images
})]
}).then(function() {
console.log("Images converted!");
});
imagemin([JPEGImages], outputFolder, {
plugins: [webp({
quality: 65 // Quality setting from 0 to 100
})]
}).then(function() {
console.log("Images converted!");
});
I am running
node v14.16.0
imagemin v8
imagemin-webp v6
I have also tried using a relative folder path to no avail. This is on Windows 10.
That's because imagemin has 2 params input and options You are giving 3params.
From the Doc:
imagemin(input, options?)
Returns Promise<object[]> in the format {data: Buffer, sourcePath: string, destinationPath: string}.
So for your code it will be:
imagemin([PNGImages], {
destination: outputFolder,
plugins: [webp({
lossless: true // Losslessly encode images
})]
}).then(function() {
console.log("Images converted!");
});
It looks like you just need to adjust your parameter structure slightly. To be ([images], { destination: ‘/output directory’, plugins: {});
const files = await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images',
plugins: [
imageminJpegtran(),
imageminPngquant({
quality: [0.6, 0.8]
})
]
});
Hope this helps & works.
I am working on a small project that needs .sass files compiled into .css files. I have used Gulp a while ago and loved it, but my old gulpfile.js does not work anymore, because Gulp has changed since version 4.
I have made a new gulpfile.js:
var gulp = require('gulp'),
sass = require('gulp-sass'),
rename = require('gulp-rename');
var paths = {
styles: {
src: 'src/scss/*.scss',
dest: 'build/css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp
.watch(paths.styles.src, styles);
}
var syncConfig = {
server: {
baseDir : './',
index : 'index.html'
},
port : 3000,
open : false
};
// browser-sync
function server() {
init(syncConfig);
}
var build = gulp.parallel(styles, watch, server);
gulp
.task(build);
gulp
.task('default', build);
I have a "Did you forget to signal async completion?" error returned by the console.
Where is my mistake?
There ware two things missing: the browsersync variable browsersync = require('browser-sync').create() and the callback for the server function:
function server(done) {
if (browsersync) browsersync.init(syncConfig);
done();
}
It compiles SASS to CSS, still there is this problem: the page does not reload automatically when changes are made in the main.scss.
Here is the entire code:
var gulp = require('gulp'),
browsersync = require('browser-sync').create(),
sass = require('gulp-sass'),
rename = require('gulp-rename');
var paths = {
styles: {
src: 'src/scss/*.scss',
dest: 'build/css'
}
};
function styles() {
return gulp
.src(paths.styles.src, {
sourcemaps: true
})
.pipe(sass())
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp
.watch(paths.styles.src, styles);
}
var syncConfig = {
server: {
baseDir : './',
index : 'index.html'
},
port : 3000,
open : false
};
// browser-sync
function server(done) {
if (browsersync) browsersync.init(syncConfig);
done();
}
var build = gulp.parallel(styles, watch, server);
gulp
.task(build);
gulp
.task('default', build);
Alright, one for the ages. The issue is I am trying to merge the structure from multiple sources into a single one. One of my sources is from the template.html which contains the base structure for index.html -source-. I trying to find a solution that replaces html block data from the source -index.html- body tag into the destination -template.html- lastly create a new merged document which outputs to -dest-.
File structure that is as follows:
public
---assets
------template.html
---src
------app.js
------index.html
------main.css
---dist
------merged.html
I am using npm package gulp-replace (but open to other packages).
var gulp = require('gulp');
var htmlreplace = require('gulp-html-replace');
var copycat = require('gulp-copycat');
gulp.task('default', function() {
// create a watch task
gulp.task('default', function() {
gulp.src('assets/template.html')
.pipe(htmlreplace({
'cssInline': {
src: gulp.src('sheetgmail/main.css'),
tpl: '<style>%s</style>'
},
'body': gulp.src('sheetgmail/index.html'),
'headscript': {
src: null,
tpl: '%s'
},
'js': {
src: gulp.src('sheetgmail/app.js'),
tpl: "<script type='text/javascript'>%s</script>"
},
}, {
keepUnassigned: false,
keepBlockTags: true,
resolvePaths: false
}))
.pipe(gulp.dest('dist/'));
});
});
I'm trying to create new grunt task for generating sprites for magento2. I'm using grunt-spritesmith plugin for that. In Gulpfile.js I have mapped sprite task to grunt-spritesmith in JitGrunt config:
require('load-grunt-config')(grunt, {
configPath: path.join(__dirname, configDir),
init: true,
jitGrunt: {
staticMappings: {
usebanner: 'grunt-banner',
sprite: 'grunt-spritesmith'
}
}
});
in dev/tools/grunt/configs I made a config file sprite.js with contents:
'use strict';
module.exports = {
sprite: {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
}
};
But grunt sprite gives me
>> No "sprite" targets found.
Or if in different configurations I'm able to register sprite task, I'm not able to pass config with src, dest and destCss params.
You have not include task name. This works:
'use strict';
module.exports = {
all: {
src: 'app/design/frontend/vendor/default/web/images/spritesheets/*.png',
dest: 'app/design/frontend/vendor/default/web/images/spritesheets.png',
destCss: 'app/design/frontend/vendor/default/web/css/source/_sprites.less'
}
};
I'm working on a project with a few others. While they get Gulp to work, it doesn't seem to work on my computer, even through our code is identical.
When I write the 'gulp' command, I get this:
[10:51:17] Starting 'browserify'...
[10:51:19] Finished 'browserify' after 2.37 s
[10:51:19] Starting 'default'...
[10:51:19] Finished 'default' after 17 μs
But when I save the changes in the files Gulp is suppose to be watching, the 'update' event doesnt seem to be triggered.
Here is the Gulp file
var gulp = require("gulp"),
jest = require("gulp-jest"),
source = require('vinyl-source-stream'),
browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify');
require("harmonize")();
var paths = {
scripts: "src/**/*.js",
tests: "__tests__"
};
gulp.task("jest", function () {
return gulp.src(paths.tests).pipe(jest({
scriptPreprocessor: "preprocessor.js",
unmockedModulePathPatterns: [
"../node_modules/react"
],
testPathIgnorePatterns: [
"node_modules",
"spec/support"
],
moduleFileExtensions: [
"js",
"json",
"react"
]
}));
});
gulp.task('browserify', function() {
var bundler = browserify({
entries: ['./src/js/TopLevel.js'],
transform: [reactify],
debug: true,
cache: {}, packageCache: {}, fullPaths: true
});
var watcher = watchify(bundler);
return watcher
.on('update', function () { // When any files update
var updateStart = Date.now();
console.log('Updating!');
watcher.bundle() // Create new bundle that uses the cache for high performance
.pipe(source('main.js'))
.pipe(gulp.dest('./public/assets/js'));
console.log('Updated!', (Date.now() - updateStart) + 'ms');
})
.bundle() // Create the initial bundle when starting the task
.pipe(source('main.js'))
.pipe(gulp.dest('./public/assets/js'));
});
gulp.task("watch", function() {
gulp.watch("src/**/*.js", ["jest"]);
gulp.watch("__tests__/*.js", ["jest"]);
});
gulp.task("default", ["browserify"]);
However, I don't think there is anything wrong with the code, as it works for my other team members.
Any help and comments are highly appreciated!
Try this:
gulp.task("watch", function() {
gulp.watch("./src/**/*.js", ["jest"]);
gulp.watch("./__tests__/*.js", ["jest"]);
});
If you are only running gulp in the command line the watch task will not trigger since the default task is only running browserify, just change your default task to this.
gulp.task("default", ["browserify", "watch"]);