Git Product home page Git Product logo

mithriltestapp's Introduction

mithril-boilerplate

Well structured boilerplate code for quickly starting new Mithril.js projects

Quick start

Make sure you have node and npm installed. Then

npm install -g bower gulp http-server

git clone https://github.com/ng-vu/mithril-boilerplate.git
cd mithril-boilerplate

npm install
bower install
gulp compile

http-server build/public

Running above commands compile source and put final code in these directories:

  • build for development
  • bin for production

You may run the application by either of these commands:

  • http-server build/public
  • http-server bin/public

To automatically build project whenever a source file changes:

gulp build watch

Features

  • Gulpfile
  • Bower
  • LESS & Bootstrap (easy to swap with your favourite tools)
  • JSX (write HTML tags inside .jsx file)
  • INCLUDE() JavaScript files
  • Client side modules wrapped in CommonJs
  • Watch with cache (only rebuild changed files)
  • LiveReload
  • Concat and minify stylesheets and scripts for production
  • Unit testing will be supported soon

Commands

gulp clean

Clean all files in build and bin directory.

gulp build

Build the project and put files in build. You may run the application by:

gulp build
http-server build/public

gulp compile

Build the project and put files in bin. All stylesheets are concatenated to main-***.css and all scripts are combined to main-***.css with *** is content hash. You may run the application by:

gulp compile
http-server bin/public

gulp watch

Automatically build the project whenever a source file changes. It caches source files and only runs tasks on changed files. You should use watch together with build:

gulp build watch

Running a specific task

These tasks describe specific steps in building process:

  • gulp buildAppStyles
  • gulp buildVendorStyles
  • gulp buildAppScriptsInject
  • gulp buildAppScriptsMsx
  • gulp buildAppScripts
  • gulp buildVendorScripts
  • gulp buildAppAssets
  • gulp buildVendorAssets
  • gulp buildIndexHtml
  • gulp buildRootFiles
  • gulp compileStyles
  • gulp compileScripts
  • gulp compileAssets
  • gulp compileRootFiles
  • gulp compileIndexHtml

// TODO

  • Unit testing
  • Sample project
  • Coffee script

Note

  • Source files must be .jsx, not .js.

    You should always write source in .jsx files. All .js files will be ignored by default.

    JSX is basically JavaScript enhanced with HTML tags. Mithril JSX compiler is based on React JSX. Read more: Mithril Tools, React JSX

  • Each .jsx file inside src/app without _ prefix will become a module.

    For example, src/app/app.jsx is compiled to module app and src/app/home/home.jsx to home/home.

    Files with _ prefix are used to be included into other files and will not become a module.

  • A module can be required by require(<module-id>).

    For example, require('app') or require('home/home').

  • Main module is main (src/app/main.jsx).

    Note that if a module is not required (directly or indirectly) by main, its code will not run.

  • Include file by INCLUDE('<file-id>').

    For example INCLUDE('home/view') will replace the INCLUDE call with whole content of src/app/home/_home.view.jsx. Note that home/_home.view.jsx will be translated to home/home.view.

mithriltestapp's People

Contributors

natrium431 avatar

Watchers

James Cloos avatar  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.