GithubHelp home page GithubHelp logo

grunt-boreless-boilerplate's Introduction

BoReLESS - Grunt Bower + RequireJS + LESS Boilerplate

Build Status

This project is deprecated (no longer actively maintained) in favor or our Gulp BoBrSASS boilerplate. If you still want to stick with Grunt, consider some of the Yeoman generators.

This is a boilerplate to ease builds of web projects utilising good build tools and related utilities, such as Grunt, RequireJS, LESS and Karma.

Unlike Yeoman & other tools, this is a pure Grunt script with full transparency on how the build is handled; there is no magic.

Installation

If you don't already have node.js 0.8.x or later, fetch it from nodejs.org. In addition we need a few dependencies you may have.

> npm install -g bower grunt-cli

Installing the project itself is easy. Both build system dependencies and app dependencies are triggered by

> npm install

It actually performs a release build, too (to verify that everything is ok).

Building

To trigger debug build

> grunt debug

To trigger debug build and watch for changes

> grunt debug watch

To trigger release build

> grunt release

Running the Service

Most likely the normal grunt server will fail (yet there is no big reason why it should). The system comes with bundled node/express stack, because that is likely you would use for development use, anyway. Start the server in debug mode by

> npm start

Note that if you have run grunt debug in another window, it should be rebuilding your changed pages in the background.

To test the service in release mode, use

> grunt release
> NODE_ENV=production node server/server.js

You most likely want to re-run the tests and reload the files automatically. Start the debug server elsewhere, then run

> grunt monitor

And the build will start to watch the changes in your project, triggering reload when needed.

Extending & Hacking

Project layout

App

src/             The client-side source code
src/index.html   The HTML entry point, stub page
src/app          Application source code
src/app/main.js  The app JS entry point
src/components   The 3rd party JS dependencies
src/css          The CSS templates

Build System

grunt.js            The Grunt build configuration
components.json     The Bower components
.bowerrc            The Bower directory overrides
package.json        The build level dependencies

Server Stub

server/server.js    The stub static file server
server/package.json The server specific dependencies

Build Results

staging/            Results of the build step
dist/               Minified & optimised version

Using BoReLESS as an Upstream

Upgrading the boilerplate in your project may be tedious work. Once BoReLESS directory structure becomes stable (it might be already, but no guarantees!), you can use it directly as an upstream (here with a name 'boreless').

> git remote add -f boreless [email protected]:SC5/grunt-boreless-boilerplate.git

Now synchronizing with BoReLESS becomes easier:

> git pull boreless master

It is possible to use BoReLESS as a subtree, too:

> git subtree add --prefix client --squash [email protected]:SC5/grunt-boreless-boilerplate.git master --squash
> git remote add -f boreless [email protected]:SC5/grunt-boreless-boilerplate.git
> git fetch boreless master

The example pulls BoReLESS master branch into 'client' subdirectory. The key here is to use '--prefix client' to keep the boilerplate in its own subdirectory. Later on, sync by:

> git subtree pull --prefix client boreless master

TODO

  • Use some sensible app boilerplate (or fetch it from another project)
  • Add Cordova builds (or put it its own branch or an example)
  • Add templating language compilation into JS RequireJS modules
  • Add some examples & documentation

Release History

  • 2013/01/16 - v0.1.0 - Initial release
  • 2013/03/10 - v0.2.0 - Update to Grunt 0.4.0
  • 2013/10/12 - v0.3.0 - Add Karma based test automation

License

Copyright (c) 2013 SC5, licensed for users and contributors under MIT license. https://github.com/sc5/grunt-boreless-boilerplate/blob/master/LICENSE-MIT

grunt-boreless-boilerplate's People

Contributors

apaatsio avatar artoliukkonen avatar juhamust avatar laurisvan avatar nikcorg avatar rasjani avatar varya avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

grunt-boreless-boilerplate's Issues

Automatically compose a sprite sheet on build

Maintaining a sprite sheet should be a job that is better suited to a robot or human. I already have one project ongoing to do this.

Contributing the same here should be no big task of its own. We only need to make it easily removable.

Minify images

Grunt has several plugins for minifying PNG, JPEG and SVG images. Shall we go for it in the boilerplate?

Debug version should need no 'build'

When doing a rapid build-fix cycle, triggering debug build for every change takes some ~10 seconds to execute. In addition, grunt seems to leak file handles, and at some point the developer will get a warning of Grunt failing because of this.

AFAIK the only reason we need this currently is for minifying the LESS files. Since we don't want to mess up the source directory with the compilation output, we end up copying pretty much all the results to a build directory. LESS compilation could be done in client-side. This would be conceptually compatible with what we already do with RequireJS - the build is done on browser side.

Opinions? Should we assume full "browser-side build" in debug mode?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.