Using Grunt, Laravel, Bootstrap and LESS

I made a tutorial that fits my MAMP vhosts installation.
Using Laravel Grunt Bootstrap and Less

My vhosts directory structure looks like this

/ vhosts
  / domainname
    / httpdocs
  / subdomains
    / subdomainname
      / httpdocs

My Laravel 4 installation would look like this inside domain directory

/ vhosts
  / example.com
    / httpdocs (alias -> laravel/public)
    / laravel
    / node_modules
    - README.md
    - ..
    - ..
    - ..
    - etc

I have linked httpdocs -> laravel/public
Your installation may differ, if it does
you may remove httpdocs linkagefile and replace with something else
and some changes in Gruntfile.js paths
Read Linux documenation for the command: ln -nsf <sourcepath> <destpath>

After cloning this repository

You may need to install Node.js on your computer if you don't have one.
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 Grunt CLI and Bower
npm install -g grunt-cli
npm install -g bower

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

If you’re new to Laravel, you may need to install composer.phar.
Head to: Composer - download

I made a script first-install-dependencies.sh that run these tasks:

• Install Node Dependencies
• Install Bower Dependencies
• Install Laravel Dependencies
• Re-generate Laravel key

Run this on your terminal: . first-install-dependencies.sh
You may skip following instructions below
and head to: What to do next

Install Node Dependencies

Grunt is awesome Javascript Task Runner that we're going to install.
If there isn't node_modules directory then you can run a command that reads 'devDependencies' from package.json
The modules will be save at node_modules directory in the root:
npm install

There is a time you want to install some plugins as dependencies.
For example "grunt-contrib-watch": To watch files for changes.

Run this in terminal:
npm install grunt-contrib-watch --save-dev

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

Install Bower Dependencies

I have .bowerrc included that sets the bower installations to
./httpdocs/assets/vendor
If bower.json file exist in the root, you can install the dependencies by following command in the terminal:
bower install

This will install

• bootstrap
• jquery-autosize
• jquery.lazyload
• mixitup
• swipebox
• nivo-slider
• knockoutjs
• knockout-mapping
• less.js
• font-awesome

If you want to add a dependency such as font-awesome type with -S flag.
That will also append the dependency on the bower.json file automatically:
bower install font-awesome -S

Install Laravel Dependencies

Make sure you update Laravel's dependencies in this directory:
./laravel

Goto ./laravel directory and run a command:
composer update

Re-generate Laravel key

Since you’ve clone this repository and downloaded all needed dependencies with Laravel updates you can use php artisan command to generate a key for Laravel
./laravel/app/config/app.php

Go to ./laravel directory and run the command in the terminal: php artisan key:generate

What to do next?

• You may edit .gitignore since I’ve exluded Grunts generated output files
• You may include frontend.css/min.js, backend.css/min.js or sandbox.min.js in your html
• You may change Gruntfile.js and look for paths
• You may change Gruntfile.js and look for sandbox paths, Bower dependencies may changed paths

Sources

Node.js
Node Package Modules
Bower - A package manager for the web
Grunt - The JavaScript Task Runner
Composer - Dependency Manager for PHP
Laravel 4 Docs

Other things

I’m reading the book “The Smashing Book #4 - New perspective web design” and it re-think about my workflow and managing my building blocks for my new projects with Bootstrap LessCSS Laravel and Grunt. Still I need to work on Git's workflow what in the real world projects is like going to be.