Have ideas to improve npm?Join in the discussion! »

    gulp-progressive-css

    2.1.0 • Public • Published

    gulp-progressive-css

    NPM version Node version Dependency status

    Transfrom <link> in HTML to progressive CSS loading.

    Install

    npm i -D gulp-progressive-css
    # or 
    yarn add -D gulp-progressive-css

    About

    By using this plugin you can easily transform your simple HTML page to super fast HTML page with progressive CSS loading. You can do it by using custom priority attribute with <link> tag.

    <link rel="stylesheet" priority="async"    href="font.css">
    <link rel="stylesheet" priority="critical" href="critical.css">
    <link rel="stylesheet" priority="queued"   href="content.css">
    <link rel="stylesheet" priority="queued"   href="footer.css">

    critical - means what this styles will be embedded into HTML file.

    queued - means what this styles will be loaded asynchronously in specified order and without render blocking.

    async - means what this styles will be loaded asynchronously outside of order and without render blocking.

    API

    gulpProgressiveCSSPlugin([options])

    String options.base

    Base directory to find CSS files.

    Default: ./

    Boolean options.noscript

    Adds <noscript> tag with all styles.

    Default: true

    Boolean options.preload

    <link rel="preload"> will be added to <head> for each style.

    Default: true

    Object|Boolean http1

    All non-critical internal styles will concatenate into one file.

    Default: false

    String http1.dirname

    Path to save concatenated styles, relative to options.base

    Default: ''

    String http1.filename(Stirng htmlFilename)

    Function to generate concatenated styles file name.

    Default: [html filename]-styles.css

    Example

    gulpfile.js

    const gulp = require('gulp'),
        procss = require('gulp-progressive-css');
     
    gulp.task('css', () =>
        gulp.src('src/*.css')
            .pipe(gulp.dest('dist'))
    );
     
    gulp.task('html', gulp.series('css', () =>
        gulp.src('src/*.html')
            .pipe(procss({ base: 'dist' }))
            .pipe(gulp.dest('dist'))
    ));

    NPM

    Install

    npm i gulp-progressive-css

    DownloadsWeekly Downloads

    3

    Version

    2.1.0

    License

    MIT

    Last publish

    Collaborators

    • avatar