Skip to content

Commit 81d2854

Browse files
blinebline
committed
moved to code-part
1 parent 66283ef commit 81d2854

File tree

3 files changed

+152
-209
lines changed

3 files changed

+152
-209
lines changed

‎gulpfile.js‎

Lines changed: 137 additions & 194 deletions
Original file line numberDiff line numberDiff line change
@@ -1,199 +1,142 @@
1-
'use strict';
2-
// ## Setup
3-
var _ = require('lodash');
4-
var del = require("del");
5-
var gulp = require("gulp");
6-
var $ = require('gulp-load-plugins')();
7-
var opn = require('opn');
8-
var marked = require('marked');
9-
var cheerio = require('cheerio');
10-
// [Karma](http://karma-runner.github.io/) for running browser tests
11-
// in [PhantomJS](http://phantomjs.org/).
12-
var karma = require('karma').server;
13-
14-
// Load config for webpack target below.
15-
// karma.conf.js uses the same configuration file.
16-
var webpackConfig = require("./webpack.config.js");
17-
18-
// Custom template tags so cheerio doesn't reformat
19-
// our template markup.
20-
var TemplateOptions = {
21-
interpolate: /\[\[=([\s\S]+?)\]\]/g,
22-
escape: /\[\[-([\s\S]+?)\]\]/g,
23-
evaluate: /\[\[([\s\S]+?)\]\]/g
24-
};
25-
26-
// [Karma](http://karma-runner.github.io/) needs a full path to the config file.
27-
var KarmaConfig = require('path').join(__dirname, './karma.conf.js');
28-
29-
// Sources for generating `index.html`.
30-
var IndexSources = [
31-
'index.js',
32-
'index.html',
33-
'webpack.config.js',
34-
'gulpfile.js',
35-
'karma.conf.js',
36-
'style.less',
37-
'bootstrap.config.less',
38-
'bootstrap.config.js'
39-
];
40-
41-
// ## Helper Functions
42-
43-
// ### highlight
44-
// Returns code with [google-code-prettify](https://code.google.com/p/google-code-prettify/)
45-
// markup setup to use line numbers started at specified line. Used in both docco and
46-
// doccoHtml to add prettify markup to the code sections of the docs.
47-
var highlight = function (code, startLine) {
48-
var html = '<?prettify';
49-
if (_.isNumber(startLine))
50-
html += ' linenums=' + startLine;
51-
html += '><pre class="prettyprint">' + _.escape(code) + '</pre>'
52-
return html;
53-
};
54-
// Setup marked to use our highlighter.
55-
marked.setOptions({ highlight: highlight });
56-
57-
// ### doccoHtml
58-
59-
// Uses [cheerio](https://github.com/cheeriojs/cheerio) to do for html
60-
// what we use docco for with other languages. Extracts out the comments
61-
// and maintains the line numbers for
62-
// [google-code-prettify](https://code.google.com/p/google-code-prettify/)
63-
var doccoHtml = function (path, html, config) {
64-
var walk, $, docs = [], sections = [], marker = "<!-- __MARKER__ -->";
65-
var isValidComment = function (node) {
66-
return node.type === 'comment' && !String(node.nodeValue).match(/\[if\s+[^\]]+\]/);
1+
(function () {
2+
'use strict';
3+
// ## Setup
4+
var _ = require('lodash');
5+
var del = require("del");
6+
var gulp = require("gulp");
7+
var $ = require('gulp-load-plugins')();
8+
var opn = require('opn');
9+
var marked = require('marked');
10+
var part = require('code-part');
11+
// [Karma](http://karma-runner.github.io/) for running browser tests
12+
// in [PhantomJS](http://phantomjs.org/).
13+
var karma = require('karma').server;
14+
15+
// Load config for webpack target below.
16+
// karma.conf.js uses the same configuration file.
17+
var webpackConfig = require("./webpack.config.js");
18+
19+
// [Karma](http://karma-runner.github.io/) needs a full path to the config file.
20+
var KarmaConfig = require('path').join(__dirname, './karma.conf.js');
21+
22+
// Sources for generating `index.html`.
23+
var IndexSources = [
24+
'index.js',
25+
'index.html',
26+
'webpack.config.js',
27+
'gulpfile.js',
28+
'karma.conf.js',
29+
'style.less',
30+
'bootstrap.config.less',
31+
'bootstrap.config.js'
32+
];
33+
34+
// ## Helper Functions
35+
36+
// ### highlight
37+
38+
// Returns code with [google-code-prettify](https://code.google.com/p/google-code-prettify/)
39+
// markup setup to use line numbers started at specified line. Used in both docco and
40+
// doccoHtml to add prettify markup to the code sections of the docs.
41+
var highlight = function (code, startLine) {
42+
var html = '<?prettify';
43+
if (_.isNumber(startLine))
44+
html += ' linenums=' + startLine;
45+
html += '><pre class="prettyprint">' + _.escape(code) + '</pre>'
46+
return html;
6747
};
68-
walk = function () {
69-
if (isValidComment(this)) {
70-
docs.push(this.nodeValue);
71-
$(this).replaceWith($(marker));
72-
} else {
73-
$(this).contents().each(walk);
74-
}
75-
};
76-
$ = cheerio.load(html);
77-
$.root().contents().each(walk);
78-
var nextDoc = '', startLine = 1;
79-
_.forEach($.html().split(marker), function (htmlPart) {
80-
// Edge Case - First thing in html is a comment, we loose a line if that happens.
81-
if (htmlPart === '' && nextDoc === '')
82-
startLine++;
83-
else
84-
startLine += nextDoc.split("\n").length - 1;
85-
sections.push({
86-
docsHtml: marked(nextDoc),
87-
codeHtml: highlight(htmlPart, startLine),
88-
codeText: htmlPart
48+
// Setup marked to use our highlighter.
49+
marked.setOptions({ highlight: highlight });
50+
51+
// ### docco
52+
53+
// [code-part](http://github.com/bline/code-part) To parse out code/docs
54+
// and [marked](https://github.com/chjj/marked) to format the docs.
55+
// marked is manually applied because we are using
56+
// [google-code-prettify](https://code.google.com/p/google-code-prettify/)
57+
// to highlight code.
58+
var docco = function (path, code, config) {
59+
var sections = part(path, code, config);
60+
_.forEach(sections, function (section) {
61+
section.codeHtml = highlight(section.codeText, section.codeLine);
62+
section.docsHtml = marked(section.docsText);
8963
});
90-
startLine += htmlPart.split("\n").length - 1;
91-
nextDoc = docs.shift() || '';
92-
});
93-
return sections;
94-
};
95-
96-
// ### docco
97-
98-
// [docco](http://jashkenas.github.io/docco/) To parse out code/docs
99-
// and [marked](https://github.com/chjj/marked) to format the docs.
100-
// marked is manually applied because we are using
101-
// [google-code-prettify](https://code.google.com/p/google-code-prettify/)
102-
// to highlight code.
103-
var docco = function (path, code, config) {
104-
if (/\.html$/.test(path)) {
105-
return doccoHtml(path, code, config);
64+
return sections;
10665
}
107-
if (!config) config = {};
108-
_.defaults(config, { languages: {} });
109-
110-
var d = require('docco');
111-
var sections = d.parse(path, code, config);
112-
var startLine = 1;
113-
_.forEach(sections, function (section) {
114-
if (section.docsText !== '') {
115-
startLine += section.docsText.split("\n").length - 1;
116-
}
117-
section.codeHtml = highlight(section.codeText, startLine);
118-
startLine += section.codeText.split("\n").length - 1;
119-
section.docsHtml = marked(section.docsText);
66+
67+
// ## Tasks
68+
69+
// ### task clean
70+
// Cleans up dist directory using [del](https://github.com/sindresorhus/del).
71+
gulp.task("clean", function (done) {
72+
del(["dist/*"], done);
73+
});
74+
75+
// ### task index
76+
// Build's the index file with documentation from [docco](http://jashkenas.github.io/docco/)
77+
// with the `index.html` [lodash template](https://lodash.com/docs#template).
78+
gulp.task("index", ["clean"], function (done) {
79+
var docs = [];
80+
gulp.src(IndexSources)
81+
.pipe($.tap(function (file) {
82+
docs.push({
83+
file: file,
84+
docco: docco(file.path, file.contents.toString()),
85+
id: _.uniqueId('file-')
86+
})}))
87+
// After we've created the `docs` array, build the template.
88+
.on('end', function () {
89+
gulp.src('index.html')
90+
.pipe($.template({ docs: docs }))
91+
.pipe(gulp.dest('dist'))
92+
.on('end', function () { done() })
93+
});
94+
});
95+
96+
// ### task webpack
97+
// Builds the main.js and any resources (bootstrap uses a few)
98+
// into the dist directory. Uses [gulp-webpack](https://github.com/shama/gulp-webpack).
99+
gulp.task("webpack", ["clean"], function () {
100+
return gulp.src("index.js")
101+
.pipe($.webpack(webpackConfig))
102+
.pipe(gulp.dest('dist'));
103+
});
104+
105+
// ### task build
106+
// Build `index.html` and `main.js`.
107+
gulp.task("build", ["webpack", "index"]);
108+
109+
// ### task watch
110+
// Build and serve `index.html` on localhost port 3000
111+
// launching a browser with [opn](https://github.com/sindresorhus/opn) to view.
112+
// If you have the [livereload](https://github.com/vohof/gulp-livereload)
113+
// plugin for chrome installed it will also reload
114+
// your browser when files in the dist directory change.
115+
gulp.task("watch", ["build"], function () {
116+
$.livereload.listen();
117+
gulp.watch('dist/**/*').on('change', $.livereload.changed);
118+
gulp.watch(IndexSources, ['build']);
119+
opn("http://127.0.0.1:3000/");
120+
return $.serve('dist')();
121+
});
122+
123+
// ### task deploy
124+
// Deploy to Github pages. *UNTESTED*
125+
gulp.task("deploy", ['build'], function () {
126+
return gulp.src("dist/**/*")
127+
.pipe($.ghPages('git@github.com:bline/bootstrap-webpack-example.git'));
128+
});
129+
130+
// ### task test
131+
// Run tests in [Karma](http://karma-runner.github.io/) using [FantomJS](http://phantomjs.org/).
132+
gulp.task("test", function (done) {
133+
karma.start({
134+
configFile: KarmaConfig,
135+
singleRun: true
136+
}, done);
120137
});
121-
return sections;
122-
}
123-
124-
// ## Tasks
125-
126-
// ### task clean
127-
// Cleans up dist directory using [del](https://github.com/sindresorhus/del).
128-
gulp.task("clean", function (done) {
129-
del(["dist/*"], done);
130-
});
131-
132-
// ### task index
133-
// Build's the index file with documentation from [docco](http://jashkenas.github.io/docco/)
134-
// with the `index.html` [lodash template](https://lodash.com/docs#template).
135-
gulp.task("index", ["clean"], function (done) {
136-
var docs = [];
137-
gulp.src(IndexSources)
138-
.pipe($.tap(function (file) {
139-
docs.push({
140-
file: file,
141-
docco: docco(file.path, file.contents.toString()),
142-
id: _.uniqueId('file-')
143-
})}))
144-
// After we've created the `docs` array, build the template.
145-
.on('end', function () {
146-
gulp.src('index.html')
147-
.pipe($.template({ docs: docs }, TemplateOptions))
148-
.pipe(gulp.dest('dist'))
149-
.on('end', function () { done() })
150-
});
151-
});
152-
153-
// ### task webpack
154-
// Builds the main.js and any resources (bootstrap uses a few)
155-
// into the dist directory. Uses [gulp-webpack](https://github.com/shama/gulp-webpack).
156-
gulp.task("webpack", ["clean"], function () {
157-
return gulp.src("index.js")
158-
.pipe($.webpack(webpackConfig))
159-
.pipe(gulp.dest('dist'));
160-
});
161-
162-
// ### task build
163-
// Build `index.html` and `main.js`.
164-
gulp.task("build", ["webpack", "index"]);
165-
166-
// ### task watch
167-
// Build and serve `index.html` on localhost port 3000
168-
// launching a browser with [opn](https://github.com/sindresorhus/opn) to view.
169-
// If you have the [livereload](https://github.com/vohof/gulp-livereload)
170-
// plugin for chrome installed it will also reload
171-
// your browser when files in the dist directory change.
172-
gulp.task("watch", ["build"], function () {
173-
$.livereload.listen();
174-
gulp.watch('dist/**/*').on('change', $.livereload.changed);
175-
gulp.watch(IndexSources, ['build']);
176-
opn("http://127.0.0.1:3000/");
177-
return $.serve('dist')();
178-
});
179-
180-
// ### task deploy
181-
// Deploy to Github pages. *UNTESTED*
182-
gulp.task("deploy", ['build'], function () {
183-
return gulp.src("dist/**/*")
184-
.pipe($.ghPages('git@github.com:bline/bootstrap-webpack-example.git'));
185-
});
186-
187-
// ### task test
188-
// Run tests in [Karma](http://karma-runner.github.io/) using [FantomJS](http://phantomjs.org/).
189-
gulp.task("test", function (done) {
190-
karma.start({
191-
configFile: KarmaConfig,
192-
singleRun: true
193-
}, done);
194-
});
195-
196-
// ### task default
197-
// Run test by default.
198-
gulp.task("default", ["test"]);
199138

139+
// ### task default
140+
// Run test by default.
141+
gulp.task("default", ["test"]);
142+
})();

‎index.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ <h2>bootstrap-webpack example</h2>
5151
<div class="navbar-collapse collapse">
5252
<ul class="nav navbar-nav" role="tablist">
5353
<!-- Loop over each file and present a navigation link to activate the tab. -->
54-
[[ _.forEach(docs, function (doc, i) { ]]
55-
<li role="presentation" class="[[= i === 0 ? 'active' : '' ]]">
56-
<a href="#[[= doc.id ]]" role="tab" data-toggle="tab">[[= doc.file.relative ]]</a>
54+
<% _.forEach(docs, function (doc, i) { %>
55+
<li role="presentation" class="<%= i === 0 ? 'active' : '' %>">
56+
<a href="#<%= doc.id %>" role="tab" data-toggle="tab"><%= doc.file.relative %></a>
5757
</li>
58-
[[ }); ]]
58+
<% }); %>
5959
</ul>
6060
</div>
6161
</div>
@@ -67,29 +67,29 @@ <h2>bootstrap-webpack example</h2>
6767
Outputs the generated html and docs in two panes.
6868
-->
6969
<div class="tab-content doc-content">
70-
[[ _.forEach(docs, function (doc, i) { ]]
71-
<div role="tabpanel" class="tab-pane fade[[= i === 0 ? ' in active' : '' ]]" id="[[= doc.id ]]">
70+
<% _.forEach(docs, function (doc, i) { %>
71+
<div role="tabpanel" class="tab-pane fade<%= i === 0 ? ' in active' : '' %>" id="<%= doc.id %>">
7272
<table class="file-table">
7373
<!-- doc.docco is an array of sections. Each one contains the -->
7474
<!-- html for displaying the documention and code associated with it. -->
75-
[[ _.forEach(doc.docco, function (section, i) { ]]
75+
<% _.forEach(doc.docco, function (section, i) { %>
7676
<tr>
7777
<td class="file-docs">
78-
[[= section.docsHtml ]]
78+
<%= section.docsHtml %>
7979
</td>
8080
<!-- If no code text, leave an empty cell for formatting -->
8181
<td class="file-code">
82-
[[ if (!(/^\s*$/).test(section.codeText)) { ]]
83-
[[= section.codeHtml ]]
84-
[[ } else { ]]
82+
<% if (!(/^\s*$/).test(section.codeText)) { %>
83+
<%= section.codeHtml %>
84+
<% } else { %>
8585
&nbsp;
86-
[[ } ]]
86+
<% } %>
8787
</td>
8888
</tr>
89-
[[ }); ]]
89+
<% }); %>
9090
</table>
9191
</div>
92-
[[ }); ]]
92+
<% }); %>
9393
</div>
9494
</div>
9595
<!-- ### Scripts -->

0 commit comments

Comments
 (0)