Browser sync reloading but CSS not changing with LESS and Gulp - less

I'm trying to figure out how to use browser sync in conjunction with gulp and less to get the browser to automatically update upon changes in less files after compilation. What I've got right now is causing what appears to be a reload in the system with a message "Connected to Browser Sync" but I'm not seeing changes occur in the browser. On a full manual reload with cache disabled I see the expected changes, so the css / less task seems to be working partially but I'm missing something on the browser sync.
Oh, I'm using #import statements in a main .less file to pull in less files for each individual module. Thanks for your time and help!
gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(minifyCSS())
.pipe(sourcemaps.write('./'))
.pipe(filesize())
.pipe(gulp.dest( paths.dest + '/css' ))
.pipe(reload({stream: true}));
});
gulp.task('browser-sync', function() {
browserSync({
proxy: 'localhost:8080'
});
});
//dev task to compile things on the fly
gulp.task('dev', ['browser-sync'], function(){
gulp.watch(paths.scripts, ['scripts']);
gulp.watch(paths.less, ['less']);
gulp.watch(paths.templates, ['templates']);
});

A good way to make browserSync work that way is to have a new listener on to the generated files. You compile LESS to CSS,
gulp.task('less', function(){
return gulp.src(basepath + 'styles/emma.less')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(minifyCSS())
.pipe(sourcemaps.write('./'))
.pipe(filesize())
.pipe(gulp.dest( paths.dest + '/css' ));
});
and put a file watcher onto the results, triggering reload:
gulp.task('dev', ['browser-sync'], function(){
gulp.watch(paths.less, ['less']);
gulp.watch(paths.dest + '/css/**/*.css', reload);
});
One reason the original code won't work might be of the lost reference to the source files once they're compiled (that's nothing more than an assumption, though)

Related

how to 'browserSync + LiveReload + watch' in gulp #4

I'm trying to write a gulp file that do the following:
watch the task for any changes.
compile SCSS and minify css and javascript by calling some tasks
Reload the browser vie browserSync
So I came up with following pice of code:
gulp.task('watch', function() {
browserSync({
server: {
baseDir: [paths.base.root]
}
});
gulp.watch(paths.assets.scss, gulp.series('compile:scss'));
gulp.watch(paths.assets.css + '**/*.css', gulp.series('minify:css'));
gulp.watch(paths.assets.js, gulp.series('minify:js'));
gulp.watch(paths.base.html, browserSync.reload);
gulp.watch(paths.assets.js, browserSync.reload);
gulp.watch(paths.assets.css + '**/*.css', browserSync.reload);
gulp.watch(paths.assets.imgs, browserSync.reload);
});
In this pice of code the first three tasks are working but browser only reload one time.

Gulp jekyll browser-sync rebuild loop

I have been using a Gulp script on my Jekyll project together with browser-sync and some other plugins (to minify/concat JS/Sass and to minify images and svg).
Starting a few days ago (I'm not sure what caused it, using my old gulp scripts doesn't help) it's causing a loop of 2-15 reloads every time I save a HTML or JS file.
This returns in the following in the terminal:
[00:51:47] Finished 'jekyll-build' after 850 ms
[00:51:47] Starting 'jekyll-rebuild'...
[BS] Reloading Browsers...
[00:51:47] Finished 'jekyll-rebuild' after 241 μs
[00:51:47] Starting 'jekyll-build'...
Generating...
done in 0.188 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[00:51:48] Finished 'jekyll-build' after 881 ms
[00:51:48] Starting 'jekyll-rebuild'...
[BS] Reloading Browsers...
[00:51:48] Finished 'jekyll-rebuild' after 480 μs
[00:51:48] Starting 'jekyll-build'...
Generating...
done in 0.251 seconds.
Auto-regeneration: disabled. Use --watch to enable.
[00:51:49] Finished 'jekyll-build' after 826 ms
[00:51:49] Starting 'jekyll-rebuild'...
[BS] Reloading Browsers...
[00:51:49] Finished 'jekyll-rebuild' after 942 μs
My Gulpfile looks like the following. Sorry for pasting so much code in here.
/**
* 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', 'jekyll-rebuild', 'imagemin', 'svgmin'], function() {
browserSync({
server: {
baseDir: '_site'
}
});
});
/**
* Compile files from _scss into both _site/css (for live injecting) and site (for future jekyll builds)
*/
gulp.task('sass', function () {
return gulp.src('_scss/main.scss')
.pipe(sass({
includePaths: ['scss'],
onError: browserSync.notify
}))
.pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
.pipe(gulp.dest('_site/css'))
.pipe(browserSync.reload({stream:true}))
.pipe(gulp.dest('css'))
.pipe(rename({
extname: ".min.css"
}))
.pipe(uglifycss())
.pipe(gulp.dest('css'))
.pipe(gulp.dest('_site/css'));
});
/** optimize images **/
gulp.task('imagemin', function() {
return gulp.src('assets/img/*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('./_site/assets/img'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('svgmin', function() {
return gulp.src('assets/svg/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('./_site/assets/svg'));
});
gulp.task('scripts', function() {
return gulp.src([
'***scripts***' //removed for readability
])
.pipe(include())
.pipe(plumber({
errorHandler: function(err){
notify('JS compile error: ' + err);
}
}))
.pipe(concat('main.js'))
.pipe(gulp.dest('javascript'))
.pipe(rename({
extname: ".min.js"
}))
.pipe(uglify())
.pipe(gulp.dest('javascript'))
.pipe(browserSync.reload({stream:true}))
.pipe(notify('JS Compiled'));
});
/** Lint JS **/
gulp.task('lint', function() {
return gulp.src('javascript/app/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
/**
* Watch scss files for changes & recompile
* Watch html/md files, run jekyll & reload BrowserSync
*/
gulp.task('watch', function () {
gulp.watch('_scss/**/**/**/*.scss', ['sass']);
gulp.watch('assets/img/*', ['imagemin']);
gulp.watch('assets/svg/*', ['svgmin']);
gulp.watch('javascript/app/*.js', ['lint', 'scripts']);
gulp.watch(['*.html', '**/*.html', 'javascript/main.js', '_layouts/*.html', '_includes/**/**/*.html'], ['jekyll-rebuild']);
});
/**
* Default task, running just `gulp` will compile the sass,
* compile the jekyll site, launch BrowserSync & watch files.
*/
gulp.task('default', ['browser-sync', 'watch']);
Does anyone see something that could be causing this?
I think the line in your watch function is too broad:
gulp.watch(['*.html', '**/*.html', 'javascript/main.js', '_layouts/*.html', '_includes/**/**/*.html'], ['jekyll-rebuild']);
The second one - '**/*.html' I think is seeing any sub folders, which would include the _site folder, so it sees all the changes there and gets stuck in a loop. You change a file, it regenerates, the _site folder gets dumped, it sees that, regenerates, etc etc.
edit to excluded _site folder
If you have a lot of subfolders and want to include them with **/*.html try excluding the _site directory by adding '!_site/**/*' to the list.
Also, keep in mind that you are specifying .html, that will not pickup any markdown files.
Working on this question has led to this - I think this will be my new watch (I have no reason not to watch all files, other may not want this):
gulp.watch(['**/*.*', '!_site/**/*', '!node_modules/**/*','!.sass-cache/**/*' ], ['jekyll-rebuild']);
the first part seems to watch everything, the second part excludes the site folder and everything in it, then the same for node_modules and .sass-cache.. So far I have not been able to break it, and this is much simpler than what I had:
gulp.watch(['./*', '_layouts/*', '_videos/*', 'order-online/*', '_includes/*', '_posts/*', '_sass/*', 'css/*', 'services/*', '_data/*' ], ['jekyll-rebuild']);

on reloading/refreshing the page the dojo/ready function is not called

When refreshing/reloading a page, the dojo/ready function is not called, so the page is not loaded properly. Sometimes it is working properly; some times not.
window.onload = function() {
setTimeout(function(){document.body.style.opacity="100";},100);
require(["dojo/ready"], function(ready){
ready(function(){
alert("ready");
});
});
};
This is my window onload code. Sometimes I am getting the alert ready, sometimes not. I cannot figure out the issue.
Thanks in advance
I'd suggest to not use window.onload.
Instead, include your script as a js file like this:
<script type="text/javascript" src="/appRoot/js/my.js"></script>
Then in your my.js file:
require([ "dojo", "dojo/domReady!" ], function(dojo) {
// Code in here will be run only when the page is ready.
});
I am using this with dojo 1.7, but this is valid through 1.9.
See also the dojo/domReady! documentation.

Dojo - Issue loading widget cross-domain

I'm working on a project that requires that some custom Dojo widgets (i.e., widgets we have written ourselves) are loaded from another server. Despite my best efforts over several days, I cannot seem to get Dojo to load the widgets.
Dojo is loaded from the Google CDN, the widget is loaded from www.example.com, and the website is located at www.foo.com.
I cannot post the actual project files (this is a project for a company), but I have reproduced the error with smaller test files.
Test.html (on www.foo.com):
<html>
<div id="content"></div>
<script>
var djConfig = {
isDebug: true,
modulePaths: {
'com.example': 'http://example.com/some/path/com.example'
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js.uncompressed.js"></script>
<script type="text/javascript">
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.addOnLoad(function() {
dojo.require("com.example.widget.Test", false);
dojo.addOnLoad(function() {
new com.example.widget.Test().placeAt(dojo.byId('content'));
});
});
</script>
</html>
Test.xd.js (at www.example.com/some/path/com.example/widget/Test.xd.js):
dojo.provide("com.example.widget.Test");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare("com.example.widget.Test", [dijit._Widget, dijit._Templated], {
templateString: "<div dojoAttachPoint=\"div\">This is a test</div>",
postCreate: function() {
console.log("In postCreate");
console.log(this.div);
this.div.innerHTML += '!!!';
}
});
In Firebug, I am seeing an error after a delay of a few seconds saying that the cross-domain resource com.example.widget.Test cannot be loaded. However, in the 'Net' tab I am able to see that Test.xd.js is successfully downloaded, and I am able to set a breakpoint and see that the dojo.declare executes and completes without error.
I appreciate any help. Please let me know if there is any other information I can provide.
There is a different way for handling the module declarations in XD-loader. This is due to how the loader handles 'module-ready' event. You will most likely experience, that the dojo.addOnLoad never runs, since it 'knows' that certainly - some required modules are not declared.
Even so, they may very well be declared - and the change in 1.7+ versions of dojotoolkit seem to reckognize that fact. The reason for this, i believe, is that the mechanism for 'module-ready' is not implemented correctly in your myModule.xd.js modules.
It is basically a 'header' or 'closure' of the declaration, involving a few steps - wrapping everything in your basic module from dojo.provide and eof
Standard example boiler module file '{{modulePath}}/my/Tree.js'
dojo.provide("my.Tree");
dojo.require("dijit.Tree");
dojo.declare("my.Tree", dijit.Tree, {
// class definition
});
X-Domain example boiler module file '{{modulePath}}/my/Tree.xd.js
dojo._xdResourceLoaded(function(){
return {
depends: [
["provide", "my.Tree"],
["require", "dijit.Tree"]
],
defineResource: function(dojo) {
///////////////////////////////
/// Begin standard declaration
dojo.provide("my.Tree");
dojo.require("dijit.Tree");
dojo.declare("my.Tree", dijit.Tree, {
// class definition
});
/// End standard declaration
///////////////////////////////
}
}
})();

Dojo huge footprint- Am I doing something wrong

I am making a web application using dojo toolkit and heres my code
dojo.ready(
function(){
dojo.declare("Main",null,{
_dialog:null,
constructor: function()
{
dojo.require("dijit.Dialog");
},
make_dialog: function(url)
{
_dialog= new dijit.Dialog({
href:url,
});
_dialog.show();
}
}); // class ends
temp=new Main();
});// dojo.ready ends
My problem is that when I load dijit.Dialog it is loading various js files( 20 plus) like
tooltip.js,backgroundIframe.js taking about 60kb alone. I want to ask is it dojo normal behaviour or I am doing
And my main problem Is that it making 55 different request. Please help me.
A custom build will package everything up into a fewer files.
http://dojotoolkit.org/reference-guide/quickstart/custom-builds.html