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;
Related
I have used gulp.js for a while, and while using the gulp-pug package I don't know which options can I use.
Let's use sass as an example:
// STYLES TASK
`gulp.task('style', function() {
return gulp.src(['public/style/libs/*.*', 'public/style/sass/app-root.scss'])
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError)) ======>#1
.pipe(prefix()) ======>#2
.pipe(concat('app-style.css'))
.pipe(sourcemaps.write('../../public/maps'))
.pipe(gulp.dest('dist/css'))
})`
I'm talking here about adding option like #1, #2.
You can use any options from Pug's API in addition to pug's own options.
you can find more information about which options you can use with this package here
usage example:
var pug = require('gulp-pug');
gulp.task('views', function buildHTML() {
return gulp.src('views/*.pug')
.pipe(pug({
// Your options in here. for example:
doctype: 'html',
pretty: false
}))
});
I need to write a gulp task that will only compile those Typescript files that have actually changed and came up with this:
var gulp = require('gulp');
var print = require('gulp-print');
var newer = require('gulp-newer');
var ts = require('gulp-typescript');
gulp.task('compile:ts', function () {
return gulp.src([
'typings/browser.d.ts',
'app/**/*.ts'
])
.pipe(newer('app'))
.pipe(print(function (filepath) {
return 'Compiling ' + filepath + '...';
}))
.pipe(ts({
target: 'es5',
module: 'commonjs',
moduleResolution: 'node',
sourceMap: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
removeComments: false,
noImplicitAny: false
}))
.pipe(gulp.dest('app'));
});
However, this task doesn't find any modified files although there are .ts files with more recent timestamps than their .js counterpart.
Where did I go wrong?
However, this task doesn't find any modified files although there are .ts files with more recent timestamps than their .js counterpart.
That's because you're not telling gulp-newer to compare .ts files with .js files. You're comparing .ts files with themselves, so there is no change to be detected.
You need to tell gulp-newer to compare each .ts file with its .js counterpart:
.pipe(newer({dest:'app',ext:'.js'}))
There is an easier method of compiling files when they change. Using gulp watch, you can run the function once and whenever you save a change, it'll run the compiling function.
gulp.task('watch', function() {
gulp.watch(['ts/filepaths','more/ts/filepaths'],
['compile:ts','otherFunctionsIfNeeded']);
});
If you rewrite compile:ts to only compile, using the function above, whenever you save a ts file, it will compile it for you
I am basing my project off Google Web Starter Kit and am looking to integrate gulp-preprocess into the gulp pipeline.
I have managed to get it to work for the gulp serve:dist task, the relevant code is:
gulp.task('htmlIncludes', function() {
gulp.src('app/*.html')
.pipe(preprocess({context: { NODE_ENV: 'production', DEBUG: true}}))
.pipe(gulp.dest('./dist/'))
});
gulp.task('default', ['clean'], function (cb) {
runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy', 'htmlIncludes'], cb);
});
However, I am having trouble getting it to work for the gulp:serve task which includes browser sync:
gulp.task('serve', ['styles'], function () {
browserSync({
notify: false,
server: ['.tmp', 'app']
});
I would like to add the htmlIncludes task, so that it is re-run when files are updated while running gulp:serve. However, simply adding it to the list which currently includes 'styles' does not have the desired effect. Any idea what I need to change?
You are totally right, you have to add it to the dependencies of this task to be run at least once. However, this is just half of the story. You have to run your task each time your HTML files have changed, so add it to the respective watch process:
gulp.task('serve', ['styles', 'htmlIncludes'], function () {
browserSync({
notify: false,
logPrefix: 'WSK',
server: ['.tmp', 'app']
});
// here's the change
gulp.watch(['.tmp/**/*.html', 'app/**/*.html'], ['htmlIncludes', reload]);
gulp.watch(['app/styles/**/**/**/**/*.{scss,css}'], ['styles', reload]);
gulp.watch(['app/scripts/**/*.js'], ['jshint']);
gulp.watch(['app/images/**/*'], reload);
});
You also see that this browserSync call just serves .tmp and app folders, while your output is stored in dist. So you have to change your htmlIncludes task, too:
gulp.task('htmlIncludes', function() {
return gulp.src('app/*.html')
.pipe(preprocess({context: { NODE_ENV: 'production', DEBUG: true}}))
.pipe(gulp.dest('./.tmp/'))
.pipe(gulp.dest('./dist/'))
});
If you need separate configurations for each output, we have to tackle it again. But for now it should work as planned.
It also might be possible that you have to run the 'html' task in sequence first, but I'm not that fit in the WSK Gulpfile to answer you that ;-)
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 have a gulp task which uses gulp-imagemin to compress images. When I add new files to this directory I'd like for this task to compress them as well. I read that gulp.watch doesn't trigger on new files and that I should try gulp-watch so I used it like so;
gulp.task('images', function() {
watch({glob: './source/images/*'}, function (files) {
return files
.pipe(plumber())
.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('./www'));
});
});
This works the same as gulp.watch on the first run, but when I add a new image to the directory nothing happens. If I overwrite an existing file however, it DOES run the task again, so it does behave differently.
The documentation on gulp-watch called this "Batch Mode" and said I could also run the task on a per-file basis, so I tried this way too;
gulp.task('images', function() {
gulp.src('./source/images/*')
.pipe(watch())
.pipe(plumber())
.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('./www'));
});
But nothing changed. Why isn't adding files to my image directory triggering the task?
Adding an extra argument {cwd:'./'} in gulp.watch worked for me:
gulp.watch('src/js/**/*.js',{cwd:'./'},['scripts']);
2 things to get this working:
1 Avoid ./ in the file/folder patterns
2 Ensure ./ in the value for cwd
Good Luck.
Ref:- https://stackoverflow.com/a/34346524/4742733
Most likely such kind of questions are redirected to gaze package and its internal processes, that runs complicated watching procedures on your OS. In this case you should pass images/**/* to glob option, so gaze will watch all (including new) files in images directory:
var gulp = require('gulp');
var watch = require('gulp-watch');
var imagemin = require('gulp-imagemin');
gulp.task('default', function() {
watch({glob: 'images/**/*'}, function (files) {
files.pipe(imagemin({
progressive: true,
interlaced: true
}))
.pipe(gulp.dest('./www'));
});
});
But this fill not fix case, when you have empty images directory. If you want to watch them, pass ['images', 'images/**/*'] to glob, and it will watch directory, that initially empty.
P.s. also you dont need gulp-plumber in this case, because watch will rerun function, that uses imagemin every time, even when imagemin pops an error.