Skip to content

Commit 7c4ccec

Browse files
author
Dmitriy Kubyshkin
committed
Initial commit.
0 parents  commit 7c4ccec

File tree

9 files changed

+175
-0
lines changed

9 files changed

+175
-0
lines changed

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
build/
2+
.DS_Store
3+
node_modules

‎Makefile

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Builds library for browser usage
2+
build:
3+
node ./scripts/build.js
4+
5+
# Starts express server that serves stitched library
6+
serve:
7+
node ./scripts/serve.js
8+
9+
# Runs Mocha test suite
10+
test:
11+
@./node_modules/.bin/mocha -r should -r sinon
12+
13+
# These aren't real targets so we need to list them here
14+
.PHONY: test build serve

‎README.md

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# JS Project Skeleton
2+
This project tries to provide a nice starting point for your JavaScript projects whether it is browser-oriented library, full-fledged client app or node.js module.
3+
4+
Code is organized in [CommonJS](http://en.wikipedia.org/wiki/CommonJS) modules that can be [stitched](https://github.com/sstephenson/stitch) together for browser usage. All development dependencies are handled with [npm](http://npmjs.org/) and Makefile is provided to avoid typing in complex commands to run tests or build project.
5+
6+
Testing is handled with [mocha](http://visionmedia.github.com/mocha/) allowing for either TDD or BDD style tests. Since both **mocha** and **stitch** support [CoffeeScript](http://coffeescript.org/) you can choose to use it for your project if you like.
7+
8+
## Installation
9+
10+
Skeleton requires working installation of **node.js** and **npm** on a Linux or OS X.
11+
12+
Grab the [latest version](https://github.com/grassator/js-project-skeleton/zipball/master) of this repository and unpack it to the folder of your choosing. Then adjust name, description of the project and your personal info inside `package.json` file:
13+
14+
"author": "You <[email protected]>",
15+
"name": "sample_project",
16+
"description": "Some amazing project",
17+
18+
You should keep in mind that project name should be web friendly (i.e. alphanumeric characters and `_` or `-`). After that `cd` to your project folder in console and run:
19+
20+
npm install
21+
22+
It will install all project dependencies into `node_modules` folder and you are good to go. To make sure that everything is working try running following command in your terminal:
23+
24+
make build
25+
26+
It should create `build` folder with regular and minified versions of sample code.
27+
28+
## Development
29+
30+
Let's talk about how to use this skeleton.
31+
32+
### Project structure
33+
34+
First of all lets take a look at directory structure for your
35+
36+
* `build/` – contains stitched version of your code + minified file;
37+
* `demo/` – for demonstration of browser-oriented projects;
38+
* `lib/` – holds all of your app/lib code;
39+
* `scripts/` – support folder for skeleton build and server scripts;
40+
* `test/` – contains all the test cases;
41+
* `vendor/` – for scripts that don't conform to CommonJS.
42+
43+
### Building
44+
45+
As described earlier in installation chapter:
46+
47+
make build
48+
49+
creates stitched version of your project from `lib/` and `vendor/` folders. Filenames are the same as your project name specified in `package.json`.
50+
51+
### Testing
52+
53+
make test
54+
55+
or
56+
57+
npm test
58+
59+
runs all tests inside `test/` folder. By default tests use BDD style that can be changed by editing `test` target inside `Makefile`. You can learn more about **mocha** options in [official documentation](http://visionmedia.github.com/mocha/).
60+
61+
### Browser Demo
62+
63+
To be able to run default demo located in `demo/index.html` you first need to start **express** server by running:
64+
65+
make serve
66+
67+
After that you can always get latest stitched version of your project on [localhost:4000/lib.js](http://localhost:4000/lib.js). If open demo page now you should see that *“The answer is 42”*.

‎demo/index.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<title>Canvas Text Editor</title>
7+
<meta name="description" content="">
8+
<meta name="keywords" content="">
9+
<script type="text/javascript" src="http://localhost:4000/lib.js"></script>
10+
<script type="text/javascript" charset="utf-8">
11+
var CanvasTextEditor = require('editor');
12+
</script>
13+
</head>
14+
<body>
15+
</body>
16+
</html>

‎lib/editor.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
var CanvasTextEditor = function() {};
2+
module.exports = CanvasTextEditor;
3+

‎package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"author": "Dmitriy Kubyshkin <[email protected]>",
3+
"name": "canvas-text-editor",
4+
"description": "Simple text editor using html5 canvas",
5+
"version": "0.0.1",
6+
"engines": {
7+
"node": ">= 0.4.x < 0.7.0"
8+
},
9+
"scripts": {
10+
"test": "make test"
11+
},
12+
"devDependencies": {
13+
"coffee-script": "latest",
14+
"stitch": "latest",
15+
"uglify-js": "latest",
16+
"express": "latest",
17+
"mocha": "latest",
18+
"should": "latest",
19+
"sinon": "latest"
20+
}
21+
}

‎scripts/build.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
var common = require('./common');
2+
var fs = require('fs');
3+
var jsp = require("uglify-js").parser;
4+
var pro = require("uglify-js").uglify;
5+
6+
common.package.compile(function (err, source){
7+
var dir = __dirname + '/../build';
8+
9+
// Making sure build dir exists
10+
try { fs.statSync(dir); }
11+
catch (e) { fs.mkdirSync(dir, 0755); }
12+
13+
// Generating developer (unminified) version
14+
var path = dir + '/' + common.name + '.js';
15+
fs.writeFileSync(path, source);
16+
console.log('Developer version: ' + path.replace(__dirname + '/../', ''));
17+
18+
// And production one
19+
var minPath = dir + '/' + common.name + '.min.js';
20+
var ast = jsp.parse(source); // parse code and get the initial AST
21+
ast = pro.ast_mangle(ast); // get a new AST with mangled names
22+
ast = pro.ast_squeeze(ast); // get an AST with compression optimizations
23+
fs.writeFile(minPath, pro.gen_code(ast));
24+
console.log('Minified version: ' + minPath.replace(__dirname + '/../', ''));
25+
})

‎scripts/common.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
var stitch = require('stitch');
2+
var fs = require('fs');
3+
4+
// Loading project information to get name for building
5+
var project = JSON.parse(fs.readFileSync(__dirname + '/../package.json'));
6+
7+
// Stitch everything together
8+
var package = stitch.createPackage({
9+
paths: [__dirname + '/../lib', __dirname + '/../vendor']
10+
});
11+
12+
module.exports = {
13+
name: project.name,
14+
package: package
15+
};

‎scripts/serve.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var common = require('./common');
2+
var express = require('express');
3+
4+
var app = express.createServer();
5+
var url = '/lib.js';
6+
var port = 4000;
7+
app.get(url, common.package.createServer());
8+
app.listen(port);
9+
10+
console.log('\nYou can load stitched file from:');
11+
console.log('http://localhost:' + port + url);

0 commit comments

Comments
 (0)