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?
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?
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.
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!
lol you’re actually not; it went from 0.12.7 to 4.0 after the merge with iojs.
1 Like
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?
This is a dumb question, but do you have the correct development URL set in manifest.json?
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 got me sorted out and everything seems to be working fine now.
1 Like
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 – isn’t that weird?
I’ve done the EACCESS-fix as well (and rerunning npm install -g bower gulp etc, afterwards). Still not working…
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;
}
}
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?
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');
});
```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:
- Remove all your dependencies.
- Remove your node_modules.
- Clear your npm cache.
And then redoing everything?
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.
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
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?
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.
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…
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…
Did that resolve the issues? Or are they still lurking…