Bug: gulp-useref 3.0.3 version fails

[rbatllet]

My project works GREAT with the version 2.1.0, but it FAILS with the new version 3.0.3.

Here is this message: File not found with singular glob

events.js:142
      throw er; // Unhandled 'error' event
      ^

Error: Error: File not found with singular glob: /myproject/.tmp/styles/main.css
    at DestroyableTransform.<anonymous> (/myproject/node_modules/gulp-useref/index.js:135:44)
    at emitOne (events.js:83:20)
    at DestroyableTransform.emit (events.js:170:7)
    at emitOne (events.js:78:13)
    at DestroyableTransform.emit (events.js:170:7)
    at Glob.<anonymous> /myproject/node_modules/gulp-useref/node_modules/glob-stream/index.js:38:16)
    at Glob.g (events.js:261:16)
    at emitOne (events.js:78:13)
    at Glob.emit (events.js:170:7)
    at Glob._finish (/myproject/node_modules/gulp-useref/node_modules/glob/glob.js:172:8)
    at done (/myproject/node_modules/gulp-useref/node_modules/glob/glob.js:159:12)
    at Glob._processSimple2 (/myproject/node_modules/gulp-useref/node_modules/glob/glob.js:652:12)
    at /myproject/node_modules/gulp-useref/node_modules/glob/glob.js:640:10
    at Glob._stat2 (/myproject/node_modules/gulp-useref/node_modules/glob/glob.js:736:12)
    at lstatcb_ (/myproject/node_modules/gulp-useref/node_modules/glob/glob.js:728:12)
    at RES (/myproject/node_modules/inflight/inflight.js:23:14)

[jonkemp]

Please post the gulp task.

[rbatllet]

The gulp task is:

gulp.task('compress', function() {
  return gulp.src(appConfig.app + '/index.html')
    .pipe(useref.assets())
    .pipe(gulpif('*.js', uglify({
      mangle: false
    })))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest(appConfig.dist));
});

[jonkemp]

I'm guessing you have a bad path. Try gulp-debug.

[jonkemp]

Oh I see it says, File not found with singular glob: /myproject/.tmp/styles/main.css that file doesn't exist, so there's your bad path.

[rbatllet]

It's not a bad path. This version affects other people in the same project with the same error.

But the previous version 2.1.0 WORKS without any change.

[jonkemp]

Oh, your task is wrong for one. Here is the correct usage.

https://github.com/jonkemp/gulp-useref#usage

Are you sure you are on 3.0.3? You might try uninstalling and reinstalling. With the above task, you should get an error in 3.0.x.

[rbatllet]

I've removed node_modules completely and installed all again. I've replaced pipe(useref.assets()) by pipe(useref()) and the same error message.

I've found out that only the errors appears when the .tmp folder does not exist. If it exists all works but only happens in this version 3.0.3

[rbatllet]

I seems that useref does not wait the tasks 'babel' and 'less' are finished before.

gulp.task('compress', ['babel', 'less'], function() {
  return gulp.src(appConfig.app + '/index.html')
    .pipe(useref())
    .pipe(gulpif('*.js', uglify({
      mangle: false
    })))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest(appConfig.dist));
});

[nathanhleung]

Same thing's happening for me with v3.0.4; I had to downgrade to v3.0.0 to get it working again.

Error on v3.0.4: https://travis-ci.org/LeungEnterprises/leungenterprises.github.io/builds/98040460 Works on v3.0.0: https://travis-ci.org/LeungEnterprises/leungenterprises.github.io/builds/98041242

[jonkemp]

@rbatllet if so, that's a problem with gulp not useref.

@nathanhleung what do you mean by 'same thing'?

[rbatllet]

But the version 2.1.0 does work!. And It's necessary to add pipe(useref.assets()) instead of pipe(useref()) to get the uglified javascript and the minified css in the destination folder.

Note: the v3.0.4 does not work, either.

[jonkemp]

@rbatllet 'babel' and 'less' not finishing before useref is not the issue then.

Can you post the gulpfile.js for 3.0.x and html or snippets with the build blocks?

[rbatllet]

The temporary ".tmp" is used to transpile ES6 to ES5 and LESS to CSS. If the ".tmp" directory does not exists previously, it shows the error File not found with singular glob

My build tasks that does not work with 3.0.x (but does with v2.1.0 replacing pipe(useref()) by pipe(useref.assets())).

var appConfig = {
  app: require('./bower.json').appPath || 'app',
  temp: '.tmp',
  dist: 'dist'
};

gulp.task('jshint', function() {
  return gulp.src(appConfig.app + '/scripts/**/*.js')
    .pipe(plumber({
      errorHandler: onError
    }))
    .pipe(jshint('.jshintrc'))
    .pipe(jshint.reporter(stylish))
    .pipe(jshint.reporter('fail'));
});

gulp.task('babel', ['jshint'], function() {
  return gulp.src(appConfig.app + '/scripts/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(rename(function(path) {
      path.extname = '.es5.js';
    }))
    .pipe(ngAnnotate())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(appConfig.temp + '/scripts'))
    .pipe(connect.reload());
});

gulp.task('less', function() {
  return gulp.src(appConfig.app + '/styles/main.less')
    .pipe(less())
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest(appConfig.temp + '/styles'))
    .pipe(connect.reload());
});

gulp.task('compress', ['babel', 'less'], function() {
  return gulp.src(appConfig.app + '/index.html')
    .pipe(useref())
    .pipe(gulpif('*.js', uglify({
      mangle: false
    })))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest(appConfig.dist));
});

gulp.task('copy:resources', function() {
  gulp.src(appConfig.app + '/index.html')
    .pipe(useref())
    .pipe(gulp.dest(appConfig.dist));
  gulp.src('bower_components/bootstrap/dist/fonts/*')
    .pipe(gulp.dest(appConfig.dist + '/fonts'));
  gulp.src('bower_components/font-awesome/fonts/*')
    .pipe(gulp.dest(appConfig.dist + '/fonts'));
  gulp.src(appConfig.app + '/fonts/*')
    .pipe(gulp.dest(appConfig.dist + '/fonts'));
  gulp.src(appConfig.app + '/resources/*')
    .pipe(gulp.dest(appConfig.dist + '/resources'));
});

gulp.task('copy:images', function() {
  gulp.src(appConfig.app + '/images/**.{png,jpg,jpeg,gif}')
    .pipe(gulp.dest(appConfig.dist + '/images'));
  gulp.src(appConfig.app + '/styles/patterns/**.{png,jpg,jpeg,gif}')
    .pipe(gulp.dest(appConfig.dist + '/styles/patterns'));
  gulp.src(appConfig.app + '/styles/editor/**.{png,jpg,jpeg,gif}')
    .pipe(gulp.dest(appConfig.dist + '/styles/editor'));
});

gulp.task('htmlmin', function() {
  return gulp.src(appConfig.app + '/views/**/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      conservativeCollapse: true,
      collapseBooleanAttributes: true,
      removeCommentsFromCDATA: true,
      removeOptionalTags: true
    }))
    .pipe(gulp.dest(appConfig.dist + '/views'));
});

gulp.task('build', ['compress', 'copy:resources', 'copy:images', 'htmlmin'], function() {
  return gulp.src(appConfig.dist + '/**/*').pipe(size({
    title: 'build',
    gzip: false,
    showFiles: true
  }));
});

[jonkemp]

@rbatllet can you post your html snippets with the build blocks? Doesn't have to be the whole file. Like so:

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script>
    <script type="text/javascript" src="scripts/two.js"></script>
    <!-- endbuild -->
</body>
</html>

Also, are you calling the compress task directly or are you calling it via the build task?

[rbatllet]

The CSS block:

  <!-- build:css(.) styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" />
  <link rel="stylesheet" href="bower_components/animate/animate.css" />
  <link rel="stylesheet" href="bower_components/metisMenu/dist/metisMenu.css" />
  <link rel="stylesheet" href="bower_components/select2/select2.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css(.tmp) styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild -->

The JS block:

<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
<script src="bower_components/PACE/pace.js"></script>
<script src="bower_components/metisMenu/dist/metisMenu.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-modal-service/dst/angular-modal-service.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-select2/dist/angular-select2.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/typeahead.js/dist/typeahead.bundle.js"></script>
<script src="bower_components/angular-typeahead/angular-typeahead.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- Custom javascript -->
<script src="scripts/vendor/theme.es5.js"></script>
<!-- Angular App -->
<script src="scripts/app.es5.js"></script>
<script src="scripts/config/app-config.es5.js"></script>
<script src="scripts/services/sourceData.es5.js"></script>
<script src="scripts/services/persistence.es5.js"></script>
<script src="scripts/controllers/dashboard.es5.js"></script>
<script src="scripts/controllers/elements.es5.js"></script>
<script src="scripts/directives/preventClick.es5.js"></script>
<script src="scripts/filters/dateFormat.es5.js"></script>
<script src="scripts/filters/startCase.es5.js"></script>
<script src="scripts/locales/locale.es5.js"></script>
<!-- endbuild -->

[jonkemp]

@rbatllet have you tried using gulp-debug? If so, which files are ending up in the stream? Or does it error first? If it errors first and then stops, try each block individually to see which one fails.

Also, how are you running it? Are you calling the compress task directly or are you calling it via the build task?

[nathanhleung]

I'm getting a File not found with singular glob: error, which only appears on v3.0.4. When I run the gulpfile with v3.0.0, no errors are reported and everything works fine.

[jonkemp]

@nathanhleung can you post your gulpfile.js? What about if you run v3.0.1-3?

[rbatllet]

@jonkemp I tried gulp-debug but it does not show extra info.

I'm calling the compress task indirectly. I call gulp build task from the command line always.

[jonkemp]

@rbatllet your gulpfile has this task:

gulp.task('build', ['compress', 'copy:resources', 'copy:images', 'htmlmin'], function() {
  return gulp.src(appConfig.dist + '/**/*').pipe(size({
    title: 'build',
    gzip: false,
    showFiles: true
  }));
});

When you run build, the compress, copy and htmlmin tasks are not run in order. I'm wondering if the htmlmin task interferes with useref. Try running gulp compress and see if the error still occurs. If it does, see if you can isolate individual build blocks and see which one causes the problem.

[rbatllet]

@jonkemp I've found the error. It's my fault.

This piece of code needs to be removed from copy:resources task:

 gulp.src(appConfig.app + '/index.html')
    .pipe(useref())
    .pipe(gulp.dest(appConfig.dist));

Now It works with 3.0.4 as well.

Thanks for your support and patience!.

[jonkemp]

@rbatllet :metal: