# El Capitan – gulp watch not responding

**URL:** https://discourse.roots.io/t/el-capitan-gulp-watch-not-responding/4874
**Category:** bedrock
**Created:** 2015-10-01T19:28:08Z
**Posts:** 27

## Post 1 by @poggen — 2015-10-01T19:28:08Z

Upgraded to El Capitan last night – really enjoying the increased speed, but it screwed with my dev environment. I was able to update VirtualBox and Vagrant without a problem, but when I try to run `gulp watch` from my theme location it opens a tab that doesn’t respond. I’ve tried `vagrant provision` as well as `vagrant reload` after upgrading. I can ssh into the vagrant box without a problem. Anyone else who encountered the same issue?

---

## Post 2 by @smutek — 2015-10-01T21:24:12Z

Ughh. I updated my home computer last night as well. Vagrant was fine. but it was pretty late so I didn’t do much in the way of testing.

I’ll give it a go when I get home and post back. Maybe it’s being caused by the new System Integrity Protection thing in El Cap?

---

## Post 3 by @mAAdhaTTah — 2015-10-01T22:12:17Z

If you upgraded to the latest version of node (4.0+), then you’ll need to delete your `node_modules` folder and run `npm install` again. So it may not necessarily be El Capitan-related.

---

## Post 4 by @smutek — 2015-10-01T22:31:45Z

Yeah, I just got home and checked it on my system, no issues here.

I’m apparently running a pretty old version of node - v- 0.12.2, holy cow!

---

## Post 5 by @mAAdhaTTah — 2015-10-02T11:45:33Z

lol you’re actually not; it went from 0.12.7 to 4.0 after the merge with iojs.

---

## Post 6 by @poggen — 2015-10-02T17:33:07Z

I’ve now reinstalled node, npm, deleted node\_modules and run npm install inside my theme. Still not getting gulp watch to work. Nobody else who experienced any issues with this after upgrading to El Capitan?

---

## Post 7 by @smutek — 2015-10-03T15:18:18Z

This is a dumb question, but do you have the correct development URL set in manifest.json?

---

## Post 8 by @smutek — 2015-10-03T15:44:02Z

> [@mAAdhaTTah](#):
>
> lol you’re actually not; it went from 0.12.7 to 4.0 after the merge with iojs.

Ha, cool! Good to know that!

I updated node to the latest anyway - it’s worth point out that I also had to delete node\_modules, but on npm install I got a ton of EACCES errors, even though I have my permissions and such set correctly.

I’m assuming this is something to do with El Cap, or possibly the permissions were changed when I upgraded node.

At any rate, [this](https://github.com/npm/npm/issues/6663) got me sorted out and everything seems to be working fine now.

---

## Post 9 by @poggen — 2015-10-03T20:58:21Z

Yes, i have `[mydomain].dev` as the dev url in `manifest.json`. Used to work great on Yosemite. I can ping the address, and I can ssh into the vagrant machine, as I mentioned earlier. I can reach the browersync UI at [http://192.168.1.2:3001](http://192.168.1.2:3001) – isn’t that weird?

I’ve done the EACCESS-fix as well (and rerunning `npm install -g bower gulp` etc, afterwards). Still not working…

---

## Post 10 by @poggen — 2015-10-03T21:21:55Z

Just a shot in the dark here – could this have anything to do with the issue?

When I run `vagrant ssh` and then try `sudo service nginx restart`, it fails? Running `sudo service nginx -t` gives the following output:

```
nginx: [emerg] invalid number of arguments in "add_header" directive in /etc/nginx/sites-enabled/brostroms150.se.conf:18
```

Here are the contents of that file:

```
# Ansible managed: /Users/Oscar/Sites/brostroms150.se/ansible/roles/wordpress-setup/templates/wordpress-site.conf.j2 modified on$

server {
  listen 80;

  server_name brostroms150.dev ;
  access_log /srv/www/brostroms150.se/logs/access.log;
  error_log /srv/www/brostroms150.se/logs/error.log;

  root /srv/www/brostroms150.se/current/web;
  index index.php;

  charset utf-8;

  # See Virtualbox section at http://wiki.nginx.org/Pitfalls
  sendfile off;

  add_header X-Content-Type-Options "nosniff" always;
  add_header X-Frame-Options SAMEORIGIN;
  add_header X-Xss-Protection "1; mode=block" always;

  include includes.d/brostroms150.se/*.conf;
  include wordpress.conf;

  location ~ \.php$ {
    try_files $uri =404;
    include fastcgi_params;
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
    fastcgi_param DOCUMENT_ROOT $realpath_root;
    fastcgi_pass unix:/var/run/php5-fpm-wordpress.sock;
    }
}
```

---

## Post 11 by @mathewc — 2015-10-03T22:53:05Z

I don’t think that error has anything to do with your issue, but what does nginx -V output for your vagrant machine?

And can you show/post your gulpfile?

---

## Post 12 by @poggen — 2015-10-04T08:47:11Z

`nginx -V` outputs: `service ver. 0.91-ubuntu1`.

My gulpfile is basically Sage vanilla and looks like this:

```
// ## Globals
var argv = require('minimist')(process.argv.slice(2));
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var changed = require('gulp-changed');
var concat = require('gulp-concat');
var flatten = require('gulp-flatten');
var gulp = require('gulp');
var gulpif = require('gulp-if');
var imagemin = require('gulp-imagemin');
var jshint = require('gulp-jshint');
var lazypipe = require('lazypipe');
var less = require('gulp-less');
var merge = require('merge-stream');
var minifyCss = require('gulp-minify-css');
var plumber = require('gulp-plumber');
var rev = require('gulp-rev');
var runSequence = require('run-sequence');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

// See https://github.com/austinpray/asset-builder
var manifest = require('asset-builder')('./assets/manifest.json');

// `path` - Paths to base asset directories. With trailing slashes.
// - `path.source` - Path to the source files. Default: `assets/`
// - `path.dist` - Path to the build directory. Default: `dist/`
var path = manifest.paths;

// `config` - Store arbitrary configuration values here.
var config = manifest.config || {};

// `globs` - These ultimately end up in their respective `gulp.src`.
// - `globs.js` - Array of asset-builder JS dependency objects. Example:
// ```
// {type: 'js', name: 'main.js', globs: []}
// ```
// - `globs.css` - Array of asset-builder CSS dependency objects. Example:
// ```
// {type: 'css', name: 'main.css', globs: []}
// ```
// - `globs.fonts` - Array of font path globs.
// - `globs.images` - Array of image path globs.
// - `globs.bower` - Array of all the main Bower files.
var globs = manifest.globs;

// `project` - paths to first-party assets.
// - `project.js` - Array of first-party JS assets.
// - `project.css` - Array of first-party CSS assets.
var project = manifest.getProjectGlobs();

// CLI options
var enabled = {
  // Enable static asset revisioning when `--production`
  rev: argv.production,
  // Disable source maps when `--production`
  maps: !argv.production,
  // Fail styles task on error when `--production`
  failStyleTask: argv.production
};

// Path to the compiled assets manifest in the dist directory
var revManifest = path.dist + 'assets.json';

// ## Reusable Pipelines
// See https://github.com/OverZealous/lazypipe

// ### CSS processing pipeline
// Example
// ```
// gulp.src(cssFiles)
// .pipe(cssTasks('main.css')
// .pipe(gulp.dest(path.dist + 'styles'))
// ```
var cssTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(!enabled.failStyleTask, plumber());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(function() {
      return gulpif('*.less', less());
    })
    .pipe(function() {
      return gulpif('*.scss', sass({
        outputStyle: 'nested', // libsass doesn't support expanded yet
        precision: 10,
        includePaths: ['.'],
        errLogToConsole: !enabled.failStyleTask
      }));
    })
    .pipe(concat, filename)
    .pipe(autoprefixer, {
      browsers: [
        'last 2 versions',
        'ie 8',
        'ie 9',
        'android 2.3',
        'android 4',
        'opera 12'
      ]
    })
    .pipe(minifyCss, {
      advanced: false,
      rebase: false
    })
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.'));
    })();
};

// ### JS processing pipeline
// Example
// ```
// gulp.src(jsFiles)
// .pipe(jsTasks('main.js')
// .pipe(gulp.dest(path.dist + 'scripts'))
// ```
var jsTasks = function(filename) {
  return lazypipe()
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.init());
    })
    .pipe(concat, filename)
    .pipe(uglify)
    .pipe(function() {
      return gulpif(enabled.rev, rev());
    })
    .pipe(function() {
      return gulpif(enabled.maps, sourcemaps.write('.'));
    })();
};

// ### Write to rev manifest
// If there are any revved files then write them to the rev manifest.
// See https://github.com/sindresorhus/gulp-rev
var writeToManifest = function(directory) {
  return lazypipe()
    .pipe(gulp.dest, path.dist + directory)
    .pipe(function() {
      return gulpif('**/*.{js,css}', browserSync.reload({stream:true}));
    })
    .pipe(rev.manifest, revManifest, {
      base: path.dist,
      merge: true
    })
    .pipe(gulp.dest, path.dist)();
};

// ## Gulp tasks
// Run `gulp -T` for a task summary

// ### Styles
// `gulp styles` - Compiles, combines, and optimizes Bower CSS and project CSS.
// By default this task will only log a warning if a precompiler error is
// raised. If the `--production` flag is set: this task will fail outright.
gulp.task('styles', ['wiredep'], function() {
  var merged = merge();
  manifest.forEachDependency('css', function(dep) {
    var cssTasksInstance = cssTasks(dep.name);
    if (!enabled.failStyleTask) {
      cssTasksInstance.on('error', function(err) {
        console.error(err.mesbrostroms);
        this.emit('end');
      });
    }
    merged.add(gulp.src(dep.globs, {base: 'styles'})
      .pipe(cssTasksInstance));
  });
  return merged
    .pipe(writeToManifest('styles'));
});

// ### Scripts
// `gulp scripts` - Runs JSHint then compiles, combines, and optimizes Bower JS
// and project JS.
gulp.task('scripts', ['jshint'], function() {
  var merged = merge();
  manifest.forEachDependency('js', function(dep) {
    merged.add(
      gulp.src(dep.globs, {base: 'scripts'})
        .pipe(jsTasks(dep.name))
    );
  });
  return merged
    .pipe(writeToManifest('scripts'));
});

// ### Fonts
// `gulp fonts` - Grabs all the fonts and outputs them in a flattened directory
// structure. See: https://github.com/armed/gulp-flatten
gulp.task('fonts', function() {
  return gulp.src(globs.fonts)
    .pipe(flatten())
    .pipe(gulp.dest(path.dist + 'fonts'));
});

// ### Images
// `gulp images` - Run lossless compression on all the images.
gulp.task('images', function() {
  return gulp.src(globs.images)
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
    }))
    .pipe(gulp.dest(path.dist + 'images'));
});

// ### JSHint
// `gulp jshint` - Lints configuration JSON and project JS.
gulp.task('jshint', function() {
  return gulp.src([
    'bower.json', 'gulpfile.js'
  ].concat(project.js))
    .pipe(jshint())
    .pipe(jshint.reporter('jshint-stylish'))
    .pipe(jshint.reporter('fail'));
});

// ### Clean
// `gulp clean` - Deletes the build folder entirely.
gulp.task('clean', require('del').bind(null, [path.dist]));

// ### Watch
// `gulp watch` - Use BrowserSync to proxy your dev server and synchronize code
// changes across devices. Specify the hostname of your dev server at
// `manifest.config.devUrl`. When a modification is made to an asset, run the
// build step for that asset and inject the changes into the page.
// See: http://www.browsersync.io
gulp.task('watch', function() {
  browserSync({
    files: [path.dist, '{lib,templates}/**/*.php', '*.php'],
    proxy: config.devUrl,
    snippetOptions: {
      whitelist: ['/wp-admin/admin-ajax.php'],
      blacklist: ['/wp-admin/**']
    }
  });
  gulp.watch([path.source + 'styles/**/*'], ['styles']);
  gulp.watch([path.source + 'scripts/**/*'], ['jshint', 'scripts']);
  gulp.watch([path.source + 'fonts/**/*'], ['fonts']);
  gulp.watch([path.source + 'images/**/*'], ['images']);
  gulp.watch(['bower.json', 'assets/manifest.json'], ['build']);
});

// ### Build
// `gulp build` - Run all the build tasks but don't clean up beforehand.
// Generally you should be running `gulp` instead of `gulp build`.
gulp.task('build', function(callback) {
  runSequence('styles',
              'scripts',
              ['fonts', 'images'],
              callback);
});

// ### Wiredep
// `gulp wiredep` - Automatically inject Less and Sass Bower dependencies. See
// https://github.com/taptapship/wiredep
gulp.task('wiredep', function() {
  var wiredep = require('wiredep').stream;
  return gulp.src(project.css)
    .pipe(wiredep())
    .pipe(changed(path.source + 'styles', {
      hasChanged: changed.compareSha1Digest
    }))
    .pipe(gulp.dest(path.source + 'styles'));
});

// ### Gulp
// `gulp` - Run a complete build. To compile for production run `gulp --production`.
gulp.task('default', ['clean'], function() {
  gulp.start('build');
});
```
```

---

## Post 13 by @mathewc — 2015-10-04T14:18:19Z

> [@poggen](#):
>
> service ver. 0.91-ubuntu1

That appears to be the output for `service nginx -V` as opposed to `nginx -V`. I’m asking re: that, because that args number error is something that pops up when using the `always` attribute on older versions of nginx. Shouldn’t affect `gulp watch` though, regardless of origin.

And you said you already have tried:

1. Remove all your dependencies.
2. Remove your node\_modules.
3. Clear your npm cache.

And then redoing everything?

---

## Post 14 by @poggen — 2015-10-04T18:45:55Z

Ah, I my mistake – actual output of `nginx -V` is:

```
configure arguments: --with-cc-opt='-g -O2 -fstack-protector --param=ssp-buffer-size=4 -Wformat -Werror=format-security -D_FORTIFY_SOURCE=2' --with-ld-opt='-Wl,-Bsymbolic-functions -Wl,-z,relro' --prefix=/usr/share/nginx --conf-path=/etc/nginx/nginx.conf --http-log-path=/var/log/nginx/access.log --error-log-path=/var/log/nginx/error.log --lock-path=/var/lock/nginx.lock --pid-path=/run/nginx.pid --http-client-body-temp-path=/var/lib/nginx/body --http-fastcgi-temp-path=/var/lib/nginx/fastcgi --http-proxy-temp-path=/var/lib/nginx/proxy --http-scgi-temp-path=/var/lib/nginx/scgi --http-uwsgi-temp-path=/var/lib/nginx/uwsgi --with-debug --with-pcre-jit --with-ipv6 --with-http_ssl_module --with-http_stub_status_module --with-http_realip_module --with-http_auth_request_module --with-http_addition_module --with-http_dav_module --with-http_geoip_module --with-http_gzip_static_module --with-http_image_filter_module --with-http_spdy_module --with-http_sub_module --with-http_xslt_module --with-mail --with-mail_ssl_module --add-module=/build/buildd/nginx-1.6.1/debian/modules/nginx-auth-pam --add-module=/build/buildd/nginx-1.6.1/debian/modules/nginx-dav-ext-module --add-module=/build/buildd/nginx-1.6.1/debian/modules/nginx-echo --add-module=/build/buildd/nginx-1.6.1/debian/modules/nginx-upstream-fair --add-module=/build/buildd/nginx-1.6.1/debian/modules/ngx_http_substitutions_filter_module
```

Yes, I’ve tried all those steps already, but I think I’ll have another go at them now, just to make sure I didn’t miss anything.

---

## Post 15 by @poggen — 2015-10-04T20:29:56Z

Alright, I’ve now tried `rm -rf node_modules` and `rm -rf bower_components` from the theme directory, followed by a fresh `npm install` and `bower install`, which ran without any errors. However, running `gulp` and `gulp watch` still doesn’t work and visiting the dev url results in a `ERR_CONNECTION_REFUSED`. What should I try next? Do you think it might have something to do with the nginx config, @alanc? FYI, I’ve tried booting up another (a bit older) bedrock project and it ran `gulp watch` just fine (it took a while before it answered, though). A yeoman site with gulp I’m working on also ran `gulp watch` without a problem. Gaaaah /facepalm

---

## Post 16 by @mathewc — 2015-10-05T02:52:20Z

I was thinking it was a problem with something being outdated in your manifest.json and that that was interfering with gulp watch.

You are definitely seeing nginx-related issues though (not that there isn’t something else too), including obviously that `ERR_CONNECTION_REFUSED` error.

Here are a couple thoughts you might consider:

• Try removing the `always` attributes from the two relevant add\_header lines in your conf file. See if that has any effect.  
• You’ve SSH’d in and verified nginx is running (service nginx status) and listening on port 80 (netstat | grep 80)?  
• What about curl output for the IP?

---

## Post 17 by @poggen — 2015-10-05T19:14:18Z

> [@alanc](#):
>
> service nginx status

nginx wasn’t running. Trying `sudo service nginx start` or `restart` doesn’t work – it just says `fail`.

Now trying to remove the nosniff header and then running `vagrant reload --provision`. Seems weird that should be it though, since it is in the [master on github](https://github.com/roots/trellis/blob/d9fbf934b0b0e6094970e4cab7f3bef3e48f4f1e/roles/wordpress-setup/templates/wordpress-site.conf.j2#L33).

---

## Post 18 by @poggen — 2015-10-05T19:41:36Z

Nope, that didn’t do it either – it now complains about line 19 instead, which is another header. However, nginx not running would explain why I cant reach the site…

---

## Post 19 by @poggen — 2015-10-06T06:51:43Z

Ended up doing a `vagrant destroy` and then importing the live database instead. At least now I’e updated everything there is to update in terms of software…

---

## Post 20 by @mathewc — 2015-10-06T21:17:59Z

Did that resolve the issues? Or are they still lurking…

---

## Post 21 by @poggen — 2015-10-07T06:36:04Z

Well, not really. Gulp watch worked the night i finished importing the database, albeit a bit slower than normal, but when I fired it up yesterday I was back to square one – it just keeps spinning and never reaches the site.

One of the steps I took during my error search was updating trellis to the latest version. That included going from the old roots/bedrock box to the trusty64 box. Don’t know if this has anything to do with it, but when I try to reprovision my staging server I get an error on setting the root password for MariaDB.

Will take another look tonight and post a more detailed status.

---

## Post 22 by @clov3rly — 2015-10-07T22:49:24Z

Ah, this rings a bunch of bells for me, but my memory is failing me somewhat. I recently had to blow away my trellis setup and set it up from scratch. I was also getting that nginx error (is that fixed for you now?) and also getting the root password MariaDB error.

Check out [this](https://github.com/roots/trellis/issues/191) github issue, and specifically [this](https://github.com/roots/trellis/issues/191#issuecomment-137771102), which points you to [this](https://github.com/roots/trellis/pull/239#issuecomment-133954971) to fix the mariaDB password issue.

I can’t for the life of me remember how I fixed the nginx issue… maybe that’s why I blew away my ansible folder in the first place :stuck_out_tongue:

---

## Post 23 by @austin — 2015-10-07T23:20:57Z

As far as ERR\_CONNECTION\_REFUSED: make sure you don’t have conflicting VMs running

---

## Post 24 by @poggen — 2015-10-08T21:15:22Z

Great @clov3rly – thanks a ton, it definitely looks like the same issue I’m having! Added the patch referenced in [#239](https://github.com/roots/trellis/pull/239#issuecomment-133954971) to my staging environment, i.e. adding `login_user="root"` and `login_password="{{ mysql_root_password }}"` to `ansible/roles/mariadb/tasks/main.yml`, like so:

```
- mysql_root_password: Abgsfn22-
- name: Set root user password
  mysql_user: name=root
              host="{{ item }}"
              password="{{ mysql_root_password }}"
              check_implicit_admin=yes
              state=present
              login_user="root"
              login_password="{{ mysql_root_password }}"
```

However, after running `ansible-playbook -i hosts/staging server.yml` to apply the patch, my staging environment instead gives me a 500 Internal Server Error. :confused: What was your experience of applying this patch, @clov3rly?

---

## Post 25 by @poggen — 2015-10-08T21:25:25Z

Nevermind, my bad – I’d forgotten to add the \*staging.\*[domain.com](http://domain.com) part of the domain back in to `wordpress_sites.yml` after the ansible rebase. Thanks again, @clov3rly!

---

## Post 26 by @stefanlindberg — 2015-10-16T14:23:14Z

> [@poggen](#):
>
> nginx: [emerg] invalid number of arguments in “add\_header” directive in /etc/nginx/sites-enabled/brostroms150.se.conf:18

I had the same problem suddenly as @poggen after running `vagrant provision` after some troubleshooting I figured out this was caused by `always` parameter in `roles/wordpress-setup/templates/wordpress-site.conf.j2`

Changing

```
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Xss-Protection "1; mode=block" always;
```

To

```
add_header X-Content-Type-Options "nosniff";
add_header X-Frame-Options SAMEORIGIN;
add_header X-Xss-Protection "1; mode=block";
```

And doing another `vagrant up` solves the problem.

I’m not good enough with nginx to know what `always` does and why it’s not working. Something with the nginx version?

Or shall we change it in Trellis also?

ref. [Best nginx configuration for improved security(and performance) · GitHub](https://gist.github.com/plentz/6737338)

---

## Post 27 by @Stu_Horsfield — 2015-10-23T01:52:30Z

I had a very similar problem with mysql, because of El Capitan’s ‘rootless’ permissions, any dev tools installed in any root folder except for usr/local/bin/ stops responding from the command line, even with sudo.  
I fixed it by just running a reinstall with homebrew, which reinstalls it into that folder, worked for fixing the same issue with ruby and gems like Jekyll too.  
I bet if you ran a brew install for nginx it would fix it, though I might be way off.