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.
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']);
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.
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
///////////////////////////////
}
}
})();
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