All geek questions in one place

Grunt task: removing lines between markers in an HTML file

In development, we are testing unminified css files. At the assembly, we compress and combine them. Then I would like to remove the uncompressed css link elements between the first two comments and uncomment the link in the generated combined.min.css file. Any ideas!

 <!-- __css --> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/base.css" /> <!-- css__ --> <!-- __cssmin <link rel="stylesheet" href="css/combined.min.css" /> cssmin__ -->

Thanks!

+2
source share
2 answers

You don’t mention how you do your assembly (usually it will be combined, as in the default task in the Grunt file below), but if you only need to change individual links to one mini link just try grunt-usemin to get the job done - see . replacement task in the Grunt file.

HTML

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>usemin</title> <!-- build:css css/combined.min.css --> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/base.css" /> <!-- endbuild --> </head> <body> <h1>usemin</h1> </body> </html>

Gruntfile

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), copy: { dist: { files: [ {src: 'index.html', dest: 'dist/index.html'} ] } }, 'useminPrepare': { options: { dest: 'dist' }, html: 'index.html' }, usemin: { html: ['dist/index.html'] } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-usemin'); grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'cssmin', 'usemin']); grunt.registerTask('replace', ['copy', 'usemin']); };

HTML Result

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>usemin</title> <link rel="stylesheet" href="css/combined.min.css"> </head> <body> <h1>usemin</h1> </body> </html>
+5
source

I think the correct approach here is to have two html files. One that uses a smaller version and others that use plain CSS. You may have index.html containing shared.min.css and dev.index.html having other files. If you use grunt to modify html, you need another mechanism to return this operation and leave the file in its original state. This again leads to the generation of two different files.

If this does not work, you can create a new custom grunt task that reads the contents of the file, deletes the original css and replaces it with an abridged version:

 var fileContent = '\ ...\ <!-- __css -->\ <link rel="stylesheet" href="css/reset.css" />\ <link rel="stylesheet" href="css/base.css" />\ <!-- css__ -->\ ...\ '; var minified = '<link rel="stylesheet" href="css/combined.min.css" />'; var part1 = fileContent.split("<!-- __css -->"); var part2 = part1[1].split("<!-- css__ -->"); var result = part1[0] + minified + part2[1]; console.log(result);

The above code creates:

 ...<link rel="stylesheet" href="css/combined.min.css" />...

JSfiddle http://jsfiddle.net/krasimir/WL3bZ/

0
source

Source: https://habr.com/ru/post/955917/

More articles:


All Articles