gulp-modernizr + blendid doesn't compile finish

[xavianaxw]

What I'm trying to do is add Modernizr to check for touch events

Blendid Version 4.1.1

Problem

As per the title, I'm unable to compile and run my dev server once I added the additionalTask to my task-config. This is a fresh install with nothing out of the ordinary.

Here's my task-config.js

var modernizr = require('gulp-modernizr');

module.exports = {
  html        : true,
  images      : true,
  fonts       : true,
  static      : true,
  svgSprite   : true,
  ghPages     : true,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ["./app.js"]
    }
  },

  browserSync: {
    server: {
      // should match `dest` in
      // path-config.json
      baseDir: 'public'
    }
  },

  production: {
    rev: true
  },

  additionalTasks: {
    initialize(gulp, PATH_CONFIG, TASK_CONFIG) {
      gulp.task('modernizrBuild', function() {
        return gulp.src('../src/javascripts/*.js')
          .pipe(modernizr({
            options: [
              'setClasses',
            ],
            tests: [
              'touchevents',
            ],
            dest: 'modernizr.js',
          }))
          .pipe(gulp.dest("public/"));
      });
    },
    development: {
      prebuild: ['modernizrBuild'],
      postbuild: ['']
    },
    production: {
      prebuild: ['modernizrBuild'],
      postbuild: ['']
    }
  }
}

Here's my output with yarn run blendid

$  yarn run blendid
yarn run v0.24.6
$ "/Users/xavianaxw/Code/modernizr-with-blendid/node_modules/.bin/blendid"
[19:05:19] Working directory changed to ~/Code/modernizr-with-blendid/node_modules/blendid
[19:05:21] Using gulpfile ~/Code/modernizr-with-blendid/node_modules/blendid/gulpfile.js
[19:05:21] Starting 'default'...
[19:05:21] Starting 'clean'...
[19:05:21] Finished 'clean' after 15 ms

[19:05:21] Starting 'modernizrBuild'...
[19:05:21] Finished 'modernizrBuild' after 45 ms
[19:05:21] Starting 'fonts'...
[19:05:21] Starting 'images'...
[19:05:21] Starting 'svgSprite'...
[19:05:21] Finished 'fonts' after 116 ms
[19:05:21] Finished 'images' after 65 ms
[19:05:21] Finished 'svgSprite' after 46 ms
[19:05:21] Starting 'html'...
[19:05:21] Starting 'stylesheets'...
[19:05:21] Finished 'html' after 232 ms
[19:05:21] Finished 'stylesheets' after 213 ms
[19:05:21] Starting 'static'...
[19:05:21] Finished 'static' after 6.14 ms
✨  Done in 2.23s.

The gist that is missing

[18:12:53] Starting 'browserSync'...
[18:12:53] Finished 'browserSync' after 157 ms
[18:12:53] Starting 'watch'...
[18:12:53] Finished 'watch' after 10 ms
[18:12:53] Finished 'default' after 468 ms
[BS] Access URLs:

 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.0.14:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.0.14:3001
 ----------------------------------
[BS] Serving files from: /Users/xavianaxw/Code/modernizr-with-blendid/public
(node:18028) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.co
m/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
webpack: wait until bundle finished: /javascripts/app.js
webpack built adde32e0f34ef4d40a25 in 1169ms

webpack: Compiled successfully.

Package Installed gulp-modernizr

yarn run blendid -- build also doesn't output any modernizr file.

Any advice to the right direction would be greatly appreciated!

[joemidi]

I feel like what you really want is to use modernizr through webpack.

https://www.npmjs.com/package/modernizr-webpack-plugin

[xavianaxw]

@joemidi Never tried this. Seems like a better option for me. Just curious why my build didn't complete for gulp-modernizr

[illycz]

I'm trying https://www.npmjs.com/package/modernizr-webpack-plugin but I'm getting error: TypeError: TASK_CONFIG.javascripts.plugins is not a function

My config:

const ModernizrWebpackPlugin = require('modernizr-webpack-plugin')

module.exports = {
  html        : false,
  images      : true,
  fonts       : true,
  static      : false,
  svgSprite   : true,
  ghPages     : false,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ['./app.js']
    },
    plugins: [
      new ModernizrWebpackPlugin({
        "classPrefix": "",
        "options": [
          "setClasses"
        ],
        "feature-detects": [
          "css/calc"
        ]
      })
    ]
  }
}

[illycz]

I finally used: https://github.com/peerigon/modernizr-loader

My working config:

const path = require('path')

module.exports = {
  html        : false,
  images      : true,
  fonts       : true,
  static      : false,
  svgSprite   : true,
  ghPages     : false,
  stylesheets : true,

  javascripts: {
    entry: {
      // files paths are relative to
      // javascripts.dest in path-config.json
      app: ['./app.js']
    },
    loaders: [
      {
        test: /\.modernizrrc/,
        loader: 'modernizr-loader!json-loader'
      },
    ],
    alias: {
      modernizr: path.resolve(process.env.PWD, './.modernizrrc')
    }
  }
}

And I have .modernizrrc file in project root.

[xavianaxw]

Where would one be able to configure the options for modernizr @illycz ?

[illycz]

In .modernizrrc here is all options from Modernizr: https://github.com/Modernizr/Modernizr/blob/master/lib/config-all.json

If you want add classes to html you must include setClasses option.

[xavianaxw]

Ah yes silly me. Thanks for this @illycz 👍