This is a small guide for myself to start up a KnockoutJS app with Browserify, Less, ExpressJS, Gulp, and Nodemon
on a Mac.

Project file structure

/
	- server.js
    - gulpfile.js
    - bower.json
    - package.json
    
/ dev
	/ less
    	- app.less
    	/ var
    	/ mixin
        / function
        / base
        / component
        / util
        
    / js
    	- bootstrap.js
        / ko
        / event
        / lib
        / route
        / model
        / view
        
/ public
	- index.html
	/ stylesheets
    	- app.css
    / javascripts
    	- app.js

Installing tools

Install NodeJS and others once

You may skip this if you have done this.

It's really great and small for the tasks you're going to love.
Head to: http://nodejs.org/
Make sure you install with sudo command

Also install GulpJS and Bower.IO

npm install -g gulp
npm install -g bower

With the flag -g you installed it globally and now you can access it from anywhere on your system.

Gulp - The streaming build system

Bower - A package manager for the web

What is Gulp

Official definition: Gulp: the streaming build system

Gulp is basically a tool that automates your frontend tasks, but it goes beyond that if you want it. It can upload your changed files to CDN networks, copy files to production environment, optimize images and more. There are inumerous plugins for all these functions and if you can't find one that suits your needs, you can always write your own.

Initialize a project

To initialize a new Gulp project from your project's directory run

npm init

and follow the instructions. The command will create your package.json file, necessary for any npm project.

  • name: app_ko
  • version: 0.0.0
  • description: KnockoutJS app with Browserify + Gulp
  • entry point: gulpfile.js
  • test command: Enter
  • git repository: https://github.com/HariantoAtWork/ko-browserify-gulp.git
  • keywords: Knockout, Gulp, LESS, mdstn.com
  • author: Harianto van Insulinde
  • license: CC
  • Is this ok? (yes): Enter
{
  "name": "vue_app",
  "version": "1.0.0",
  "description": "Harianto van Insulinde's Personal Website",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "ssh://git@bitbucket.org/HariantoAtWork/vue.mdstn.com.git"
  },
  "keywords": [
    "Knockout",
    "gulp",
    "LESS",
    "browserify"
  ],
  "author": "Harianto van Insulinde",
  "license": "CC"
}

Finally, let's install gulp and some plugins as dependencies. We'll use:

  • "gulp-less": For LESS compilation
  • "gulp-autoprefixer": Prefix your CSS attributes for browsers
  • "gulp-minify-css": For minifying CSS
  • "gulp-uglify": For javascript minification
  • "gulp-rename": For renaming files

Also this tools

  • "stream-combiner2"
  • "browserify"
  • "stringify"
  • "vinyl-source-stream"
  • "gulp-nodemon"
  • "gulp-livereload"
  • "node-notifier"

In your terminal run:

npm install --save-dev gulp  
npm install --save-dev gulp-less
npm install --save-dev gulp-autoprefixer
npm install --save-dev gulp-minify-css 
npm install --save-dev gulp-rename

npm install --save-dev stream-combiner2
npm install --save-dev browserify
npm install --save-dev stringify
npm install --save-dev vinyl-source-stream

npm install --save-dev gulp-nodemon
npm install --save-dev gulp-livereload
npm install --save-dev node-notifier

Or use this single command:

npm install --save-dev gulp gulp-less gulp-autoprefixer gulp-minify-css gulp-rename stream-combiner2 browserify stringify vinyl-source-stream gulp-nodemon gulp-livereload node-notifier

If you already install this dependency before, add this extra flag to speed up things:

--cache-min 999999.

That will install the dependencies and because we defined the --save-dev flag it will add them to the package.json file.

Bower

Bower - A package manager for the web

Default path Bower dependencies installation

We leave this as default: bower_components

You can set different path, but you need to create a new file .bowerrc

{
  "directory": "dev/bower_vendor"
}

Initialize Bower

To initialize a new Bower file from your project's directory run

bower init

and follow the instructions. The command will create your bower.json file, necessary for any Front End goodies.

  • name: app_ko
  • version: 0.0.0
  • description: KnockoutJS app with Browserify + Gulp
  • main file: public\index.html
  • test command: Enter
  • git repository: https://github.com/HariantoAtWork/ko-browserify-gulp.git
  • keywords: knockout, gulp, less, mdstn.com
  • author: Harianto van Insulinde
  • license: CC
  • homepage: http://mdstn.com
  • set currently installed components as dependencies? (Y/n) : Enter
  • add commonly ignored files to ignore list? (Y/n): Enter
  • would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N): y
  • Looks good? (Y/n): Enter
{
  name: 'app_ko',
  version: '0.0.0',
  authors: [
    'Harianto van Insulinde <bitbucket@oib.mdstn.com>'
  ],
  description: 'KnockoutJS app with Browserify + Gulp',
  main: 'public\index.html',
  keywords: [
    'knockout',
    'gulp',
    'less',
    'mdstn.com'
  ],
  license: 'CC',
  homepage: 'mdstn.com',
  private: true,
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'test',
    'tests'
  ]
}

The perfect workflow for me is getting Javascript libraries from npm (Node Package Manager) for example: npm install --save jquery, than from Bower. That way you don't need to set up browserify shim.

Main goal is that you don't need much/none to use <script/> tag in your markup. Just one app.ko.js is enough, but sometimes your favorite javascript library doesn't come with npm install. I‘ll tell more later how to use shim in your gulpfile.js workflow.

Interesting article about using shim: shim

Frontend dependencies

For this tutorial we’ll use jQuery from Bower

Remember we made bower.json, let's get to the terminal and follow this command in your working project.

bower install --save jquery

The --save flag will save the dependency in the bower.json file and later you can just run bower install to replicate the exact front-end dependencies of your project. If you're not one of those guys paranoid about github just dying one day and our poor selves left without our packages, you can freely add bower_components to your .gitignore file and just track bower.json.

To look for packages if they exist go to: Bower.io Search

Here's how our bower components folder turned out (only the parts that concern us)

/ bower_components
	/ jquery
    	/ dist
        	- jquery.js
            - jquery.min.js