I am trying to minify my web components using gulp's uglify plugin but it fails because it does not recognize the custom html tags.
Are there any gulp plugins that can minify html containing custom tags?
Try out gulp-htmlmin.
I use it to minify my elements.html file after vulcanising, but I suppose it should work on non vulcanised elements just as well.
Here's how I call the plugin inside my gulpfile:
.pipe(htmlmin({
removeEmptyAttributes: true,
customAttrAssign: [{"source":"\\$="}],
customAttrSurround: [
[ {"source": "\\({\\{"}, {"source": "\\}\\}"} ],
[ {"source": "\\[\\["}, {"source": "\\]\\]"} ]
],
collapseWhitespace: true,
// always leave one space
// because http://perfectionkills.com/experimenting-with-html-minifier/#collapse_whitespace
conservativeCollapse: true,
minifyJS: true,
minifyCSS: true,
removeComments: true,
removeCommentsFromCDATA: true,
removeCDATASectionsFromCDATA: true
}))
To do this is quite the challenge. You use the crisper plugin to factor out the script into it's own file. You can then minify the script source. Afterwards use vulcanize to inline your script back into the HTML.
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;
Am using gulp-minify-inline plugin to only compress inline javascript and css for sales force pages and component which is basally html code.
Am trying to disable the js minification via option. Could any one suggest what attribute i need it as false?
Plugin url: https://www.npmjs.com/package/gulp-minify-inline
Document: https://github.com/terser/terser
var minifyInline = require('gulp-minify-inline');
var options = {
js: {
output: {
comments: true
},
minify: false -----> Not working
},
jsSelector: 'script[type!="text/x-handlebars-template"]',
css: {
level: {1: {specialComments: 0}}
},
cssSelector: 'style[data-do-not-minify!="true"]'
};
gulp.task('minify-inline', function() {
gulp.src('src/*.html')
.pipe(minifyInline(options))
.pipe(gulp.dest('dist/'))
});
js contains parameters to pass to terser.minify() (for documetation refer to the project homepage). Set it to false to disable JS minification globally
You might try js: false
I'm new in Angular. I saw sourcemap in tsconfig.json and by default it is "sourceMap": true. I had few doubts and found this link useful. Still I have the following doubt regarding the same.
I set "sourceMap": false, but couldn't find any change in the app. What will be the actual change if I set so?
Nothing will change in how the app runs.
The change will be in your debugging experience.
Source maps are helpful for debugging code. You write your code in TypeScript, and the compiler turns that source code into JavaScript. When your app is running in a browser like Firefox, the browser is running the JavaScript. Even though the browser is running that JavaScript, if you open the debugger in Firefox, the debugger will display the TypeScript source code and will let you set break points in it. The debugger is able to do that because of source maps, which map the TypeScript source code to the JavaScript runtime code. That is what source maps do: they map the source code to the runtime code to enable source code debugging at runtime.
sourceMap is just for development experience (debug) and normally you don't need these files in production build and if you check angular.json you will found that it 's set to false for you
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false, <----
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
When the sourceMap set to false. the output will be built with out a sourcemap file. And you can't debug with the browser on ts file without that.
sourcemap property enhances your debugging experience, even though the browser can't be able to understand typescript it manages to map your typescript code to javascript code. if in case we need to disable it we need to modify in angular.json file
{
"sourceMap": false, -- modify this attribute
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
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.
I'm working on an app written using Polymer components and was working on automating some of the unit tests for our custom components. Ideally I'd like to be able to have something like
files: [
'public/js/bower/platform/platform.js',
'node_modules/sinon/pkg/sinon-1.10.2.js',
'public/components/*.html',
{pattern: 'public/components/*.js', included: false, served: true},
{pattern: 'public/js/bower/**', included: false, served: true},
{pattern: 'public/js/*.js', included: false, served: true},
'test/components/polymer-*-tests.js'
],
in my karma.confg.js file, so that it loads any components and tests we add in the future without having to manually add them. However, while this correctly results in <link rel="import">s for all of the components in the components folder, only the first is being properly registered by Polymer (tests for the rest are all failing). If I manually add each component to the list, such as:
files: [
'public/js/bower/platform/platform.js',
'node_modules/sinon/pkg/sinon-1.10.2.js',
'public/components/poly-component-1.html',
'public/components/poly-component-2.html',
'public/components/poly-component-3.html',
{pattern: 'public/components/*.js', included: false, served: true},
{pattern: 'public/js/bower/**', included: false, served: true},
{pattern: 'public/js/*.js', included: false, served: true},
'test/components/polymer-*-tests.js'
],
then everything works fine. I've also gotten it to work if I add something similar to
var link = document.createElement('link');
link.rel = 'import';
link.href = 'base/public/components/<component-name>.html;
document.getElementsByTagName('head')[0].appendChild(link);
at the beginning of each test file, or creating a bootstrap script with
components = [
'polymer-component-1',
'polymer-component-2',
'polymer-component-3'];
for (var i = 0; i < components.length; i++) {
var link = document.createElement('link');
link.rel = 'import';
link.href = '/base/public/components/' + components[i] + '.html';
document.getElementsByTagName('head')[0].appendChild(link);
}
and making sure karma loads it before the tests. However, these three solutions all involve manual edits of files (or remembering to include some boilerplate at the beginning of test files that isn't normally there).
Does anyone have any ideas as to why using the wildcard pattern seems to not be working? Karma does appear to be adding the html imports properly to the context iframes, and the html and js files for the components are being loaded into the browsers. The components just seem to not be registering.
Not sure what error message looks like when you said "tests for the rest are all failing".
However, I personally found something similar, but I nailed it down to the problem that karma could possibly include my html twice. See the issue I logged it to karma-runner project for more info.