Roots Discourse

Gulp hanging up on 'styles' during compile and won't complete


#1

When I attempt to run gulp on my Sage project, it freezes at styles like so:

[08:19:53] Using gulpfile /Applications/MAMP/htdocs/kates/wp-content/themes/kates/gulpfile.js [08:19:53] Starting 'clean'... [08:19:53] Finished 'clean' after 4.32 ms [08:19:53] Starting 'default'... [08:19:53] Starting 'build'... [08:19:53] Starting 'wiredep'... [08:19:55] Finished 'default' after 1.36 s [08:19:55] Finished 'wiredep' after 1.45 s [08:19:55] Starting 'styles'...

This project is a cloned repo from a coworker, and he can gulp with no issues. We’re using the same gulp, node, and npm versions. Are there any reasons for this happening? Thanks.


#2

Carried on from Sage issue #1648.

At one point I had the same error as @DennisKo, and after downgrading node it went back to hanging up on styles.

When you say you went back, did you roll back node on your machine and keep working with the same installation of Sage? If so, how did you roll back (NVM?). Have you tried a fresh install of your repo since then (I’d highly recommend this)?

Have you tried removing all your styles from the gulp file and seeing if it completes? You could also use the NPM gulp-debug package.

Getting a list of all the node modules and versions that you and your college are running would also be useful, also checking via git if there are any unwatched files in your local source which might be causing issues.


#3

When you say you went back, did you roll back node on your machine and keep working with the same installation of Sage?

Yeah I tried working on the same installation to see if any change took place.

If so, how did you roll back (NVM?)

Yeah rolled back with NVM

Have you tried a fresh install of your repo since then (I’d highly recommend this)

Yeah tried removing the install and replacing with a fresh one and reinstalling node globally and locally as well

Have you tried removing all your styles from the gulp file and seeing if it completes?

I’ll give it a try!


#4

So I tried commenting out this section in gulpfile.js (lines 91-98)
.pipe(function() { return gulpif('*.scss', sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], errLogToConsole: !enabled.failStyleTask })); })

It threw an error:

/Applications/MAMP/htdocs/kates/wp-content/themes/kates/styles/main.css:3:4: Unknown word

// Automatically injected Bower dependencies via wiredep (never manually edit this block)
   ^
// bower:scss

BUT it finished compiling, albeit without a styles folder in dist. When I uncommented that block, it started hanging up again.

That path in the error to main.css doesn’t exist. The styles folder is in assets. Helpful?


#5

Gulp should compile css from the assets/styles folder, it looks like somehow gulp is looking in the parent directory, and that should be set up in lines 24-29 of gulpfile.js (see the comments round there). I don’t suppose for some reason, manifest.json contains this code does it?

"files": [
        "../styles/main.scss"
      ],

Given your situation, I think checking that line is correct (it should be "styles/main.scss"), and if it is, setting a paths (it might be ‘path’ not ‘paths’) option manually might help-

"paths": {
  "source": "assets/",
  "dist": "dist/"
}

An additional test- try commenting/uncommenting only theincludePaths option on line 95. I think Gulp fails here because only the sass part of the pipeline is checking in sub-directories, and this comes down to a problem with your directories.

I blame MAMP for all this. assuming you and your colleague both have the latest commit from your common repo (if you have different repos which you’re fetching from, my money is on a mismatch between them), I can’t see how Sage/Gulp would cause this to happen on one machine and not another. On the other hand MAMP can be brittle (I recommend Trellis). I hope this gives you something to go on.


#6

Adding the path option and taking out line 95 did the trick. Styles compiled and seems to be working. I need to look closely at the site to see if it’s all working properly.

Thanks a lot for the insights!


#7

Brief warning- without line 95 you may end up with some files not pulled into your main css file.


#8

I’m having the same issue. I’m not using MAMP but DesktopServer.
It completed the task with errors when I had my bower dependencies but I have sinced removed because one my dependencies inuitcss it was injecting example.main.css which it’s not suppose to and causing problems.
I have since made all those dependencies dev dependencies to prevent wiredep from injecting it.
Gulp now hangs on styles.

Where do I add the path option?


#9

I just wasted about four hours on the same problem, but have fixed it.

I’d included files from Harry Roberts’ excellent inuitcss library, which I brought in via bower.json. Unfortunately, the filenames have changed between beta versions, without the bower package version indicating a problem with compatibility. When gulp-sass can’t find a file it just hangs.

The solution: fix the package version in bower.json rather than relying on the ^ to guarantee compatibility.


#10

Thanks David for the response. What version of inuit are you using and what package version should I change it to.
Currently bower is using ^6.0.0-beta.5. Should I just remove ^ or should I replace with ~?

Thanks again.

PS: Using olivier’s path option in conjunction with moving dependencies to dev , I was able to get the file compiling.


#11

Glad to hear you got it working. I don’t think the paths fix would have worked for me, as at least one file was removed altogether (_tools.rem.scss -
see https://github.com/inuitcss/inuitcss/commit/ca51f2773e9fd893a54c6466acbe6884885fd8b4).

I was using ^6.0.0-beta.4, and changed that to 6.0.0-beta.4. You could try the tilde (~) as that should in theory bring closer compatibility, but I went straight for the fixed version.