generator-base-backbone
v1.7.1
Published
Backbone.js basic skeleton for webapp development. With RequireJS, Bootstrap, Sass, and templating with Pug and Lodash. Also with JSHint and Grunt.
Downloads
63
Maintainers
Readme
generator-base-backbone
Zguillez | Guillermo de la Iglesia
Icosa-hk | Icosahedron
Yeoman generator for Backbone.js webapp development. With RequireJS, Bootstrap, Sass, and templating with Pug and Lodash
Getting Started
Install Yeoman
npm install -g yo
Yeoman Gen
erators
To install generator-base-backbone from npm, run:
npm install -g generator-base-backbone
//or:
sudo npm install -g generator-base-backbone
Finally, initiate the generator:
yo base-backbone
If you have error on install try to update dependences manually:
sudo npm update
bower update
Requeriments
NodeJS
For update npm
sudo npm install npm -g
Bower
npm install -g bower
Sass
sudo gem install sass
Documentation:
Usage
Develop code on folder /src
/src
/data
/images
/scripts
/collections
/views
/styles
/templates
Compile code
Use grunt task to compile code and deploy webapp
grunt serve
THis will launch server on port 9000
http://localhost:9000/
Distribute code is compileded on forder /dist
/dist
/css
/data
/images
/js
/lib
/templates
Styling
Sass files (*.sass, *.scss) must be located on /src/styles folder root.
- Grunt task sass.js will process the files into CSS files to folder /src/styles/css.
- Grunt task copy.js will copy all CSS files into /src/styles/css to folder /dist/css for ditribution.
- You can also create and edit CSS files in /src/styles/css.
Templating
The NodeJS template engine PUG is implemented. Pug files (*.pug) must be located on /templates folder root.
- Grunt task pug.js will process the files into HTML files to folder /templates/html.
- Grunt task copy.js will copy all CSS files into /templates/html to folder /dist/templates for ditribution.
- You can also create and edit HTML templates files in /templates/html.
You can use combined Pug and Lodash for templating:
//templates/index.pug
header#header
section(class='content')
header
img(class='logo', src='images/backbone.png')
.buttons.row
<% _.forEach(libs, function(lib) { %>
<%= '<a href="' + lib.url + '" target="_black" data-bypass="data-bypass" class="btn btn-default btn-sm">' + lib.name + '</a>' %>
<% }); %>
footer#footer
Documentation:
Dependencies
Grunt task copy.js will read all bower.js files from /bower_components subfolders, and copy the file path from main node, like:
//bower_components/requirejs/bower.json
{
...
"main": "require.js",
...
}
And put this files into folder /dist/lib/.
If any installed dependency has no bower.json file (like lodash) you must edit the copy.js task to manually copy it:
grunt.config.set('copy', {
...
lodash_: {
cwd: 'bower_components/lodash/dist',
src: 'lodash.js',
dest: 'dist/lib/',
expand: true
},
...
});
If an unnecesaary file is copied (like boostrap.less):
//bower_components/bootstrap/bower.json
{
...
"main": [
"less/bootstrap.less",
"dist/js/bootstrap.js"
],
...
}
you can delete it with the clean-dist.js task:
//grunt/clean-dist.js
grunt.registerTask('clean-dist', 'Clean dist folder', function() {
...
grunt.config.set('clean.files.src', ['dist/lib/bootstrap.less']);
...
});
Contributing and issues
Contributors are welcome, please fork and send pull requests! If you have any ideas on how to make this project better then please submit an issue or send me an email.
License
©2016 Zguillez.io
Original code licensed under MIT Open Source projects used within this project retain their original licenses.
Changelog
v1.6.0 (November 19, 2016)
- Removes Bootstrap Native
- Update Jade to Pug
v1.5.0 (June 20, 2016)
- Update dependencies
- Uses Bootstrap Native
- Uses Jquery 3
v1.4.0 (May 9, 2016)
- Update dependencies
v1.3.0 (February 7, 2016)
- Fix Backbone require on collections
v1.2.0 (January 29, 2016)
- Auto copy dependecies fron bower.json file
v1.1.10 (January 12, 2016)
- Fix yo install version
v1.0.0 (October 20, 2015)
Initial Backbone.js skeleton
Features:
- Bootstrap
- Jquery
- Sass
- Lodash
- Jade templating
- JSHint code chech
- Grunt tasks