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.
Related
I decided to use vinyl-ftp for my deployment process in gulp. One thing I would like to do is to have a separate file with my ftp credentials:
host
user
password
and put that file in my .gitignore. And then I want those credentials in that file be read by my connection variable in my gulp file. My deploy code is the following:
gulp.task( 'deploy', function () {
var conn = ftp.create( {
host: 'yourdomain.com',
user: 'ftpusername',
password: 'ftpuserpassword',
parallel: 10,
log: gutil.log
} );
var globs = [
'dist/**'
];
return gulp.src( globs, { base: './dist/', buffer: false } )
.pipe( conn.newer( 'yourdomain.com' ) )
.pipe( conn.dest( 'yourdomain.com' ) );
} );//end deploy
So I want the values of the variables yourdomain.com for the host, ftpusername for user and ftpuserpassword for password be read in from a separate file so my credentials show up when I do git push. How do I accomplish this?
Thanks
You can pass them as run args:
var
gulp = require('gulp'),
args = require('yargs').argv;
const distDir = "./dist";
gulp.task('deploy', function() {
var conn = ftp.create({
host: args.host,
user: args.user,
password: args.password,
parallel: 10,
log: flog // .log
});
var globs = [
distDir + '/**',
distDir + '/.htaccess',
];
return gulp.src(globs, {buffer: false})
.pipe(conn.dest(args.remotedir));
});
Then call it from command line or put the line in a batch file: npm run gulp deploy -- --host=hostname --user=username --password=password --remotedir=/path/to/folder/on/server. Use gulp instead of npm run gulp if gulp is installed global.
This is a good practice to pass credentials trough args at a program start.
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'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?
I'm currently using gulp webserver with following config.
gulp.task('webserver', ['nodejs'], function () {
return gulp.src(config.client)
.pipe(webserver({
livereload: true,
port: 8001,
proxies: [
{
source: '/api',
target: 'http://localhost:3007/api'
}
],
directoryListing: false,
open: true
}));
});
So, it serves the static files and proxies request starting with /api to a nodeJs app on another port.
I want to do now the same with Browser-sync (instead of using livereload, so I want to get rid of gulp webserver), but don't find how I can configure this.
Thanks for giving some guidance.
Ok,I found a potential solution (please comment if you have improvements)
var browserSync = require('browser-sync');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer({});
gulp.task('bs', ['nodejs'], function () {
browserSync({
server: {
baseDir: "./client"
},
middleware: function (req, res, next) {
var url = req.url;
if (url.substring(0,5)==="/api/") {
proxy.web(req, res, { target: 'http://localhost:3007' });
} else {
next();
}
}
});
});
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']);
});