I'm having an issue getting server side includes to work using browserSync and browsersync-ssi. I'm trying to stick a default header and footer file into each page using includes.
https://www.npmjs.com/package/browsersync-ssi
gulpfile.js:
var browserSync = require('browser-sync').create();
var ssi = require('browsersync-ssi');
gulp.task('serve', function(done) {
browserSync({
server: {
baseDir: ['./template'],
middleware: ssi({
baseDir: __dirname + '/template',
ext: '.shtml',
version: '1.4.0'
})
},
});
Inside my /template folder I have two files:
page.html containing:
<!--#include virtual="./header.shtml" -->
and header.shtml containing some HTML markup
According to the examples this should work, can anyone spot where i have gone wrong? Is there an easier or different way to inject a header\footer into every page?
Related
I am trying to set up very simple gulp file. I am using sass and browser sync there and I move everything to the build folder. But for unknown reason the browser does not sync.
I tried solutions from many resources but nothing seem to work so far. Maybe some of you would have any idea how to fix that.
var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
var reload = bs.reload;
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('build/css'))
.pipe(bs.reload({stream:true}));
});
gulp.task('serve', ['styles'], function() {
bs.init({
server: "./build"
});
gulp.watch('./sass/*.scss', ['styles']);
gulp.watch('build/css/*.css').on('change', reload);
gulp.watch("*.html").on('change', reload);
});
gulp.task('default', ['serve']);
My folder structure is:
- build
- css
- index.html
- sass
- index.html
And the command prompt shows this after running gulp:
Thank you so much for any help!
Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present.
check this out: https://browsersync.io/docs/#requirements
I have problem with BrowserSync on my XAMPP apache.
It is my gulpfile.js (I removed unnecessary code - is only necessary to solve the problem):
var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('watch', function() {
browserSync({
startPath: '/test',
proxy: 'localhost:80'
});
});
gulp.task('default', ['watch']);
When I run the correct path to the directory of my project I have no connections. In the code of page is not JS file from BrowserSync:
project page
When I given the wrong path on in code of page 404 is JS from BrowserSync:
error 404 page
I used latest version Gulp, BrowserSync & XAMPP.
Please help me!
You are missing a couple of things:
var browserSync = require('browser-sync').create();
and in your task:
browserSync.init ({
Try those and see if that helps.
I'm trying to use these two gulp plugins together:
gulp-html-minifier
gulp-inject-stringified-html
Or put differently, I'm trying to inject the contents of files containing html fragments into my javascript files after they're minified.
When I'm trying to run a straight up gulp build I get this:
Error: ENOENT: no such file or directory, open 'C:\path\to\.temp\template.html'
Here's a repro of my situation. My folder structure:
/src/app.js
/src/template.html
/gulpfile.js
/package.json
My gulpfile.js:
var gulp = require('gulp');
var injectHtml = require('gulp-inject-stringified-html');
var htmlmin = require('gulp-html-minifier');
gulp.task('minify', [], function() {
gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
gulp.task('default', ['minify'], function() {
gulp.src('src/*.js')
.pipe(injectHtml())
.pipe(gulp.dest('.build'));
});
The template.html file:
<div>My Template</div>
The app.js file:
var html = { gulp_inject: "../.temp/template.html" };
Now, if I run minify manually first, things will work as expected. From this I speculate I'm not using Gulp correctly. I reckon I'd need to pipe the result of htmlmin into the injectHtml method. But I fail to see how.
How can I get these two plugins to play together nicely?
You are missing a return in the minify task. It should look like that:
gulp.task('minify', [], function() {
return gulp.src('src/*.html')
.pipe(htmlmin())
.pipe(gulp.dest('.temp'));
});
Without return, the default task doesn't have any way to know that minify finished, so it may start before the minified html file was created.
When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):
[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms
But I need to reload the browser by hand to reflect the changes. This is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {
browserSync.init({
proxy: "huertajalon/"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./*.php").on('change', browserSync.reload);
gulp.watch("./style.css").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/principal.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
In other cases (for example, when I modify and save style.css) the browser reloads well.
What am I doing wrong? Thanks!
Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream().
http://www.browsersync.io/docs/api/#api-stream
If not then you should update or you could try browserSync.reload({stream: true}) instead, which was the previous way to handle streams with browser-sync. If I remember correctly.
Try something like this.
gulp.task(default, ['sass'], browserSync.reload);
Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload
I'm using gulp-durandal to build our durandal app. It fails on our first module which has a depeendecy to knockout through:
define(['knockout',....
[09:35:27] Durandal Error: ENOENT, no such file or directory 'C:\xxxxx\app\knockout.js'
In module tree:
company/viewmodels/edit
at Object.fs.openSync (fs.js:438:18)
I have knockout defined as a patch in config.js (standard requirejs way) but it seems gulp-durandal does not resolve paths from config.js ?
'knockout': '../Scripts/lib/knockout/knockout-2.3.0',
How do you get gulp-durandal to use our config paths instead of trying to resolve the modules directly under the app folder ? I tried using options.extraModules but that only allows you to add paths to modules, not symbolic names for the module so that doesn't seem to be the correct way.
The basic structure of my durandaljs app follows the standard guidelines I believe, I have a config.js and main.js under the App folder.
My config.js:
define([], function() {
return {
paths: {
'text': '../Scripts/lib/require/text',
'durandal': '../Scripts/durandal',
'plugins': '../Scripts/durandal/plugins',
My main.js
require(['config'], function(config) {
require.config(config);
require(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'plugins/widget', 'custombindings'],
function(system, app, viewLocator, widget) {
..... app code here.....
}
gulpfile.js:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
gulp.task('durandal', function(){
durandal({
baseDir: 'app', //same as default, so not really required.
main: 'main.js', //same as default, so not really required.
output: 'main.js', //same as default, so not really required.
almond: true,
minify: true,
require:true
})
.pipe(gulp.dest('dir/to/save/the/output'));
});
I guess the question is how do I load my config.js paths into gulp so the paths are resolved correctly ? I tried:
var gulp = require('gulp');
var durandal = require('gulp-durandal');
require(['App/config'], function(config){
console.log('loaded config');
});
But it seems require only wants a string as input (I guess require function in gulp != require from require.js)
I believe the issue is that your gulp-durandal task needs configuration to mimic the config.js file. If you need further assistance please provide more code from your gulp-durandal task.