Project Example with Browserify - lagoasoft-lucasschmidt/project_cartero GitHub Wiki

Example of how a project can look like

This example can be found in /example/example2browserify in this repository.

1. Views

• /views/layout.jade

You can have a base layout, to be used by all your views, and here, you could load basic libraries that will be used by all your views. By using ##cartero_requires, you are saying which libraries will be loaded for this view, and for all views that extend this layout.

In this case, since we will use browserify to load jquery, ##cartero_requires wont be used.

doctype html
head
| !{cartero_css}
| !{cartero_js}
body
	block content

A important thing to notice is the local variables cartero_css and cartero_js. They are generated by express-hook. If you use express, based on a cartero.json, you can inject the correct dependencies automatically for your views.

• /views/clock/clock.jade, /views/clock/clock.js, /views/clock/clock.css

In this view, you can notice that we are not using any directives to set up any hierarchy. Code will be loaded by usage of browserify. clock.js code contains a require statement, just like used in the server-side development.

We will use an Assets Processor to actually call browserify, so it can do its thing an generate a bundle.js file.

extends ../layout
block content
  .row
    .col-lg-12
      p Hello Clock World
      include table/redtable

var $ = require("jquery");

$(function(){
 alert("Hello World");
});

2. Gruntfile

In your Gruntfile, you will have a project_cartero task. You can define multiple configurations per environment, eg:

        project_cartero:
            dev:
                options:
                    templatesPath: path.resolve(__dirname, ".app/server/views")
                    librariesPath:  path.resolve(__dirname, ".app/client/library")
                    libraryFilesExtensions: /.*\.(coffee|js|css|less|jpg|jpeg|tiff|gif|png|bmp|swf|eot|svg|ttf|woff|jade)$/
                    publicFilesPath: path.resolve(__dirname, ".app/public")
                    librariesPublicRelativePath: ""
                    assetsProcessors: [
                        require('project-cartero/lib/component/processor/moveAssetsProcessor')
                        ,{task: "coffee", fileExt:"coffee", destExt:"js", clean:true}
                        ,{task: "browserify", fileExt:"js", destExt:"bundle.js", clean:true}
                        ,require('project-cartero/lib/component/processor/calculateAssetsProcessor')
                    ]
                    carteroFileDescriptorPath: __dirname
                    logLevel: "info"
            prod:
                options:
                    templatesPath: path.resolve(__dirname, ".app/server/views")
                    librariesPath:  path.resolve(__dirname, ".app/client/library")
                    libraryFilesExtensions: /.*\.(coffee|js|css|less|jpg|jpeg|tiff|gif|png|bmp|swf|eot|svg|ttf|woff|jade)$/
                    publicFilesPath: path.resolve(__dirname, ".app/public")
                    librariesPublicRelativePath: ""
                    assetsProcessors: [
                        require('project-cartero/lib/component/processor/moveAssetsProcessor')
                        ,{task: "cssmin", fileExt:"css", destExt:"css"}
                        ,{task: "coffee", fileExt:"coffee", destExt:"js", clean:true}
                        ,{task: "browserify", fileExt:"js", destExt:"bundle.js", clean:true}
                        ,{task: "uglify", fileExt:"js", destExt:"js"}
                        ,require('project-cartero/lib/component/processor/concatAssetsProcessor')
                        ,require('project-cartero/lib/component/processor/calculateAssetsProcessor')
                    ]
                    carteroFileDescriptorPath: __dirname
                    logLevel: "info"

If you notice, you must define where your templates are located, where your libraries are located, which files extensions should we consider, whats the folder where you want your output (publicFilesPath).

You can list multiple assets processors to process your files after they are detected. The description of your view/libraries are saved in a file named cartero.json*, thats why you must specify the directory you want to save this file. (This file will be necessary for the express-hook)

Notice that we have a MoveAssetsProcessor always there. For now, you must always explicitly include as the first one, if you want your code moved (it doesnt make sense for it to not be moved, since you dont want to transform your source files anyways).

4. Serve files using Express.js hook

express = require 'express'
projectCarteroMiddleware = require 'project-cartero/lib/express-hook'
path = require 'path'

app = express()
app.use '/', express.static(path.resolve(__dirname, '../public'))

app.set 'view engine', 'jade'
app.set('views', __dirname+'/views')

carteroJSONPath = path.resolve __dirname, "../..", "cartero.json"
app.use projectCarteroMiddleware(carteroJSONPath)

app.get "/", (req, res, next)->
  res.render "clock/clock"

app.listen 3000, ()-> console.log "Started app!!"