Develop Reference

How to make a refresh in browser with gulp

I have an app is in iis, it is an app made in angularjs and webapi C # 2.0, I would like to create a task that updates the browser as soon as I save any js file.
Version of gulp: 3.9.1
gulp.task('livereload', function () {
gulp.watch(config.files.js);
});

gulp-livereload
A lightweight gulp plugin for livereload to be used with the
livereload chrome extension or a livereload middleware.
Simple to setup:
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/*.less', ['less']);
});
Browsersync
There's no official Browsersync plugin for Gulp, because it's not
needed! You simply require the module, utilise the API and configure
it with options.
The new cool kid, most have already moved to it.
Streams are supported in Browsersync, so you can call reload at
specific points during your tasks and all browsers will be informed of
the changes. Because Browsersync only cares about your CSS when it's
finished compiling - make sure you call .stream() after gulp.dest.
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
// or
// proxy: 'yourserver.dev'
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
For a manual reload:
// ...
var reload = browserSync.reload;
// Save a reference to the `reload` method
// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({/* ... */});
gulp.watch("*.html").on("change", reload);
});
Why Browsersync is better?
It is not constrained to a single device, it works across desktop and
mobile devices at the same time. It will update code changes,
synchronize scroll positions and form inputs automatically across all
browsers and devices.

How to change script tag url automatically on build

I'm running Backbone with node using the following code in index.html
<script src="js/api/require.js"></script>
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
main.js looks like this:
require(['app'],
function(App){
App.initialize();
}
);
In production, I compile the files using r.js into main-build.js and redirect the link in the index.html file from main to main-build:
<script>require(['js/require-cfg'],function(){require(['main-build'])});</script>
Currently, if I want to deploy my code to production, I have to either manually change from main to main-build in index.html, or keep the link as main-build but change the contents of main-build.js to the same as main.js when I run a local or test environment, then switch back when deploying to production.
Is there a better (automatic) way of having the code use the compiled main-build.js when in production, and the content of main.js when in local or test environment?
eg: using node environment variables to either change the links in index.html (not sure how to change html!) or change the content of main-build.js but the content gets overwritten everytime r.js is run to compile for production

I personally use Gulp to process the index.html file with gulp-html-replace.
In development, you put the tags you need.
<script src="js/api/require.js"></script>
<!-- build:js -->
<script>require(['js/require-cfg'],function(){require(['main'])});</script>
<!-- endbuild -->
To make a build for production, create a gulp task which uses the gulp-html-replace plugin :
var gulp = require('gulp'),
htmlreplace = require('gulp-html-replace');
gulp.task('build', function() {
return gulp.src("index.html")
.pipe(htmlreplace({
js: {
src: [['main-build']],
tpl: '<script>require(["js/require-cfg"],function(){require(["%s"])});</script>'
},
}))
.pipe(gulp.dest("build/index.html"));
});
If you go the Gulp route, you could make all the build process through it. For example, here's a simple r.js task:
var rjs = require('requirejs');
gulp.task('optimize', function(done) {
rjs.optimize({
name: "main",
out: "build/js/main.min.js",
/* ...other options */
}, function(buildResponse) {
done();
}, done);
});

Browsersync css injection wont work, only reloading works?

I'm on windows, basically, browsersync is suppose to detect and inject css files into the browser when any of the css files changes.
Here is the gulp file...
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('serve', function() {
browserSync.init({proxy: "localhost:3000"});
gulp.watch("public/stylesheets/**/*", ['css']);
});
gulp.task('css', function() {
return gulp.src("public/stylesheets/**/*").pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
in index.html i see both css file is being loaded, script tag by browsersync gets added.
But it simply doesn't work. It worked for 1 day, then it never did.

'gulp-jade' not working or compiling jade to html

So I'm working on this project, and I'm using gulp. I need it to be able to compile the jade that I write (in the _jadefiles folder) and output them as .html into the _includes folder of my project.
The things I'm currently compiling and running with gulp are:
- BrowserSync
- Sass (Scss, technically.)
- Autoprefixer
- Something called Child Process (I started with a 'kit on github' called jekyll-gulp-sass-browser-sync)
- And Obviously Jade.
Note: I'm also using Jekyll, however, that hopefully shouldn't matter.
I'm following a video by DevTips, called Design+Code Hour 4.1
Here's his current code:
var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var prefix = require('gulp-autoprefixer');
var cp = require('child_process');
var jade = require('gulp-jade');
var messages = {
jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
};
/**
* Build the Jekyll Site
*/
gulp.task('jekyll-build', function (done) {
browserSync.notify(messages.jekyllBuild);
return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
.on('close', done);
});
/**
* Rebuild Jekyll & do page reload
*/
gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
browserSync.reload();
});
/**
* Wait for jekyll-build, then launch the Server
*/
gulp.task('browser-sync', ['sass', 'jekyll-build'], function() {
browserSync({
server: {
baseDir: '_site'
},
notify: false
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('assets/css/main.scss')
.pipe(sass({
includePaths: ['css'],
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/assets/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('assets/css'));
});
His jade gulp stuff:
/*
* I'm trying to gulp stuff, too. -
*/
gulp.task('jade', function(){
return gulp.src('_jadefiles/*.jade')
.pipe(jade())
.pipe(gulp.dest('_includes'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('assets/css/**', ['sass']);
gulp.watch(['index.html', '_layouts/*.html', '_includes/*'], ['jekyll-rebuild']);
gulp.watch('_jadefiles/*.jade', ['jade']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
Everything else is working fine, exept this.

A bit late but hope it might help somebody who looks for a similar answer, I almost went crazy trying to figure out this for myself.
This sounds a little silly, but after having a similar problem
(jade-gulp runs with no errors but not outputting index.html) and searching throughout the web for an answer with no luck, I realized I just had a syntax mistake in my .jade file (extra space character), so it would not compile to anything.
try commenting out the entire content of your .jade file and then try to parse a very simple line (e.g. h1 hello) with gulp-jade. check if it works, if it does, start debugging your code. Alternatively you can create a new .jade file with a simple code instead of commenting out the original file.
Hope it helps!

can you expand on any errors your seeing?
Does gulp jade run on its own - i.e. standalone - or is it just within your watch that it's not running?
My gut feeling is there's more likely to be an error in your jade markup ( or pug as we need to start calling it )
Can you post any of that ?

BrowserSync doesn't show changes after browser reload

BrowserSync in the gulpfile below is not showing the changes made to index.html even after it says 'Reloading Browsers' in command line as well as the 'Connected to BrowserSync' notification in Chrome.
Another odd thing that's occurring is that after the third save of the index.jade file, the rendered website in Chrome completely disappears, nothing in the rendered DOM.
I've followed ShakyShane's recipe on github (with a few tweaks). It worked without the tweaks on another project I started, but I can't see what's wrong here.
My file structure is:
project-folder
/app
/css
/jade
/js
/sass
index.html
gulpfile.js
package.json
Any help would be greatly appreciated.
/***********************************************************************************
1. DEPENDENCIES
/***********************************************************************************/
var gulp = require ('gulp'), // gulp core
plumber = require ('gulp-plumber'), // disable interuption
jade = require ('gulp-jade'), // jade compiler
sass = require ('gulp-sass'), // sass compiler
autoprefixer = require ('gulp-autoprefixer'), // sets missinb browser prefixes
browserSync = require ('browser-sync'), // inject code to all devices
reload = browserSync.reload; // browser sync reload
/*********************************************************************************
2. FILE DESTINATIONS (RELATIVE TO ASSETS FOLDER)
**********************************************************************************/
var target = {
jadeSrc : 'app/jade/**/*.jade', // source of jade files
htmlDest : 'app/', // html file destination
sassSrc : 'app/sass/**/*.sass', // source of sass files
cssDest : 'app/css', // minified css destination
jsDest : 'dist/js' // where to put minified js
};
/**********************************************************************************
3. SASS TASK
***********************************************************************************/
gulp.task ('sass', function (){
gulp.src(target.sassSrc) // get the files
.pipe(plumber()) // make sure gulp keeps runnin on errors
.pipe(sass()) // compile all sass
.pipe(autoprefixer()) // complete css with correct vendor prefixes
.pipe(gulp.dest(target.cssDest)) // file destination
.pipe(reload({stream:true}));
});
/**********************************************************************************
4. JADE TASKS
**********************************************************************************/
gulp.task('jade', function(){
var YOUR_LOCALS = {};
gulp.src(target.jadeSrc)
.pipe(jade({
locals: YOUR_LOCALS,
pretty: true
}))
.pipe(gulp.dest(target.htmlDest))
});
// separate watcher for browser-sync reaction to '.jade' file changes
gulp.task('jade-watch', ['jade'], reload);
/**********************************************************************************
5. BUILD SEQUENCES
**********************************************************************************/
gulp.task('default', ['sass', 'jade'], function(){
browserSync({server: target.htmlDest});
gulp.watch(target.sassSrc, ['sass']);
gulp.watch(target.jadeSrc, ['jade-watch']);
});