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.
Related
I'm using intern.js as a test framework to test dojo modules and it works well.
Now I have to test some non modular legacy code but I can't.
This is an example of a simple file to test:
var Component = function() {
this.itWorks = function() {
return true;
}
};
And this is the test
define([
'intern!object',
'intern/chai!assert',
'intern/order!controls/component',
], function (registerSuite, assert) {
registerSuite({
name: 'test legacy code',
'simple test': function () {
console.log(Component);
}
});
});
The test fails sayng that "Component is not defined".
I've notice that it works only if I write
window.Component = Component
At the bottom of file to test.
I can't modify all the file to test, is it possible to test the file in a different way?
This should work fine. One possible issue is where you're loading component from. The 'controls/component' dependency in 'intern/order!controls/component' is, barring any special loader config, relative to the file doing the loading. That means that if the project is setup like this:
project/
controls/
component.js
tests/
intern.js
componentTest.js
and component is being loaded from componentTest.js, then the dependency should be 'intern/order!../controls/component.js'. (It will actually work without the '../' in this case since controls is a top level directory in the project.)
Another potential issue is that a non-AMD identifier should use the .js suffix. This tells the loader that the thing being loaded is a generic script rather than an AMD module.
Also note that the order plugin is only needed to load multiple legacy files in a specific order. If order doesn't matter, or you're just loading one script, you can just use the script itself '../controls/component.js' as the dependency.
<"/"https://stackoverflow.com/tags" term="legacy" /">
<"/!-- begin snippet: js hide: false console: true babel: false --"/">
"var Component" = function() {
"this.itWorks" = function() {
return=true;
}
};
<"/"!-- end snippet --"/">
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']);
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)
I have written an application in Sencha Touch 2.1, of which I embed a package build into Cordova/PhoneGap 2.5.0 and compile in xCode to run on iOS Simulator / iOS. I have added the PGSQLite plugin to PhoneGap, and built my own PhoneGap/SQLite Proxy for Sencha, which I used on a few of my Stores.*
Problem: When I embed a package build into PhoneGap and run in iOS Simulator, I see that Cordova does not load before Sencha initializes. I see this because my calls in my Sencha app to Cordova.exec that I make in my Proxy initialization result in an error telling me that the Cordova object cannot be found.
I do successfully use Cordova.exec later in my application to run things like the Childbrowser plugin for PhoneGap, and it works. But using Cordova.exec at an early stage in the app's execution, i.e., initialization, is too soon to guarantee that the Cordova object will have been instantiated.
Already tried: I already tried the following approaches:
I tried simply embedding the developer build of my Sencha app into PhoneGap. Although this worked, I don't want to deploy my development build as my released app because it is inefficient and takes up a lot of space. I have learned from this experiment, however, that the way the Sencha Touch microloader works on package and production builds loads PhoneGap after Sencha. This can be clearly seen when inspecting the DOM after Sencha loads in a package build.
I have already configured my app.json file to include PhoneGap and
my plugins before app.js and the Sencha Touch framework. Playing
with the order of my JS file references in my app.json did not
seem to affect the load order.
I also tried creating a script loader, as described here
(StackOverflow). I then ran the script loader for Cordova, and in
the callback for that, ran the script loader for my plugin, and
then, finally, in the callback for that, ran the Sencha Touch
microloader. This resulted in an error. Additionally, I had to
manually set that up in my index.html file after Sencha built my
package. This seems unacceptable.
What I am looking for: I am looking for answers to the following:
Is there a way to configure Sencha's microloader or my Sencha app in general so that Cordova is ensured to have loaded before Sencha's microloader runs?
Is there a way to set this up so that using Sencha Cmd still works, and I don't have to hack around in my index.html file after I build the app?
Note:
*Please don't suggest I use the existing, so-called, SQLite Proxy for Sencha. I specifically chose my approach because, though I appreciated the existing work on a SQLite proxy for Sencha Touch 2 (namely, this), it is actually a WebSQL proxy that does not store natively in SQLite on iOS. My proxy uses the PGSQLite plugin for PhoneGap to natively store data in SQLite on iOS. I plan to open-source it when I have an opportunity to clean it up and untangle it from my code.
I ended up solving this myself by building a custom loader. I am not sure if there is a more Sencha-ish way to do it, but here are the details of what I did, which does work, in case anyone else wants to ensure that PhoneGap is completely loaded in package and production builds before running anything in Sencha. (That would probably be the case in all scenarios in which PhoneGap is packaging a Sencha app).
My index.html file:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<!-- Load Cordova first. Replace with whatever version you are using -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
// Check for whatever mobile you will run your PhoneGap app
// on. Below is a list of iOS devices. If you have a ton of
// devices, you can probably do this more elegantly.
// The goal here is to only listen to the onDeviceReady event
// to continue the load process on devices. Otherwise you will
// be waiting forever (literally) on Desktops.
if ((navigator.platform == 'iPad') ||
(navigator.platform == 'iPhone') ||
(navigator.platform == 'iPod') ||
(navigator.platform == 'iPhone Simulator') ||
(navigator.platform == 'iPadSimulator')
) {
// Listening for this event to continue the load process ensures
// that Cordova is loaded.
document.addEventListener("deviceready", onDeviceReady, false);
} else {
// If we're on Desktops, just proceed with loading Sencha.
loadScript('loader.js', function() {
console.log('Finished loading scripts.');
});
}
};
// This function is a modified version of the one found on
// StackOverflow, here: http://stackoverflow.com/questions/756382/bookmarklet-wait-until-javascript-is-loaded#answer-756526
// Using this allows you to wait to load another script by
// putting the call to load it in a callback, which is
// executed only when the script that loadScript is loading has
// been loaded.
function loadScript(url, callback)
{
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
// Attach handlers for all browsers
var done = false;
script.onload = script.onreadystatechange = function()
{
if( !done && ( !this.readyState
|| this.readyState == "loaded"
|| this.readyState == "complete") )
{
done = true;
// Continue your code
callback();
}
};
head.appendChild(script);
}
function onDeviceReady() {
console.log("[PhoneGap] Device initialized.");
console.log("[PhoneGap] Loading plugins.");
// You can load whatever PhoneGap plugins you want by daisy-chaining
// callbacks together like I did with pgsqlite and Sencha.
loadScript('pgsqlite_plugin.js', function() {
console.log("[Sencha] Adding loader.");
// The last one to load is the custom Sencha loader.
loadScript('loader.js', function() {
console.log('Finished loading scripts.');
});
});
};
</script>
<meta charset="UTF-8">
<title>Sencha App</title>
</head>
<!-- Don't forget to call onBodyLoad() in onLoad -->
<body onLoad="onBodyLoad();">
</body>
</html>
Next, create a custom loader in loader.js in your document root, alongside your index.html. This one is heavily based on the development microloader that comes with Sencha. Much props to them:
console.log("Loader included.");
(function() {
function write(content) {
document.write(content);
}
function meta(name, content) {
write('<meta name="' + name + '" content="' + content + '">');
}
var global = this;
if (typeof Ext === 'undefined') {
var Ext = global.Ext = {};
}
var head = document.getElementsByTagName("head")[0];
var xhr = new XMLHttpRequest();
xhr.open('GET', 'app.json', false);
xhr.send(null);
var options = eval("(" + xhr.responseText + ")"),
scripts = options.js || [],
styleSheets = options.css || [],
i, ln, path;
meta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
meta('apple-mobile-web-app-capable', 'yes');
meta('apple-touch-fullscreen', 'yes');
console.log("Loading stylesheets");
for (i = 0,ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
path = path.path;
}
var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = path;
head.appendChild(stylesheet);
}
for (i = 0,ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
path = path.path;
}
var script = document.createElement("script");
script.src = path;
head.appendChild(script);
}
})();
Notice that your index.html file does not contain a #microloader script element. That's because you should take it out and use your custom loader.
With all that in place, you will be able to sail smoothly, knowing that the whole PhoneGap environment is in place before your Sencha javascript starts doing things.
I want to run my Jasmine e2e tests using KarmaJS (0.9.2). I use Google Closure with AngularJS (1.0.7) on Windows 7. When I start karma using karma start config\karma-e2e.js everything works fine (browser navigates to correct page) but it doesn't execute my tests (stops on 'browser navigate to').
The config\karma-e2e.js file:
basePath = '../';
frameworks = ['ng-scenario'];
files = [
'tests/e2e/**/*.js'
];
autoWatch = true;
singleRun = false;
browsers = ['Chrome'];
urlRoot = '/__karma/';
proxies = {
'/': 'http://localhost:8080/'
}
plugins = [
'karma-ng-scenario'
'karma-chrome-launcher'
]
Test source (tests\e2e\scenarios.coffee) is:
describe 'Intro page view', ->
it 'has hello world message', ->
browser().navigateTo '/app/client/'
expect(element('#text').text()).toBe 'Hello World'
I'm using html5Mode routes, angular is bootstraped manualy using angular.bootstrap, all my coffee scripts are compiled by IDE and I see no errors in browser console or command line. So how should I do it? Am I doing something wrong?
Thanks!
I solved this problem. Seems angular scenario needs ng-app directive which is at least weird (or it's a bug). So I added ng-app attribute to body after calling App.bootstrap() on index page. Everything works fine now.
<script type="text/javascript">
App.bootstrap();
document.body.setAttribute('ng-app', 'App');
</script>