I'm trying to avoid browsersync from reloading any pages in the backend of wordpress, with URL's that start with 'mydomain.com/wp-admin'. Below is what I've tried, but with no luck. It works perfectly otherwise, but won't prevent reloading pages in the Wordpress dashboard.
My code:
// SASS PROCESSING/CSS MINIMIZING
gulp.task('sass', function () {
return gulp.src(theme_path+'/sass/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(gulp.dest(theme_path))
.pipe(browserSync.stream());
});
// BROWSERSYNC
gulp.task('browser-sync', function() {
var files = [theme_path+'/*.php', theme_path+'/*.html',
theme_path+'/sass/*.scss'];
browserSync.init(files, {
proxy: localProxy,
notify: true,
snippetOptions: {
ignorePaths: "wp-admin/**"
}
});
});
gulp.task('default', ['sass', 'browser-sync'], function(){
gulp.watch(theme_path+'/sass/**/*.scss', ['sass']);
});
I've tried the following paths in the "ignorePaths" option:
./wp-admin/**
./wp-admin/**/*
wp-admin/**/*
wp-admin/*.php
./wp-admin/*.php
./wp-admin/**/*.php
wp-admin/**/*.php
You actually just need to add the website path before the /wp-admin like this :
server.init({
proxy: "http://localhost:8888/mywebsite",
snippetOptions: {
ignorePaths: "mywebsite/wp-admin/**"
}
});
Related
I'm pretty new to Gulp, but I thought I had a handle on it, until I inherited a WordPress theme that needed some development work on.
I've been compiling my styles with no issues until it came to compiling the editor-styles.scss
This is the basic file structure for my styles:
theme-name
_static
styles
_admin
editor-styles.scss
editor-styles.min.css
admin-styles.scss
admin-styoles.min.css
login-styles.scss
login-styles.min.css
_layout
_block.scss
_header.scss
_utils
_mixins.scss
_variables.scss
styles.scss
styles.css
All changes to any scss file in the _layout and _utils folders are compiled correctly to the styles.css in the main index.
When I edit an scss file in the _admin folder, I need it to compile to the .min.css version in that same folder.
Instead, it's compiling and creating a new _admin folder in the main theme index with .css files.
I know why this is, because that is what I have told my compiling to do in my gulpfile.js
However, I can't get my head around how to split these two sources?
This is my gulpfile.js:
// MODULES
var gulp = require('gulp');
var sass = require('gulp-sass');
var js = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var plumber = require('gulp-plumber');
var gutil = require('gulp-util');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
return gulp.src('./wp-content/themes/theme-name/_static/styles/**/*.scss')
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./wp-content/themes/theme-name'))
.pipe(browserSync.stream())
done();
});
// MINIFY JS
gulp.task('js', function () {
return gulp.src('./wp-content/themes/theme-name/_static/js/*.js')
.pipe(js())
.on('error', onError)
.pipe(rename({
suffix: '.min'
}))
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./wp-content/themes/theme-name/_static/js/min/'))
.pipe(browserSync.stream())
done();
});
// IMAGES
gulp.task('imagemin', function () {
return gulp.src('./wp-content/themes/theme-name/*')
.pipe(imagemin())
.pipe(gulp.dest('./wp-content/themes/theme-name/images'))
done();
});
// BROWSERSYNC
gulp.task('browser-sync', function(done) {
browserSync.init({
proxy: 'http://localhost/project-name'
})
done();
});
// RELOAD
gulp.task('reload', function (done) {
browserSync.reload();
done();
});
// ERROR LOG
var onError = function (err) {
console.log('An error occurred:', gutil.colors.magenta(err.message));
gutil.beep();
this.emit('end');
};
// WATCH
gulp.task('watch', function() {
gulp.watch('./wp-content/themes/theme-name/_static/styles/**/*.scss', gulp.series('sass'));
gulp.watch('./wp-content/themes/theme-name/_static/js/*.js', gulp.series('js'));
gulp.watch('./wp-content/themes/theme-name/images/*', gulp.series('imagemin'));
gulp.watch('./wp-content/themes/theme-name/**/*.php').on('change', browserSync.reload);
gulp.watch('*/theme-name/**/*.php').on('change', browserSync.reload);
});
gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'browser-sync', 'watch'));
Thanks in advance for any help/advice - I'm banging my head against a wall and I'm sure it's something super simple I've overlooked.
There is more than one way to accomplish what you want. You could have separate watch statements triggering separate sass statements for your different directories. The advantage to that is you are not running all your .scss files everytime.
But consider this. Using the gulp-if plugin which allows you to make if/else decisions mid-stream.
const gulpif = require('gulp-if');
const path = require('path'); // needed to get the last directory name in a path
const condition = function (file) {
const match = path.basename(path.dirname(file.path));
return match === "_admin";
}
// COMPILE AND MINIFY SASS
gulp.task('sass', function () {
return gulp.src('./_static/styles/**/*.scss')
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
// if condition is true use first gulp.dest, else use second
// condition is true if current file parent directory is _admin
.pipe(gulpif(condition, gulp.dest('./_static/styles/'), gulp.dest('./')))
.pipe(browserSync.stream());
// done(); // not needed with the return
});
The disadvantage of this method is that all .scss files are re-compiled each time.
If anyone needs to know how to run tasks for separate src and destinations, this is what works for me :) Thanks for your help Mark.
// This is my main sass files.
// It compiles all my sass files, EXCEPT any files in the _admin folder
// and compiles them to styles.css in my main theme index/root
gulp.task('sass', function () {
return gulp.src([
'./wp-content/themes/theme-name/_static/styles/**/*.scss',
'!./wp-content/themes/theme-name/_static/styles/_admin/*.scss'
])
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./wp-content/themes/andra-birkerts-design'))
.pipe(browserSync.stream())
done();
});
// This is my main admin sass file.
// It compiles just the sass files in the _admin folder
// and compiles them to filename.min.css in the same _admin folder
gulp.task('admin_sass', function () {
return gulp.src('./wp-content/themes/theme-name/_static/styles/_admin/*.scss')
.pipe(plumber())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./wp-content/themes/theme-name/_static/styles/_admin'))
.pipe(browserSync.stream())
done();
});
gulp.task('default', gulp.series('sass', 'admin_sass', 'browser-sync', 'watch'));
For the life of me, I cannot somehow find what is wrong with this configuration! After injecting the master.css changes, instead of just reflecting the changes, my browser window automatically reloads although it says "injected". Could someone please help? I have a gulpfile.js with the following configuration:
var paths = {
master: {
styles: 'default/less/master.less',
},
watch: {
styles: 'default/less/**/*.less',
},
dist: {
styles: 'default/less',
}
};
Less Task:
gulp.task('less', function(){
'use strict';
gulp.src(paths.master.styles)
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(less({compress:false}))
.on('error', function (err) {
gutil.log(err);
this.emit('end');
})
.pipe(autoprefix())
.pipe(sourcemaps.write('../sourcemaps', {
includeContent: false, // Otherwise all the CSS would be included
sourceRoot: paths.dist.styles
}))
.pipe(gulp.dest(paths.dist.styles))
.on('error', gutil.log)
.pipe(browserSync.stream());
});
Browsersync Task:
gulp.task('browser-sync', ['less'], function() {
'use strict';
browserSync.init({
proxy: "http://mywebsite.local",
stream:true
});
gulp.watch(paths.watch.styles, ['less']);
});
And at the end:
gulp.task('default', ['less', 'browser-sync']);
I see a notification that the changes were injected, my terminal says master.css and master.css.map changed and my changes in the less file are reflected as well, but somehow the browser reloads which I don't want at all for the css compilation.
I have the following code for my iron-router signOut route in a Meteor JS app. I am trying to convert the deprecated Router.map to the new Router.route syntax but having difficulty getting the onBeforeAction and onAfterAction to work. What is the proper Router.route syntax for the following code block?
Router.map(function () {
// sign-out the user then redirect them to the home page
this.route('signOut', {
path: '/sign-out',
onBeforeAction: function () {
if (Meteor.userId()) {
Meteor.logout()
}
this.next();
},
onAfterAction: function () {
this.redirect('/');
}
});
});
Router.route('/sign-out', function() {
//here you put things you wanna render, it's empty since you just want to logout and redirect
}, {
name: 'signOut',
onBeforeAction: function () {
if (Meteor.userId()) {
Meteor.logout()
}
this.next();
},
onAfterAction: function () {
Router.go('/');
}
});
And I think you should add waitOn function, cause there might be no Meteor.user() object at first if not subscribed earlier
I have upgraded my meteor application from 0.8 to 1.0. It was working fine before upgrade it to 1.0 in Production mode. After upgradation am facing errors in production mode.
As I have defined my route in home.js like this
Router.map(function() {
this.route('home', {
path: '/',
controller: 'Controller1'
});
});
Controller1 = RouteController.extend({
layoutTemplate: 'Layout1',
onAfterAction: function() {
setTimeout(function(){ $('#l').focus(); }, 600);
this.next;
}
});
In development mode it is working fine but when I run the application in production mode, Its is giving me the error route not found.
Please help me to get out of it. Thanks in advance.
I have the same question like #Moshikaro :)
Check out my working Meteorpad.
http://meteorpad.com/pad/fRzpHPYMwRGPirWAD/Routing
[Edit]
Your home.js should look like this
Controller1 = RouteController.extend({
layoutTemplate: 'Layout1',
name: 'home',
onAfterAction: function() {
Meteor.setTimeout(function() {
$('#l').focus();
}, 600);
}
});
Router.map(function() {
this.route('home', {
path: '/',
controller: 'Controller1'
});
});
After migrating to meteor 1.0 and thus iron:router 1.0, I had to modify my router.js file. First of all, I only included this.next() in onRun() and onBeforeAction() hooks, you don't need to put it in onAfterAction AFAIK.
Besides, I avoid using Router.map() anymore and I define all routes according to the doc: https://github.com/EventedMind/iron-router
So try to modify your code like this:
Router.route('home', function () {
this.render('home');
}, {
layoutTemplate: 'Layout1',
path: '/',
onAfterAction: function(){
setTimeout(function(){ $('#l').focus(); }, 600);
}
});
Cheers,
I can't seem to get the infinite scrolling to work from Commit 12-5. It says just to mrt add iron-router-progress and everything should work, but my page keeps refreshing. Here's what I'm working with:
PostsListController = RouteController.extend({
template: 'blog',
increment: 20,
limit: function() {
return parseInt(this.params.postsLimit) || this.increment;
},
waitOn: function() {
return Meteor.subscribe('posts', this.limit());
},
posts: function() {
return Posts.find({}, {
limit: this.limit()
});
},
data: function() {
var hasMore = this.posts().count() === this.limit();
var nextPath = this.route.path({
postsLimit: this.limit() + this.increment
});
return {
posts: this.posts(),
nextPath: hasMore ? nextPath : null
};
}
});
Router.map(function() {
this.route('blog', {
path: '/:postsLimit?',
controller: PostsListController
})
})
Router.configure({
layoutTemplate: 'layout',
notFoundTemplate: 'notFound',
});
Everything seems to work EXCEPT when I click load more, the page blinks and jumps back up to the top!
As you can read in the GitHub issues related the commit, it is actually a bug in the 0.7.1 version of iron-router. With the version they used (look up the smart.lock file) it won't refresh and go to the top.