I'm doing some local development using gulp, 'nodemon' and browsersync. I have defined the following gulp task to kick-off nodemon and start browsersync:
gulp.task('develop', function() {
return nodemon({
script: './bin/server/server.js',
ext: 'js',
env: {
PORT: port
},
watch: __dirname + '/bin/server/**/*'
})
.on('start', function() {
startBrowserSync();
})
.on('restart', function () {
browserSync.reload();
});
});
function startBrowserSync(){
if (browserSync.active){
return;
}
browserSync.init({
proxy: "localhost:" + port + "/app/client",
online: true
});
}
The server starts on localhost:8000, and browsersync attempts to load the proxy localhost:3000/app/client. This is the IDE console output
[BS] Proxying: http://localhost:8000
[BS] Access URLs:
---------------------------------------------
Local: http://localhost:3000/app/client
External: http://false:3000/app/client
---------------------------------------------
UI: http://localhost:3001
UI External: http://false:3001
---------------------------------------------
server running on port: 8000
However, the browser just sits there churning over and not displaying anything (no reports in the browser debug console). If I load localhost:8000/app/client directly, I get my web page. Any idea what I may be doing wrong?
Related
Just migrated over to Gulp 4 from Gulp 3.9.1 and whilst everything is working fine when I run gulp and it compiles everything fine and I can start the watch command fine so it appears like it's watching for changes, whenever a change happens it doesn't seem to be able to pick it up.
Here is my watch task:
gulp.task('watch', gulp.series('browser-sync', function() {
gulp.watch(['scss/**/*.scss'], gulp.series('css-minify'));
gulp.watch(['js/dev/**/*.js'], gulp.series('js-watch'));
}));
browser-sync task:
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
proxy: "mysite.local",
host: 'mysite.local',
// port: 5000,
browser: "chrome",
});
});
Is there another change required in Gulp 4 that I am missing here?
Ok, seems that in Gulp 4 it requires a stream, promise, event emitter, child process or observable to be returned from a function or task.
So once I changed:
gulp.task('browser-sync', function() {
browserSync.init({
open: 'external',
proxy: "mysite.local",
host: 'mysite.local',
// port: 5000,
browser: "chrome",
});
});
to:
gulp.task('browser-sync', function(done) {
browserSync.init({
open: 'external',
proxy: "mysite.local",
host: 'mysite.local',
// port: 5000,
browser: "chrome",
});
done();
});
...it was all working again.
Note the addition of the parameter passed to the anonymous function and then evoked at the end of the function - as explained in the linked article.
Browsersync detects only index.html and auto refresh can be applied only to this file. But how can I use browsersync for pages like about.html or comments.html etc. ???
If those pages are not linked to from your index.html but are in the same directory you can start browserSync at the folder level with:
server directory options.
// Serve files from the app directory with directory listing
server: {
baseDir: "src",
directory: true
}
and then open each in a new tab if you want them all open at the same time.
If you want to open multiple web pages at once when starting your gulp task you would have to start multiple instances of browserSync each with its own index:
server: {
baseDir: "./",
index: "about.html",
},
Here is how to start multiple instances of browserSync:
// the create "string" can be anything useful
var browserSync = require("browser-sync").create("index.html");
var browserSync2 = require("browser-sync").create("about.html");
var reload = browserSync.reload;
var reload2 = browserSync2.reload;
// a function since I am using gulp4.0 but could be a task as well
function serve(done) {
browserSync.init({
port: 3000,
server: {
baseDir: "./",
index: "index.html",
},
// open: false,
ghostMode: false
});
browserSync2.init({
// need to increment the port manually it appears
port: 3003,
// and must increment the ui port as well
ui: {
port: 3004
},
server: {
baseDir: "./",
index: "about.html",
},
// open: false,
ghostMode: false
});
done();
}
And you will need something like:
gulp.watch("./*.html").on("change", reload);
gulp.watch("./*.html").on("change", reload2);
which could be refactored into a single function call that does both. And also any reload calls would needed to be replicated like:
function sass2css() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream:true }))
.pipe(reload2({ stream:true }));
}
so that both index.html and about.html's css are reloaded.
Which should also be refactored but that will have to wait.
I am learning the front-end build system currently gulp, i want to use brower-sync and the problem is it is not throwing an error in the commad line but instead when it brings up the browser it will not display my html file and it will say "Cannot GET /" error in the browser window. This is my gulpfile.js code
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
compass= require('gulp-compass'),
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
rename = require('gulp-rename');
gulp.task('scripts', function() {
gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
.pipe(plumber())
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('public/src/js/'));
});
gulp.task('styles', function() {
gulp.src('public/src/scss/main.scss')
.pipe(plumber())
.pipe(compass({
config_file: './config.rb',
css: './public/src/css/',
sass: './public/src/scss/'
}))
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('public/src/css/'))
.pipe(reload({stream:true}));
});
gulp.task('html', function() {
gulp.src('public/**/*.html');
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./public/"
}
});
});
gulp.task('watch', function() {
gulp.watch('public/src/js/**/*.js', ['scripts']);
gulp.watch('public/src/scss/**/*.scss', ['styles']);
gulp.watch('public/**/*.html', ['html']);
});
gulp.task('default', ['scripts', 'styles', 'html', 'browser-sync', 'watch']);
i am using windows and git bash and version is "browser-sync": "^2.12.5" so what is the problem and try to explain for me in order to get something out of it.
Is there an index.html file in your ./public/ folder? If not, you need to tell browserSync what is your start page. You can also get browserSync to show the listing of the base directory, see update below.
You could also try to use public without the leading dot.
Edit: The startPath config directive does not seem to work, use index instead
...
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "public/",
index: "my-start-page.html"
}
});
});
...
Update: Actually you can get directory listing with browserSync. That way it would show a list of files in public, not the Cannot Get error
...
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "public/",
directory: true
}
});
});
...
I got this to work when the index.html file was inside the same folder:
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
},
port: 8080,
open: true,
notify: false
});
});
gulp.task('serve',['sass'], function() {
bs.init({
server: "./app",
startPath: "/index.html", // After it browser running
browser: 'chrome',
host: 'localhost',
port: 4000,
open: true,
tunnel: true
});
I solved my "Cannot GET" errors in browser-sync by always pointing to a .html file in code, or by having a folder structure ending with and index.html
About <!-- Cannot GET error-->
About <!-- same code as above, but works if your site structure is: ./about/index.html-->
About <!-- OK -->
My Gulp file for reference (using browser-sync with jekyll, so everything is in the ./_site folder, and the gulpfile is in ./)
var gulp = require('gulp');
var shell = require('gulp-shell');
var browserSync = require('browser-sync').create();
gulp.task('build', shell.task(['jekyll build --watch']));
// serving blog with Browsersync
gulp.task('serve', function () {
browserSync.init(
{
server: {baseDir: '_site/'}
}
);
// Reloads page when some of the already built files changed:
gulp.watch('_site/**/*.*').on('change', browserSync.reload);
});
gulp.task('default', ['build', 'serve']);
Hope it helps.
Michelangelo
May be you have not index.html in baseDir: '_site/'? In order to see your static web-page in the web-browser instead of that annoying message you have to rename a file your_file.html to index.html. This will solve Cannot GET/ problem.
In my case, this helped me:
server: {
baseDir: '.',
index: "index.html"
}
gulp.task('server', function()
{
browserSync.init(["public/src/css/","public/src/js"],{
server: "./",
startPath: "./index.html", // After it browser running
// browser: 'chrome',
host: 'localhost',
// port: 4000,
open: true,
tunnel: true });
});
gulp.task('default', ['scripts', 'styles', 'html', 'server', 'watch']);
Is it possible to get gulp-connect to add a non-existent folder into a URL?
To elaborate:
My project is in /Sites/mySite, in this folder I have a gulpfile.js and I cd into this folder, run gulp and get a http server on: http://localhost:8080/.
I would like to still be able to cd into /Sites/mySite run gulp but have the url for this content accessible from http://localhost:8080/igloo.
This feels like some sort of middleware but I cannot get my head around connect/gulp-connect.
I have a similar setup. The root of my app is at dist/, but I also need access to node_modules/ for my source maps:
https://www.npmjs.com/package/st
var st = require('st')
...
gulp.task('server', function() {
connect.server({
root: 'dist/',
host: 'localhost',
port: 3000,
livereload: {
port: 35929
},
middleware: function (connect, opt) {
return [
st({ path: 'node_modules', url: '/node_modules' })
];
}
})
})
Yes, it is possible. Use symlink.
Let say your app is in /Sites/mySite/app folder and you run server like this:
gulp.task('server', function () {
connect.server({
root: './app'
});
});
Now create symlink igloo to ./app and run server like this:
var
gulp = require('gulp'),
connect = require('gulp-connect');
gulp.task('server', function () {
connect.server({
root: '.'
});
});
That’s all. You’ll see your app at http://localhost:8080/igloo .
Feel free to ask more.
I'm looking to transition over from grunt to gulp. However I'm not finding a way to serve PHP files with livereload support, such as gateway (https://www.npmjs.org/package/gateway) using mounts. Are ther any plugins out there for running/server PHP using a gulp task?
I asked totally the same question few weeks ago. I want to start a native PHP server under Gulp, because I like the syntax better than Grunt. I also want to use PHP just to include other HTML files. :) It turns out there is a 'gulp-connect-php' plugn which has a very similar syntax to 'grunt-php' plugin.
https://www.npmjs.com/package/gulp-connect-php
https://www.npmjs.com/package/grunt-php
Here is my code to Gulp:
var gulp = require('gulp'),
livereload = require('gulp-livereload'),
connectPHP = require('gulp-connect-php');
gulp.task('connect', function() {
connectPHP.server({
hostname: '0.0.0.0',
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
port: 8000,
base: 'dev',
livereload: true
});
});
I also setted the exe and ini file location.
If you interested in, this is the code for Grunt:
php: {
watch: {
options: {
livereload: true,
bin: 'C:/php/php.exe',
ini: 'C:/php/php.ini',
base: '../development',
port: 8000
}
}
}
I hope it helps!
I ended up using gulp-connect-php with http-proxy. In the end, my php serve task looked like this:
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
port : 9000,
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: '{ip address taken out}:9001' });
} else {
next();
}
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});