Napoleon's Pixelated Mugshot

    gulp-modernizr-wezom

    1.1.4 • Public • Published

    gulp-modernizr-wezom

    npm es2015 license Build Status

    🇺🇸 English | 🇷🇺 Русский

    Gulp plugin for moderznir, Wezom studio version

    js happiness style

    Table of contents

    Key Features and Benefits


    Installation

    npm i --save gulp-modernizr-wezom
    # or using yarn cli 
    yarn add gulp-modernizr-wezom

    Example of use

    const gulp = require('gulp');
    const gulpModernizrWezom = require('gulp-modernizr-wezom');
     
    gulp.task('modernizr', function() {
        let src = [
            './dist/**/*.css', // The incoming files in which the tests will be searched
            './dist/**/*.js', // The incoming files in which the tests will be searched
            '!./dist/**/modernizr.js' // Exception of the file of Modernizr library itself
        ];
     
        return gulp.src(src)
            .pipe(gulpModernizrWezom({
                tests: [ // add tests forcibly
                    'touchevents',
                    'ambientlight',
                    'adownload',
                    'canvasblending'
                ],
                customTests: './my-feature-detects/custom-tests/', // path to the custom tests
                excludeTests: [ // exclude unwanted tests
                    'opacity',
                    'checked'
                ],
                 options: [ // add options to the Modernizr library core
                     'setClasses',
                     'mq'
                 ],
                 minify: true // minify the final file of modernizr.js
            }))
            .pipe(gulp.dest('./dist/')); // save the resulting file modernizr.js
    });

    Methods and Properties of the Plugin

    gulpModernizrWezom.pluginName

    String property. Name of the plug-in

    gulpModernizrWezom.pluginVersion

    String property. The version of the plug-in

    gulpModernizrWezom.getMetadata() → {Array.<Object>}

    The method returns metadata of "native" tests of Modernizr as an array

    gulpModernizrWezom.getCustomMetadata (customTests) → {Array.<Object>}

    The method returns the metadata of the "custom" tests of the Modernizr as an array.

    Parameters

    Name Type Description
    customTests string The relative path from the current working directory (process.cwd()) to the directory with your user tests. For more details see customTests

    gulpModernizrWezom( [config] )

    Building modernizr.js.
    The method accepts a configuration, based on which, it searches for the tests in the incoming files

    After - build the file modernizr.js. Even if no tests are specified or detected - the file modernizr.js will still be created, with the core of the library.

    Configuration

    tests

    data type Array.<string>
    by default []

    A list of tests that can be specified as mandatory. If such tests are not available in the incoming files, they will be added to the assembly in the same manner.

    You should specify the names of the tests, as they are specified in the metadata of each test (the property key).
    For example, a test canvas/blending.js has the meaning canvasblending.

    There are some test files that have multiple tests in one file. For example canvas/todataurl.js Includes 3 tests ["todataurljpeg", "todataurlpng", "todataurlwebp"]. If necessary, include any of the three - the rest will also be added, since this is one file.

    Example

    const gulp = require('gulp');
    const gulpModernizrWezom = require('gulp-modernizr-wezom');
     
    gulp.task('modernizr', function() {
        let src = [
            './dist/**/*.css',
            './dist/**/*.js',
            '!./dist/**/modernizr.js'
        ];
     
        return gulp.src(src)
            .pipe(gulpModernizrWezom({
                tests: [
                    'touchevents',
                    'ambientlight',
                    'adownload',
                    'canvasblending'
                ],
            }))
            .pipe(gulp.dest('./dist/'));
    });
    customTests

    data type string
    by default undefined

    The relative path from the current working directory (process.cwd()) to the directory with your user tests

    There are several points that you must follow and know in order to correctly include your tests in the general build:

    1. Within the directory, only js files should be located.
    2. You must specify the path to the parent directory of all tests, inside you can break your tests into sub-directories, they will be included as well.
    3. The path to your directory should NOT contain a directory named feature-detects, as an example you can use the namemy-feature-detects
    4. You can specify only one path to the directory you need
    5. Each test file must have the correct file structure, in order to correctly build the metadata Modernizr. File sample - my-feature-detects/sample.js, sample user test - my-feature-detects/custom-tests/android.js
    6. If you specify the name of the test, which is already in the list of "native" tests of Modernizr - then you will rewrite it with your own.
    excludeTests

    data type Array.<string>
    by default []

    A list of tests that should be excluded from the assembly, under any circumstances.
    The name rules are the same as for the tests property

    Example

    const gulp = require('gulp');
    const gulpModernizrWezom = require('gulp-modernizr-wezom');
     
    gulp.task('modernizr', function() {
        let src = [
            './dist/**/*.css',
            './dist/**/*.js',
            '!./dist/**/modernizr.js'
        ];
     
        return gulp.src(src)
            .pipe(gulpModernizrWezom({
                tests: [
                    'touchevents',
                    'ambientlight',
                    'adownload',
                    'canvasblending'
                ],
                customTests: './my-feature-detects/custom-tests/',
                excludeTests: [
                    'opacity',
                    'checked'
                ]
            }))
            .pipe(gulp.dest('./dist/'));
    });
    classPrefix

    data type string
    by default undefined

    A string that is added before each CSS class.

    For example, if you specify classPrefix: 'supports-', then Modernizr will add CSS classes to the html element with this prefix, like assupports-no-ambientlight supports-canvas.

    Also read the section Search for tests in .js and.css files, for more information.

    options

    data type Array.<string>
    by default []

    A list of options that can be added to build the Modernizr.

    If additional options are required for certain tests, they will be added automatically (based on the metadata of each test, for example hasEvent will be automatically added during the test ambientlight)

    Example

    const gulp = require('gulp');
    const gulpModernizrWezom = require('gulp-modernizr-wezom');
     
    gulp.task('modernizr', function() {
        let src = [
            './dist/**/*.css',
            './dist/**/*.js',
            '!./dist/**/modernizr.js'
        ];
     
        return gulp.src(src)
            .pipe(gulpModernizrWezom({
                tests: [
                    'touchevents',
                    'ambientlight',
                    'adownload',
                    'canvasblending'
                ],
                customTests: './my-feature-detects/custom-tests/',
                excludeTests: [
                    'opacity',
                    'checked'
                ],
                options: [
                    'setClasses',
                    'mq'
                ]
            }))
            .pipe(gulp.dest('./dist/'));
    });
    minify

    data type boolean
    by default false

    Minify the resulting file modernizr.js.

    You can also use alternative methods for minimization, for example using gulp-uglify and, if need, gulp-sourcemaps

    Example

    const gulp = require('gulp');
    const gulpModernizrWezom = require('gulp-modernizr-wezom');
    const gulpUglify = require('gulp-uglify');
    const gulpSourcemaps = require('gulp-sourcemaps');
     
    gulp.task('modernizr', function() {
        let src = [
            './dist/**/*.css',
            './dist/**/*.js',
            '!./dist/**/modernizr.js'
        ];
     
        return gulp.src(src)
            .pipe(gulpModernizrWezom({
                tests: [
                    'touchevents',
                    'ambientlight',
                    'adownload',
                    'canvasblending'
                ],
                customTests: './my-feature-detects/custom-tests/',
                excludeTests: [
                    'opacity',
                    'checked'
                ],
                options: [
                    'setClasses',
                    'mq'
                ]
            }))
            
            .pipe(gulpSourcemaps.init())
            .pipe(gulpUglify({
                mangle: {
                 reserved: ['Modernizr']
                }
            }))
            .pipe(gulpSourcemaps.write('/'))
            
            .pipe(gulp.dest('./dist/'));
    });

    Search for tests in .js and .css files

    To search for the necessary tests, the content of each incoming file is used. Text content is tested by regular expressions, which are compiled for each of the tests.

    If a match is found, the test is added to the general build.

    CSS files

    To find the tests, plugin use the following regular expression:

    /\.(no-)?TEST\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g

    TEST - name of each test in the loop.
    A few examples:

    /\.(no-)?adownload\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.(no-)?canvas\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.(no-)?cssanimations\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.(no-)?opacity\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.(no-)?touchevents\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    // ...

    If you use the property classPrefix, then the search for the tests in CSS files will also be performed taking into account the value of this property.

    An example of a regular expression for searching, if classPrefix: 'supports-'

    /\.supports-(no-)?adownload\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.supports-(no-)?canvas\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.supports-(no-)?cssanimations\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.supports-(no-)?opacity\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    /\.supports-(no-)?touchevents\b[^-](((?![\{|\}]).|(\r)?\n)*)\{/g
    // ...

    JS files

    Property classPrefix - does not affect the search in js files.
    To find the tests, plugin use the following regular expression:

    /Modernizr\.TEST\b[^-]/g

    TEST - name of each test in the loop.
    A few examples:

    /Modernizr\.adownload\b[^-]/g
    /Modernizr\.canvas\b[^-]/g
    /Modernizr\.cssanimations\b[^-]/g
    /Modernizr\.opacity\b[^-]/g
    /Modernizr\.touchevents\b[^-]/g
    // ...

    Project Info

    Install

    npm i gulp-modernizr-wezom

    DownloadsWeekly Downloads

    5

    Version

    1.1.4

    License

    MIT

    Last publish

    Collaborators

    • dutchenkooleg