I have a problem with my gulp webserver. I have this gulp task:
gulp.task('serve', ['watch'], () => {
gulp.src('tmp')
.pipe(webserver({
livereload: true,
directoryListing: true,
open: true,
//defaultFile: 'index.html'
}));
});
When running gulp serve I am getting the following screen on localhost:8000:
It seems like that the webserver is serving the root directory of my project and not tmp folder, the odd thing is if I click the index.html I am redirected to http://localhost:8000/index.html which is the correct file (tmp/index.html and not /index.html).
I am using gulp-webserver for serving and live reload.
What did I do wrong?
Note: uncommenting the defaultFile doesn't help.
You can pass an object into directoryListing to adjust this setting.
.pipe(webserver({
directoryListing: {
enable: true,
path: 'tmp'
}
}));
Details:
https://github.com/schickling/gulp-webserver#options
open can be also a string.By providing a String you can specify the path to open (for complete path, use the complete url http://my-server:8080/public/) .
Try this
gulp.task('serve', ['watch'], () => {
gulp.src('./tmp')
.pipe(webserver({
livereload: true,
directoryListing: true,
open: true,
//defaultFile: 'index.html'
}));
});
Related
I'm getting the following error when trying to build:
Building for production...Error: ENOENT: no such file or directory, stat '/Users/me/Code/project/index.html'
Package: "prerender-spa-plugin": "^3.1.0"
File: vue.config.js:
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname),
routes: ['/'],
minify: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
decodeEntities: true,
keepClosingSlash: true,
sortAttributes: true,
},
renderer: new Renderer({
renderAfterDocumentEvent: 'render-event',
}),
}),
],
};
},
};
I don't have any routes, only a single index.html page.
Also, when I run yarn build and get that error, I try to kill the process in terminal but it keeps returning Building for production... without anything happening, and I have to quit terminal for it to stop.
Edit: I've also tried adding staticDir: path.join(__dirname, './public') but the build hangs without any errors.
Try adding headless: false to your renderer options. This will open a Chromium browser with your specified array of routes. Open the inspector in the Chromium browser and its very likely that you will see errors in the console.
I've built Gruntfiles in the past, but mostly to compile Less and Jade, so this steps a bit out of my comfort zone and I'm struggling to figure out what to do.
I'd like to use the Gruntfile to:
Compile Jade to html
Compile Less to css
Build and show website at localhost:9000
Refresh localhost:9000 upon save of file (this uses grunt watch I'm assuming?)
Basically, I'd like to keep it light and easy, so that once I learn I can use it to teach others that I know. :)
Here's what my Gruntfile looks like so far. I have grunt-serve in there, but nothing loads to the page when I run it, so I'm really confused. Thanks for the help!
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
cwd: "assets/views",
src: "**/*.jade",
dest: "public",
expand: true,
ext: ".html"
} ]
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
'public/css/main.css': 'assets/less/main.less',
}
}
},
watch: {
styles: {
files: [
'less/main.less',
],
tasks: ['less'],
options: {
nospawn: true
}
}
},
serve: {
options: {
port: 9000
}
}
});
grunt.registerTask('default', ['jade','less']);
grunt.loadNpmTasks('grunt-serve');
};
I think your build task is running jade and less, but not serve. Instead of
grunt.registerTask('default', ['jade','less']);
try
grunt.registerTask('default', ['jade','less','serve']);
Having problem while refreshing the page when HTML5 Mode is set. When navigating to /path, it works fine but when i refresh the page or directly type localhost/path it does not work.
HTML5 Mode
Configuration:
$routeProvider
.when('/path', {
templateUrl: 'path.html',
});
$locationProvider
.html5Mode(true);
You should set the base in HTML-file
<html>
<head>
<base href="/">
</head>
</html>
In this mode you can use links without the # in HTML files
link
Link in Browser:
http://www.example.com/base/path
Update on the server. At this moment, i am just using gulp module to connect.
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function(){
connect.server({
root: './app',
port: 8080
})
})
To make it work, you need to override all requests to non-static resources by your index.html...
For connect using connect-modrewrite module it would be, something like this:
var connectModRewrite = require('connect-modrewrite');
connect.server({
root: './app',
port: 8080,
middleware: function (connect) {
return [
connectModRewrite([
'!\\.html|\\.js|\\.css|\\.ico|\\.png|\\.gif|\\.jpg|\\.jpeg|\\.swf.*$ /index.html [NC,L]'
]),
connect.static('./app')
];
}
});
You can use a middle-ware to solve the problem.
Do an npm install --save connect-history-api-fallback. Add the following to your gulpfile.js
var gulp = require('gulp');
var connect = require('gulp-connect');
gulp.task('connect', function() {
connect.server({
root: './app',
port: 8080,
livereload: true,
middleware: function(connect, opt) {
return [ historyApiFallback ];
}
});
});
I got nothing wrong in the terminal but Chrome doesn't answer to change on my html files and don't automatically reload the page.
I include 'livereload.js' in my index.html but i'm not sure if it's required.
Thanks for your help.
module.exports = function(grunt) {
// Load Grunt tasks declared in the package.json file
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Configure Grunt
grunt.initConfig({
// Grunt express - our webserver
// https://github.com/blai/grunt-express
express: {
all: {
options: {
bases: ['/Users/antoine/Dropbox/prog/projets/antoine/'],
port: 8080,
hostname: "localhost",
livereload: true
}
}
},
// grunt-watch will monitor the projects files
// https://github.com/gruntjs/grunt-contrib-watch
watch: {
all: {
files: '**/*.html',
options: {
livereload: true,
interval: 1500,
}
}
},
// grunt-open will open your browser at the project's URL
// https://www.npmjs.org/package/grunt-open
open: {
all: {
path: 'http://localhost:8080/index.html'
}
}
});
// Creates the `server` task
grunt.registerTask('server', [
'express',
'open',
'watch'
]);
};
How can I get the templateURL to reload when saved using LiveReload and Grunt?
angular.module('meshApp', [
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
I have a jade file views/main.jade that when I save is processed to .tmp/views/main.html, currently this works and I can see the template, however when I save LiveReload is unable reload the page.
Is there any way I can get it to work?
Also here is a link to my GruntFile incase it helps:
http://jsfiddle.net/daimz/Te5Xc/
EDIT -------------------------
When I wrote the initial answer there was not really anything really stable enough and thats why I make some adjustments to livereload. Since that time a lot changed. At this moment (early 2017) I use browser-sync & webpack, HMR.
EDIT -------------------------
I got it to work on my Angular/Ionic project.
As I assume that more people are looking for something like it I made a github repo: https://github.com/stefanKuijers/live-templates
My solution uses live.js which Martin Kool wrote (check ). I just added some code. This is how it works: You just add the path to your router in live-templates.js. The live-templates.js gets the routers routes and adds them to the live.js heartbeat.
How to use it:
- get script & save
- change the routerURL variable on line 27 to the url of your router
- include script on the page(s) where you require live reload
Let me know or and how it worked for you guys!
Cheers
I simplified my Gruntfile.js may helpful:
appPath:"", //your app path
watch: {
options: {
livereload: 35729,
debounceDelay: 500
},
gruntfile: {
files: ['Gruntfile.js']
},
css: {
//if you use less or sass,you can compile and copy here
},
js: {
files: ['<%= appPath %>/{scripts}/{,**/}*.js'],
tasks: ['newer:all']
},
html: {
files: ['<%= appPath %>/{views}/{,**/}*.html'],
tasks: ['newer:all']
},
livereload: {
options: {
livereload: 35729,
debounceDelay: 500
},
files: [
'<%= appPath %>/{,**/}*.html',
'<%= appPath %>/styles/{,**/}*.css',
'<%= appPath %>/images/{,**/}*.{png,jpg,jpeg,gif,webp,svg}'
]
}
}
and run in :
grunt.registerTask('server', [
...,
'watch'
]);
Maybe try this middleware:
var modRewrite = require('connect-modrewrite');
Then on the connect:
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: '0.0.0.0',
livereload: 35729
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%= yeoman.app %>'
],
middleware: function(connect, options) {
var middlewares = [];
//Matches everything that does not contain a '.' (period)
middlewares.push(modRewrite(['^[^\\.]*$ /index.html [L]']));
options.base.forEach(function(base) {
middlewares.push(connect.static(base));
});
return middlewares;
}
}
}
You should also install modrewrite: npm install connect-modrewrite --save-dev
I am only guessing here. I hope it helps.