Gulp html task got Unknown Word error

[redodonut]

I've execute gulp html inside of my new folder yeoman-webapp generated project

oyt@oyt:~/yeoman/new$ gulp html
[05:39:27] Requiring external module babel-register
[05:39:32] Using gulpfile ~/yeoman/new/gulpfile.babel.js
[05:39:32] Starting 'styles'...
[05:39:33] Starting 'scripts'...
[05:39:39] Finished 'styles' after 7.16 s
[05:39:40] Finished 'scripts' after 6.64 s
[05:39:40] Starting 'html'...

Then an error was appeared

events.js:160
throw er; // Unhandled 'error' event
^
Error: /home/oyt/yeoman/new/index.html:1:1: Unknown word> 1 |
| ^
2 |
3 |

I have checked anything related with it, fundamentally from gulp.task function inside of the gulpfile.babel.js but i don't understand yet. I have no change with my gulp html function task... (still default)

gulp.task('html', ['styles', 'scripts'], () => {
return gulp.src('app/.html')
.pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
.pipe($.if('.css', $.cssnano()))
.pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
.pipe(gulp.dest('dist'));
});

Beside of that, I have also checked the html file format and i think it's Okay (no error) with a sublime linter.

[silvenon]

I'm curious about those conditional comments for IE7, as we don't have those. What did you change exactly and which version of generator did you scaffold your project with?

[martisj]

I've got a similar error with v2.0.0 of the generator. uglify seems to be throwing an error

[13:03:48] Plumber found unhandled error:
 Error in plugin 'gulp-uglify'
Message:
    {...}/app/index.html: SyntaxError: Unexpected token: operator (<)
Details:
    fileName: {...}/app/index.html
    lineNumber: 1

[silvenon]

It looks like gulp-uglify is trying to parse HTML, I wonder why…

Does this happen on fresh install or are there some steps to reproduce this? There have been few releases since v2.0.0, does upgrading and building again help?

[michael2h4ng]

@silvenon I've encountered the same issue on a fresh install.

After commenting out line 57 and 58 in gulpfile.babel.js, it ran as normal. It looks like both gulp-uglify and gulp-cssnano were trying to parse HTML. Could it be something wrong with gulp-if?

[silvenon]

@monomichael maybe, does it help to update gulp-if, if you don't already have the latest version?

[michael2h4ng]

@silvenon Yes, it does. After updating gulp-if to 2.0.2, the issue no longer exists.

[silvenon]

Awesome! In the recent versions of generator-webapp we already have gulp-if updated, so hopefully this isn't an issue anymore. I will gladly reopen if someone still has problems with this. 😉

[sherifsaleh]

I still have the same problem eventhough i ihave gulp-if updated to 2.0.2

[21:39:12] CLI version 1.2.2
[21:39:12] Local version 3.9.1
"gulp-if": "^2.0.2"
node v7.1.0

[silvenon]

@sherifsaleh does this happen on a fresh install? Did you modify anything else? Is your gulp-useref up-to-date?

[hamedtaha]

i'm also having the same problem

"gulp-if": "^2.0.2"
node v6.9.3

[silvenon]

@hamedtaha are you using the latest version of generator-webapp?

[hamedtaha]

Yes I have the latest 'web-app' generator
I'm trying to build my code then I got that error

[silvenon]

@hamedtaha so this happens on a fresh install or did you modify anything? Could you paste your gulpfile.js?

[hamedtaha]

In my HTML code I've Used a code formatter plugin (in sublime text)
and it changed some spaces , this line was causing the error

<!-- build:js scripts/vendor/modernizr.js --> <script src="/bower_components/modernizr/modernizr.js" type="text/javascript"> </script><!-- [new line] [new line] endbuild [new line] -->

when i changed it to
<!-- build:js scripts/vendor/modernizr.js --> <script src="/bower_components/modernizr/modernizr.js" type="text/javascript"></script> <!-- endbuild -->

then the 'gulp' command went fine and it builds the 'dist' code , but without any js or css linking :( that also was strange

[silvenon]

I don't understand. The [new line] that you described don't match the generated index.html. It should look like this: <!-- build:js scripts/vendor/modernizr.js -->[new line]<script src="/bower_components/modernizr/modernizr.js" type="text/javascript"></script>[new line]<!-- endbuild -->

Could you paste your index.html?

[hamedtaha]

when I paste my HTML here the website removes all whitespaces
but here is a screenshot of the code

errors was because of the white spaces

and here the gulp task is building with no errors

after that, it is working
but all the background-images in the SCSS files have a wrong path

[silvenon]

This:

<!--
endbuild
    -->

couldn't have happened with our setup, you did that somehow. Maybe that's what was throwing gulp-useref off.

How are background images related? Also, those URLs aren't processed in any way.

[hamedtaha]

sublime text HTML code formatting plugin caused that
and the background images issue I think that is a problem from my side

[silvenon]

Ok, let's back up 😄 what is the issue exactly?

[hamedtaha]

:D
the error was a javascript parsing error
events.js:141
throw er; // Unhandled 'error' event
^

[silvenon]

But you said that it's working after fixing that endbuild whitespace, or?

[hamedtaha]

yes after fixing the white spaces everything is working now

[PlkMarudny]

I have the same problem, gulp-webapp downloaded on 21st march, a clean project without Bootstrap, Windows,

`[20:05:42] Starting 'html'...

events.js:160
throw er; // Unhandled 'error' event
^
Error
at new JS_Parse_Error (eval at (C:\Users\toplonka\Documents\js\test\node_modules\uglify-js\tools\node.js:28:1), :1534:18)`

[neilhem]

@PlkMarudny looks like you have invalid javascript code

[PlkMarudny]

I have just tried to build a clean project, no javascript on my own; scaffolder and tried to build.

[neilhem]

I recommend updating dependencies via rm -rf node_modules && npm install, also check project dependencies outdated or not via npm outdated.