blob42
/
angularjs-batarang
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(build): use Grunt for building Batarang

Browse Source
test-unit-sauce
Brian Ford 11 years ago
parent 24bcb46492
commit 4b584ec328
4 changed files with 135 additions and 41 deletions
Show Stats Download Patch File Download Diff File

110
Gruntfile.js
Unescape Escape View File

@ -0,0 +1,110 @@
var markdown = require('marked'),
semver = require('semver');
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('manifest.json'),
changelog: {
options: {
dest: 'CHANGELOG.md',
versionFile: 'manifest.json'
}
},
bump: {
options: {
file: 'manifest.json'
}
},
markdown: {
all: {
file: 'README.md',
dest: 'panes/help.html'
}
},
release: {
options: {
commitMessage: 'v<%= version %>',
tagName: 'v<%= version %>',
bump: false, // we have out own bump
npm: false,
file: 'manifest.json'
}
},
stage: {
files: ['CHANGELOG.md', 'pane/help.html']
},
zip: {
release: {
src: [
'css/*.css',
'img/**',
'js/**',
'panes/*.html',
'panel.html',
'LICENSE',
'manifest.json',
'background.html',
'devtoolsBackground.html'
],
dest: 'batarang-release-' + Date.now() + '.zip'
}
}
});
grunt.registerTask('bump', 'bump manifest version', function (type) {
var options = this.options({
file: grunt.config('pkgFile') || 'package.json'
});
function setup(file, type){
var pkg = grunt.file.readJSON(file);
var newVersion = pkg.version = semver.inc(pkg.version, type || 'patch');
return {file: file, pkg: pkg, newVersion: newVersion};
}
var config = setup(options.file, type);
grunt.file.write(config.file, JSON.stringify(config.pkg, null, ' ') + '\n');
grunt.log.ok('Version bumped to ' + config.newVersion);
});
grunt.registerMultiTask('markdown', 'compiles markdown README into html for the help pane', function() {
var md = grunt.file.read(this.data.file);
// pull out the install instructions, etc
var marker = '<!-- HELP TAB -->';
md = md.substr(md.indexOf(marker) + marker.length);
// fix image paths
md = md.replace(/https:\/\/github.com\/angular\/angularjs-batarang\/raw\/master\/img\//g, '/img/');
var html = markdown(md);
grunt.file.write(this.data.dest, html);
});
grunt.registerTask('stage', 'git add files before running the release task', function() {
grunt.util.spawn({
cmd: process.platform === 'win32' ?
'git.cmd' : 'git',
args: ['add'].append(this.data.files)
}, grunt.task.current.async());
});
grunt.registerTask('url', 'open the url for the chrome app dashboard', function() {
var url = 'https://chrome.google.com/webstore/developer/dashboard';
console.log('Publish to: ' + url);
grunt.util.spawn({
cmd: process.platform === 'win32' ?
'explorer' : 'open',
args: [ url ]
}, grunt.task.current.async());
});
grunt.loadNpmTasks('grunt-release');
grunt.loadNpmTasks('grunt-zip');
grunt.loadNpmTasks('grunt-conventional-changelog');
grunt.registerTask('default', ['bump', 'markdown', 'changelog', 'release', 'zip']);
};

13
package.json
Unescape Escape View File

@ -0,0 +1,13 @@
{
"name": "angularjs-batarang",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-conventional-changelog": "0.0.11",
"grunt-karma": "~0.4.3",
"grunt-release": "https://github.com/btford/grunt-release/archive/feat-tag-name.tar.gz",
"marked": "~0.2.8",
"grunt-zip": "~0.7.0",
"semver": "~1.1.4"
}
}

46
panes/help.html
Unescape Escape View File

@ -1,45 +1,23 @@
<p>In order to begin using the Batarang you need to click the "enable" checkbox. This will cause the application's tab to refresh, and the Batarang to begin collecting perfomance and debug information about the inspected app.</p>
<p>In order to begin using the Batarang you need to click the &quot;enable&quot; checkbox. This will cause the application&#39;s tab to refresh, and the Batarang to begin collecting perfomance and debug information about the inspected app.</p>
<p>The Batarang has five tabs: Model, Performance, Dependencies, Options, and Help.</p>
<h3>Models</h3>
<p><img src="/img/models.png" alt="Batarang screenshot" title="" /></p>
<p><img src="/img/models.png" alt="Batarang screenshot"></p>
<p>Starting at the top of this tab, there is the root selection. If the application has only one <code>ng-app</code> declaration (as most applications do) then you will not see the option to change roots.</p>
<p>Below that is a tree showing how scopes are nested, and which models are attached to them. Clicking on a scope name will take you to the Elements tab, and show you the DOM element associated with that scope. Models and methods attached to each scope are listed with bullet points on the tree. Just the name of methods attached to a scope are shown. Models with a simple value and complex objects are shown as JSON. You can edit either, and the changes will be reflected in the application being debugged.</p>
<h3>Performance</h3>
<p><img src="/img/perf.png" alt="Batarang performance tab screenshot" title="" /></p>
<p><img src="/img/perf.png" alt="Batarang performance tab screenshot"></p>
<p>The performance tab must be enabled separately because it causes code to be injected into AngularJS to track and report performance metrics. There is also an option to output performance metrics to the console.</p>
<p>Below that is a tree of watched expressions, showing which expressions are attached to which scopes. Much like the model tree, you can collapse sections by clicking on "toggle" and you can inspect the element that a scope is attached to by clicking on the scope name.</p>
<p>Underneath that is a graph showing the relative performance of all of the application's expressions. This graph will update as you interact with the application.</p>
<p>Below that is a tree of watched expressions, showing which expressions are attached to which scopes. Much like the model tree, you can collapse sections by clicking on &quot;toggle&quot; and you can inspect the element that a scope is attached to by clicking on the scope name.</p>
<p>Underneath that is a graph showing the relative performance of all of the application&#39;s expressions. This graph will update as you interact with the application.</p>
<h3>Dependencies</h3>
<p><img src="/img/deps.png" alt="Batarang dependencies tab screenshot" title="" /></p>
<p>The dependencies tab shows a visualization of the application's dependencies. When you hover over a service name, services that depend on the hovered service turn green, and those the hovered service depend on turn red.</p>
<p><img src="/img/deps.png" alt="Batarang dependencies tab screenshot"></p>
<p>The dependencies tab shows a visualization of the application&#39;s dependencies. When you hover over a service name, services that depend on the hovered service turn green, and those the hovered service depend on turn red.</p>
<h3>Options</h3>
<p><img src="/img/options.png" alt="Batarang options tab screenshot" title="" /></p>
<p>Last, there is the options tab. The options tab has three checkboxes: one for "show applications," "show scopes," and "show bindings." Each of these options, when enabled, highlights the respective feature of the application being debugged; scopes will have a red outline, and bindings will have a blue outline, and applications a green outline.</p>
<p><img src="/img/options.png" alt="Batarang options tab screenshot"></p>
<p>Last, there is the options tab. The options tab has three checkboxes: one for &quot;show applications,&quot; &quot;show scopes,&quot; and &quot;show bindings.&quot; Each of these options, when enabled, highlights the respective feature of the application being debugged; scopes will have a red outline, and bindings will have a blue outline, and applications a green outline.</p>
<h3>Elements</h3>
<p><img src="/img/inspect.png" alt="Batarang console screenshot" title="" /></p>
<p>The Batarang also hooks into some of the existing features of the Chrome developer tools. For AngularJS applications, there is now a properties pane on in the Elements tab. Much like the model tree in the AngularJS tab, you can use this to inspect the models attached to a given element's scope.</p>
<p><img src="/img/inspect.png" alt="Batarang console screenshot"></p>
<p>The Batarang also hooks into some of the existing features of the Chrome developer tools. For AngularJS applications, there is now a properties pane on in the Elements tab. Much like the model tree in the AngularJS tab, you can use this to inspect the models attached to a given element&#39;s scope.</p>
<h3>Console</h3>
<p><img src="/img/console.png" alt="Batarang console screenshot" title="" /></p>
<p><img src="/img/console.png" alt="Batarang console screenshot"></p>
<p>The Batarang exposes some convenient features to the Chrome developer tools console. To access the scope of an element selected in the Elements tab of the developer tools, in console, you can type <code>$scope</code>. If you change value of some model on <code>$scope</code> and want to have this change reflected in the running application, you need to call <code>$scope.$apply()</code> after making the change.</p>

7
release
Unescape Escape View File

@ -1,7 +0,0 @@
#!/bin/bash
# create zip file for the Chrome Web Store
rm -f batarang-release.zip
zip -r batarang-release.zip css img js panes panel.html LICENSE manifest.json background.html devtoolsBackground.html
echo "done"
echo "upload to: https://chrome.google.com/webstore/developer/dashboard"