Use Grunt, Gulp, broccoli, or brunch to remove unwanted CSS styles from the page

English Original: spring-cleaning Unused CSS with Grunt, Gulp, broccoli or brunch

Want to improve the speed of the web, generally by reducing response time, standardize the css/js/html and the content of the picture. also through optimized css  removing unused css  to increase the loading degree. See how it is implemented. First share some of the available tools. Added grunt-uncss at lunch time to my Sites Gruntfile, CSS file went from 115kb to 3kb! That ' s-97.4% smaller! -ville Hellman (FXN) (@efexen) February Weekend dev–tried grunt-uncss on a bootstrap.css Rails landing page. ~15 minutes for ~100k savings. Diff:https://t.co/majtixrtud -tom fuertes (@thisbetom) February 9, all In the Common UI box Frames such as Twitter Bootstrap, Zurb Foundation, or unused CSS on Adobe topcoat are the main factors that affect performance.   In the bootstrap test below, &NBSP was found by testing  chrome DevTools audits panel, ~ about 90% of CSS rules are not valid .

petert translated 1 years ago 0 Human top   top   Good translation!

This is a problem previously mentioned by the Pagespeed team, and at speed recommendations does the removal of useless CSS operations: "In front of the browser parsing page, you have to download the layout of the stylesheets. Even if you saved the stylesheets in the cache before, you have to wait until the browser finishes downloading the disk stylesheets Before you can begin parsing. Often, many sites use the same external CSS file for layout pages, which is a lot more than the layout of the current page. " Then after testing , you can boldly delete those useless CSS rules to improve the response speed. Apache Pagespeed improves speed through mod_pagespeed, but it may take some effort to add to the project.

Petert Translated over 1 years ago 0 Person Top Top translation of good Oh!

Uncss The uncss of Giacomo Martino is another option for removing useless CSS. The principle is as follows: HTML loads and then runs JavaScript through PHANTOMJS. You need to use the stylesheets to find from HTML. Forms the specified stylesheets and then resolves through css-parse. Document.queryselector filters out queries that are not in the HTML file. Unused CSS is not called. Using Grunt-uncss I wrote a task called Grunt-uncss with Grunt, on the basis of UNCSS can be conveniently placed in your compilation process. If you haven't used Grunt before, it's a good idea to take a look at the tutorial Getting Started, which tells you how to create Gruntfile and how to install and use a search. Once you're familiar with it, you can call it directly from the command: ? 1 npm installgrunt-uncss --save-dev Once the plug-in is loaded, it can be called in Gruntfile by this line of JavaScript code: ? 1 grunt.loadNpmTasks(‘grunt-uncss‘); Ensure that there is no invalid CSS by using GRUNT-UNCSS to specify the appropriate CSS file. The following is an example of dist/css/tidy.css. ? 123456789 uncss: {  dist: {    src: [‘app/about.html‘, ‘app/index.html‘],    dest: ‘dist/css/tidy.css‘    options: {      report: ‘min‘// optional: include to report savings    }  }}

Petert Translated over 1 years ago 0 Person Top Top translation of good Oh!

Below, specify the HTML file that will be scanned for the selected selector as input. In this example, we use an array containing the two files we want to check app/index.html and app/about.html. Then you can use this task, through a processor such as processhtml, with a comment block indicating that your stylesheet is rewritten as tidy.css: ? 12345678910 <!-- Stylesheets we would like cleaned --><!-- build:css css/tidy.css --><!-- just here to make sure we reference css/tidy.css --><linkrel="stylesheet"href="css/bootstrap.css"><!-- /build --><!-- Stylesheets we want to minify as usual --><!-- build:css css/other.css --><linkrel="stylesheet"href="css/main.css"><linkrel="stylesheet"href="css/normalize.css"><!-- /build --> Some of the following configurations let Grunt know where you want to save your final generated files: ? 12345678 processhtml: { &NBSP;&NBSP; dist: { &NBSP;&NBSP;&NBSP;&NBSP; files: { &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; ' dist/index.html ' : [ ' app/ Index.html ' ],         ' dist/about.html ' : [ ' app/about.html ' ]       } &NBSP;&NBSP; " } There are a number of other supported configuration options, including CSS compression, which you can review in the documentation for your project.

Zhao Liang-Blue Sky Translated over 1 years ago 0 Person Top Top translation of good Oh!

Test Run demo project by using the ' Grunt ' command in the code base: The effect is as follows: After removing the invalid Bootstrap CSS, the effect is as follows: You can see that the front and back pages are no different. We just use the necessary CSS style, there's nothing else. But eventually needed Bootstrap CSS file size from 120KB (compressed) to 11kb– nearly 91% of the reduction rate .

Petert Translated over 1 years ago 0 Person Top Top translation of good Oh!

Using Gulp-uncss Ben Briggs also used Gulp to do a similar task gulp-uncss. The steps are as follows: ? 123456789 var gulp = require(‘gulp‘);varuncss = require(‘gulp-uncss‘);gulp.task(‘default‘, function() {    gulp.src(‘site.css‘)        .pipe(uncss({            html: [‘index.html‘, ‘about.html‘]        }))        .pipe(gulp.dest(‘./out‘));}); Using Broccoli-uncss Sindre Sorhus with Broccoli also wrote a similar task broccoli-uncss: ? 12 varuncss = require(‘broccoli-uncss‘);tree = uncss(tree, {html: [‘./index.html‘, ‘./about.html‘]}); Using Brunch-uncss Jakub Burkiewicz Brunch Task Uncss Plugin plugin is also very similar. The previous example operation is configured through the configuration file Config.plugins.uncss in brunch: ? 123456 plugins:      uncss:           options:              CSSPATH:                HTMLROOT:  ' build '          files: [ ' index.html ' ,   ' about.html ' ] What's about CSS pre-processors? I have a simple example here example is through UNCSS (GRUNT-UNCSS) and a similar sass CSS pre-processor. Can be imagined as a series of task chains. This ensures that the sass loads the correct stylesheets and clears the invalid app. This can decouple the relationship between the UNCSS and the business layer.

Petert Translated over 1 years ago 1 Person top Top translation of good Oh!

Conclusion Remember: If you feel you have a CSS usage efficiency problem, don't just think of course, it's better to test it . Use the DevTools audits panel to measure how many invalid CSS you have and try again. My stylesheet file size was around 120K and after grunt-uncss it was around 25K. That ' s pretty neat, Thanks@addyosmani Https://t.co/e8Btu0seFO -matija Marohni? (@silvenon) March 21, 2014 Uncss Of course there are a lot of things that need to be improved, like dynamically generated templates. If you have special needs, please tell us at upstream. If you have a lot of invalid CSS in your project, using UNCSS can get rid of the invalid CSS at compile time and greatly improve the response speed of the Web page. Extending to the Dublin Automating the removal of unused css–velocityconf Use Grunt and uncss to speed up the load time of your site Automating front-end Workflow (slides) Automatically removing unused css–windows Prior Art In addition, there are a lot of developers who have done a lot of work on removing invalid CSS, and the related projects are as follows: Opera ' s UCSS Deadweight Brian Le Roux ' CSS Slap Chop Helium-css Gtmetrix Cssess Python Mincss

Use Grunt, Gulp, broccoli, or brunch to remove unwanted CSS styles from the page