gulp-critical-css - Extract critical css rules into a seperate stylesheet

  •        12

This module allows to put a (blocking) lightweight CSS-File with critical style information into the HTML-head and the full CSS at the end of the body. This may increase loading and parsing time of your website and avoids a FOUC.

https://mscharl.github.io/gulp-critical-css
https://github.com/mscharl/gulp-critical-css

Dependencies:

gulp-util : ^3.0.7
lodash.assign : ^4.0.9
postcss : ^5.0.21
pretty-hrtime : ^1.0.2
through2 : ^2.0.1

Tags
Implementation
License
Platform

   




Related Projects

gulp-clean-css - Minify css with clean-css.

  •    Javascript

This is just a simple gulp plugin, which means it's nothing more than a thin wrapper around clean-css. If it looks like you are having CSS related issues, please contact clean-css. Only create a new issue if it looks like you're having a problem with the plugin itself. See the CleanCSS options.

critical-path-css-demo - Above-the-fold CSS generation + inlining using Critical & Gulp

  •    ApacheConf

Generate and inline critical-path CSS example using Critical. Live demo of before and after critical-path CSS generation and inlining.

gulp-postcss - Pipe CSS through PostCSS processors with a single parse

  •    Javascript

PostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once.Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.

gulp-purifycss - Removed unused CSS with the gulp build tool

  •    Javascript

Removed unused CSS with the gulp build tool


gulp-svg-sprite - SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours

  •    Javascript

This document covers only gulp specific installation and configuration aspects. For a full list of features and options, please see the svg-sprite manual. NOTICE: By default, svg-sprite doesn't send any files downstream unless you configure it. There are tons of options available — please see below for some basic examples. Also, you should possibly take care of errors that might occur.

gulp-inline-css - Inline linked css in an html file. Useful for emails.

  •    Javascript

Inline your CSS properties into the style attribute in an html file. Useful for emails. Inspired by the grunt plugin grunt-inline-css. Uses the inline-css module.

gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets

  •    Javascript

Inspired by the grunt plugin grunt-useref. It can handle file concatenation but not minification. Files are then passed down the stream. For minification of assets or other modifications, use gulp-if to conditionally handle specific types of assets. Changes under the hood have made the code more efficient and simplified the API. Since the API has changed, please observe the usage examples below.

penthouse - Generate critical css for your urls

  •    HTML

Penthouse is the original critical path css generator, helping you out to speed up page rendering for your websites. Supply your site's full CSS and the page you want to create the critical CSS for, and Penthouse will return the critical CSS needed to perfectly render the above the fold content of the page. Read more about critical path css here. The process is automatic and the generated CSS is production ready as is. Behind the scenes Penthouse is using puppeteer to generate the critical css via the chromium:headless.

gulp-cssnano - Minify CSS with cssnano.

  •    Javascript

Minify CSS with cssnano. Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

gulp-responsive - gulp-responsive generates images at different sizes

  •    Javascript

gulp-responsive depends on sharp. Sharp is one of the fastest Node.js modules for resizing JPEG, PNG, WebP and TIFF images. If you are using Mac OS then before installing gulp-responsive you should install the libvips library. Further information and instructions can be found in the sharp installation guide.

gulp-bump - Bump any version in any file which supports semver with gulp (gulpjs.com)

  •    Javascript

gulp-bump v2 supports Any valid semver in any filetype. ####You can view more examples in the example folder.

gulp-autoprefixer - Prefix CSS

  •    Javascript

Issues with the output should be reported on the Autoprefixer issue tracker.Improve your JavaScript skills with this awesome ES6 course by Wes Bos. Try his free JavaScript 30 course for a taste of what to expect. You might also like his React & Sublime course.

gulp-rev-replace - Rewrite occurences of filenames which have been renamed by gulp-rev

  •    Javascript

Pipe through a stream which has both the files you want to be updated, as well as the files which have been renamed. For example, we can use gulp-useref to concatenate assets in an index.html, and then use gulp-rev and gulp-rev-replace to cache-bust them.

gulp-sass - SASS plugin for gulp

  •    Javascript

Sass plugin for Gulp. Before filing an issue, please make sure you have Updated to the latest Gulp Sass and have gone through our Common Issues and Their Fixes section.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.