Since updating to version 3 of gulp-imagemin, I'm having difficulty pushing options through when running the task.
I can see in the documentation that the syntax for the options has changed, but I'm having no luck with the new syntax as described.
Here's what I have working in v2.4.0:
.pipe($.imagemin({
progressive: true,
interlaced: true,
svgoPlugins: [
{cleanupIDs: false}
, {removeUnknownsAndDefaults: false}
]
}))
I've upgraded to version 3 and as per the instructions in the release notes, I've changed the syntax to the following:
.pipe($.imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.mozjpeg({progressive: true}),
imagemin.svgo({plugins: [
{cleanupIDs: false}
, {removeUnknownsAndDefaults: false}
]})
]))
However, when running the task this throws an error:
Reference error: imagemin is not defined
I'm fairly new to gulp and the like, so there may be something fairly obvious I'm missing, but I've experimented with lots of subtle changes to the syntax, all to no avail. Can anyone help?
Define imagemin first.
const imagemin = require(‘gulp-imagemin’);
Then use imagemin instead of $.imagemin.
Related
I am using html-minifier inside gulp to minify my html files. However, inline script tags without type="text/javascript" never get processed.
I've been searching in the documentation, but even the option processScripts, with minifyJS, was not able to solve it.
My script tags have no type, as it is not necessary in HTML5 (or am I wrong about this one?). What am I missing?
script.js:
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
gulp.src('lib/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true,
minifyCSS: true,
minifyJS: true,
removeScriptTypeAttributes: true,
processScripts: [undefined, null, ""],
}))
// .pipe(htmlmin({
// collapseWhitespace: true,
// minifyJS: true,
// }))
.pipe(gulp.dest('dist'));
EDIT
Running html-minifier directly in the string correctly minifies it. So, some sort of bug seems to be preventing options passed to gulp from arriving to html-minifier used internally.
I ran the following gulp project on an example html page that had inline scripts and html, with the parameter set to minifyJS:true it all worked. You are definitely looking at the correct parameter. Could it be that the way you are passing in your configuration parameters is not being recognised? Hopefully the example gulpfile code will help you somewhat.
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
function defaultTask() {
return gulp.src('src/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
minifyJS:true }))
.pipe(gulp.dest('dist'));
}
exports.default = defaultTask;
I am trying to run build task in VS Code. Unfortunately, nothing happens when I attempt to execute the task from the task runner or with a hot-key combo (shift+ctrl+b). The OUTPUT window (with tasks dropdown) is empty.
My task.json file content:
{"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"tasks": [
{
"taskName": "deploy",
"isBuildCommand": true,
"showOutput": "always"
}]}
My gulpfile.js is on root application folder
var gulp = require('gulp');
var plugins = require("gulp-load-plugins")();
var karma = require("karma");
function getTask()
{
var srvInst = new karma.Server({
configFile: __dirname + "/karma.conf.js",
});
return srvInst.start();
}
//build task
gulp.task("deploy",function(){
plugins.util.log("done");
});
//test task
gulp.task("test",getTask());
This is simplified versions of files, but the problem remains. I'm wondering why the OUTPUT is empty. Where can I find any clue what is wrong?
I manage to find the cause of the problem. It is possible to debug gulp task with help of node debugger and I find out that it is gulp.task("test",getTask()); playing tricks on me and on OUTPUT. Even if I execute build command, the getTask function is called because of mistaken execution getTask().
The question now is following - empty OUTPUT is a bug or a feature in such context. Should I report about it or it is totally my fault?
Hi I am trying to run a tslint task using gulp on a small angular 2 app but it does not seem to work.Here is what I have so far:
This are is my gulpFile:
const gulp = require('gulp');
const tslint = require('gulp-tslint');
gulp.task('tslint', () => {
return gulp.src("app/**/*.ts")
.pipe(tslint({ configuration: "tslint.json" }))
.pipe(tslint.report('verbose'));
});
To be absolutely sure I get errors I have set in tslist.json the following option: "max-line-length": [ true, 5 ]
When I run this task I get the following:
[10:29:54] Using gulpfile ~\Desktop\InovationWeek\InovationWeek\Gulpfile.js
[10:29:54] Starting 'tslint'...
Process terminated with code 1.
It does not say anything about what linting errors it found just that the process terminated with code 0.
What am I doing wrong?
I had a similar issue where tslint was running into a problem with my configuration and was not actually performing any linting.
This resulted in the process teminating with code 1, but not returning any linting errors which seems to be same problem you are seeing.
My solution was to add a bit of error handling in gulp:
gulp.task("tslint", function() {
return gulp.src(config.tsSrc)
.pipe(tslint({
formatter: "verbose",
configuration: "tslint.json"
}))
.on('error', printError)
.pipe(tslint.report());
});
// print the error out
var printError = function(error) {
console.log(error.toString());
}
This meant that the configuration error that cause tslint not to run was written to the console and I was able to fix my configuration.
I need to setup a gulp task to optimize the image files in a directory, but since this is an existing site, I cannot change the output directory. In other words, I need the optimized image to replace the existing image.
I have googled around, and read the documentation for gulp-imagemin, and even tried to do it using the shell, to no avail.
There must be a way to do this, but so far, I have found no evidence of how to do so on the internet. I'm hoping the good people of SO can help me out in this regard :)
Here's my code:
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngcrush = require('imagemin-pngcrush');
var paths = {
files: './webroot/sites/files/**',
filesDest: './webroot/sites/files',
};
gulp.task('files', function() {
'use strict';
// Minify all images
return gulp.src(paths.files, {base: './webroot/sites/files'})
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngcrush()]
}))
.pipe(gulp.dest(paths.filesDest));
});
gulp.task('default', ['files']);
This code, as Delapouite said, is working, I was simply checking for it incorrectly.
I'm probably trying to make gulp do something that's not idiomatic, but here goes.
I want my build task to only run if the source files are newer than the output file.
In gulp, it seems standard practice to create a build task that always runs, and then set up a watch task to only run that build task when certain files change. That's okay, but it means that you always build on the first run.
So, is it possible to do what I want? Here's what I've got so far (newer is gulp-newer):
gulp.task('build_lib', function() {
return gulp.src(["app/**/*.ts"])
.pipe(newer("out/outputLib.js")) //are any of these files newer than the output?
** NEED SOMETHING HERE **
how do I say, "If I got _any_ files from the step before, replace all of them with a single hardcoded file "app/scripts/LibSource.ts" "?
.pipe(typescript({
declaration: true,
sourcemap: true,
emitError: false,
safe: true,
target: "ES5",
out: "outputLib.js"
}))
.pipe(gulp.dest('out/'))
});
I tried using gulpif, but it doesn't seem to work if there are no files going into it to begin with.
.pipe(gulpif(are_there_any_files_at_all,
gulp.src(["app/scripts/LibSource.ts"])))
However, my condition function isn't even called because there are no files on which to call it. gulpif calls the truthy stream in this case, so LibSource gets added to my stream, which isn't what I want.
Maybe doing all of this in a single stream really isn't the right call, since the only reason I'm passing those files through the "gulp-newer" filter is to see if any of them is newer. I'm then discarding them and replacing them with another file. My question still stands though.
You can write your own through/transform stream to handle the condition like so:
// Additional core libs needed below
var path = require('path');
var fs = require('fs');
// Additional npm libs
var newer = require('gulp-newer');
var through = require('through');
var File = require('vinyl');
gulp.task('build_lib', function() {
return gulp.src(["app/**/*.ts"])
.pipe(newer("out/outputLib.js"))
.pipe(through(function(file) {
// If any files get through newer, just return the one entry
var libsrcpath = path.resolve('app', 'scripts', 'LibSource.ts');
// Pass libsrc through the stream
this.queue(new File({
base: path.dirname(libsrcpath),
path: libsrcpath,
contents: new Buffer(fs.readFileSync(libsrcpath))
}));
// Then end this stream by passing null to queue
// this will ignore any other additional files
this.queue(null);
}))
.pipe(typescript({
declaration: true,
sourcemap: true,
emitError: true,
safe: true,
target: "ES5",
out: "outputLib.js"
}))
.pipe(gulp.dest('out/'));
});
I know like, this question was posted over 4 years ago, however; I am sure this problem crosses the path of everyone, and although I think I understand the question that is being asked, I feel that there is an easier way to perform this task, off which, I posted a similar question recently on stackoverflow at New to GULP - Is it necessary to copy all files from src directory to dist directory for a project?
It uses gulp-changed, and for me, it worked like a charm, so for others who may look at this post for similar reasons, have a look at my post and see if it is what you are looking for.
Kind Regards
You don't need to build first. You can on your 'first run' only run the watch task from which you run all the other ones.
example:
// Create your 'watch' task
gulp.task( 'watch', function() {
gulp.watch( 'scripts/*.js', [ 'lint', 'test', 'scripts' ] );
gulp.watch( 'styles/sass/*.scss', [ 'sass_dev' ] );
} );
// On your first run you will only call the watch task
gulp.task( 'default', [ 'watch' ] );
This will avoid running any task on startup. I hope this will help you out.
May I suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.
This will allow 1:1 or many to 1 compares.
newy(function(projectDir, srcFile, absSrcFile) {
// do whatever you want to here.
// construct your absolute path, change filename suffix, etc.
// then return /foo/bar/filename.suffix as the file to compare against
}