Giter VIP home page Giter VIP logo

angular-brunch-seed-livescript's Introduction

angular-brunch-seed-livescript

A started project for AngularJS using Brunch.io wiht LiveScript

AngularJS + Brunch + LiveScript

Features:

  • LiveScript / Sass / SCSS / Stylus automatically compiled on save
  • auto-reload during development saves you from manually refreshing the page
  • Javascript / CSS minification for production
  • testacular integration for unit tests
  • Bootstrap integration with themes.

How to use angular-brunch-seed-livescript

  • git clone https://github.com/clkao/angular-brunch-seed-livescript.git to clone the angular-brunch-seed-livescript repository
  • cd angular-brunch-seed-livescript
  • ./scripts/init.sh to install node packages

or if you have Brunch installed run:

brunch new myapp --skeleton https://github.com/clkao/angular-brunch-seed-livescript

Running the app during development

  • ./scripts/server.sh to serve using Brunch

Then navigate your browser to http://localhost:3333

Running the app in production

  • ./scripts/production.sh to minify javascript and css files.

Running unit tests

Notes:

  • If you would like to write your test in livescript run ./scripts/compile-tests.sh in a seperate window.
  • Testacular will run tests on save. To insure that changes are saved be sure to have ./script/server.sh or ./script/development.sh running in the console.
  • If you are on OS X you set the browsers that you would like to target in the /test/testacular_conf.js file E.g. browser = ["ChromeCanary", "Firefox"]

End to end testing

WIP

Common issues

EMFILE error

  • EMFILE means there're too many open files. Brunch watches all your project files and it's usually a pretty big number. You can fix this error with setting max opened file count to bigger number with command ulimit -n (10000 should be enough).

The compelete Brunch FAQ

Receiving updates from upstream

When we upgrade angular-seed's repo with newer angular or testing library code, you can just fetch the changes and merge them into your project with git.

git pull origin master

Directory Layout

_public/                  --> Contains generated file for servering the app
                              These files should not be edited directly
app/                      --> all of the files to be used in production
  app/                    --> base directory for app
    controllers.ls        --> application controllers
    directives.ls         --> custom angular directives
    filters.ls            --> custom angular filters
    services.ls           --> custom angular services
  assets                  --> a place for static assets. These files will be copied to
                              the public directory un-modified.
    font/                 --> [fontawesome](http://fortawesome.github.com/Font-Awesome/) rendering icons
      fontawesome-webfont.*
    img/                  --> image files
    partials/             --> angular view partials (partial html templates)
      nav.html
      partial1.html
      partial2.html
    index.html            --> app layout file (the main html template file of the app)

  styles/                 --> all custom styles. Acceptable files types inculde:
                              less, sass, scss and stylus
    themes/               --> a place for custom themes
      custom/             --> starter theme **NOTE the underscore (_). Files begining with an
                              underscore will not automatically be compiled, they must be imported.
        _override.less    --> styles that should beloaded after bootstrap.
        _variables.less   --> bootstrap variables to be used during the compilation process
    app.less              --> a file for importing styles.
  app.ls                  --> application definition and routes.
  init.ls                 --> application bootstrap

node_modules              --> NodeJS modules

scripts/                  --> handy shell scripts
  compile-tests.sh        --> compiles livescript test to javascript
  development.sh          --> compiles files and watches for changes
  init.sh                 --> installs node modules
  production.sh           --> compiles and compresses files for production use
  server.sh               --> runs a development server at `http://localhost:3333`
  test.sh                 --> runs all unit tests

test/                     --> test source files and libraries
  e2e/                    -->
    scenarios.js          --> end-to-end specs **NOT WORKING YET**
  unit/
    app/
      controllers.spec.js --> specs for controllers
      directives.spec.js  --> specs for directives
      filters.spec.js     --> specs for filters
      services.spec.js    --> specs for services
  vendor/
    angular/              --> angular testing libraries
      angular-mocks.js    --> mocks that replace certain angular services in tests

vendor/
  scripts/                --> angular and 3rd party javascript libraries
    angular/                  files are compiled to `vendor.js`
      angular.js          --> the latest angular js
      angular-*.js        --> angular add-on modules
      version.txt         --> version number
    bootstrap/            --> for responsive layout
      bootstrap-collapse.js
    console-helper.js     --> makes it safe to do `console.log()` always
    jquery-1.7.2.js       --> for use with bootstrap-collapse
  styles/                 --> sapling / sapling themes and 3 party CSS
    bootstrap/            --> boostrap files - **NOTE** the underscore prevents the
      _*.less                 files from automatically being added to application.css
    sapling               --> extends boostrap
      _*.less
    themes                --> themes to extend Bootstrap
      default             --> the default bootstrap theme
        _overrides.less
        _variables.less
      sapling             --> supplemental theme
        _overrides.less
        _variables.less
      smokey              --> supplemental theme
        _overrides.less
        _variables.less

Contact

Coming soon...

For more information on angular please check out http://sapling.scotchmedia.com/

angular-brunch-seed-livescript's People

Contributors

clkao avatar gkz avatar kylefinley avatar paulmillr avatar vendethiel avatar

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.