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: ./laravelGoto ./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`
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.