Example of using Grunt.js with Laravel. Twitter Bower is along for the ride.
CSS JavaScript PHP Other
Switch branches/tags
Nothing to show
Latest commit fe76127 Apr 28, 2014 @johnnygreen Update README.md
Permalink
Failed to load latest commit information.
assets
tasks
.gitignore
README.md

README.md

Update: This is old. Back when I first released this example Bower and Grunt were not so intertwined as they are today. Grunt was extremely new with no examples on the net of how to use it in a PHP MVC framework and the plugins that did exist had no troubleshooting or support docs. Laravel was still on version 3 and did not have a 'serve' command like it does now in version 4. I suppose it could still be useful to some people though! Enjoy!

Laravel 3 + Grunt.js + Bower

Love that yeoman just came out, but it was a bit too opinionated for my workflow. As yeoman uses bower and grunt, here is an example of how to use those two packages with Laravel to output the all wonderful single css and single js file. This example uses Coffee-Script and SASS with simple mustache templates attached to a global, JST.

###Folder Structure There are some junk files in there… they can be ignored / deleted.

application/
├── assets
│   ├── build
│   │   ├── README.md
│   │   ├── grunt.js
│   │   └── package.json
│   ├── scripts
│   │   ├── app.coffee
│   │   ├── amd
│   │   ├── build
│   │   │   ├── amd.coffee
│   │   │   ├── amd.js
│   │   │   └── app.js
│   │   ├── lib
│   │   │   └── InfiniteSlider.js
│   │   └── vendor
│   │       ├── component.json
│   │       └── fitvids.js
│   └── styles
│       ├── app.scss
│       ├── build
│       │   └── app.css
│       ├── components
│       │   ├── _common.scss
│       │   ├── _fonts.scss
│       │   ├── _footer.scss
│       │   ├── _header.scss
│       │   ├── _mixins.scss
│       │   └── _variables.scss
│       ├── config.rb
│       ├── pages
│       │   ├── _home.scss
│       │   └── _interview.scss
│       └── vendor
│           ├── _grid.scss
│           └── reset.css
└── tasks
    ├── assets.php
    ├── bower.php
    └── server.php

public/
├── css
│   ├── all.css
│   └── all.min.css
└── js
    ├── all.js
    └── all.min.css

###Put the assets folder and the new tasks in your Laravel application folder

I assume you're on OSX with PHP 5.4… and you have node and npm installed. Node and NPM can easily be installed via nodejs.org. For PHP and other packages I use homebrew with the josegonzalez and homebrew-php taps added.

FYI - I have an alias for alias artisan="php artisan"

artisan assets command

$ artisan assets

 Assets Pipeline for Laravel

  assets                 - this menu
  assets:setup [options] - runs the setup process
  assets:build           - builds the assets
  assets:watch           - starts the watch process

  options 
  -ns                    - install dependencies without using sudo 

Here is the code behind these tasks...

public function setup($args = array())
{
   $sudo = (isset($args[0]) && trim($args[0]) === '-ns') ? '' : 'sudo';

   passthru($sudo . ' gem install compass');
   passthru($sudo . ' gem install terminal-notifier');
   passthru($sudo . ' npm install grunt -g');
   passthru($sudo . ' npm install bower -g');
   passthru('cd application/assets/build/ && ' . $sudo . ' npm install');
   passthru('cd application/assets/scripts/vendor/ && bower install');
}

public function build()
{
   passthru('cd application/assets/build/ && grunt');
}

public function watch()
{
   passthru('cd application/assets/build/ && grunt watch');
}

artisan server command

$ artisan server 0.0.0.0 80
class Server_Task
{
  /**
   *  artisan server ip_address/hostname port
   *
   *  i.e. 
   *  artisan server 0.0.0.0 80
   *  artisan server my.google.dev 3000
   *
   *  for hostnames add the name to /etc/hosts
   */
	public function run($args = array())
	{
	  $hostname = isset($args[0]) ? $args[0] : '0.0.0.0';
	  $port = isset($args[1]) ? $args[1] : '80';
	  $sudo = $port < 1024 ? 'sudo ' : '';
  	  passthru($sudo . 'php -S ' . $hostname . ':' . $port . ' -t public/');
	}
}

artisan bower command

To use bower to manage your js dependencies, it's installed in assets/scripts/vendor

cd assets/scripts/vendor
bower install // will install what's in the component.json
bower install jquery --save // example of installing new js dep

Or use the convenience method

artisan bower [options] = cd assets/scripts/vendor && bower [options]

ie
artisan bower install
artisan bower install jquery --save
artisan bower uninstall jquery --save
artisan bower search jquery
artisan bower info jquery
...you get the drift

Important Details

After installing something with bower, of course then you will need to add that file to the grunt.js file, same goes with CSS files. As for SCSS, just include each new file in the app.scss and use an _ underscore for files so they will not be included by compass when compiling.

Modify the grunt.js file to your liking. Add / Remove tasks, etc. Best get use to that file, it's important!

Didn't really touch on amd, but it's pretty straight forward… put amd in the assets/scripts/amd … install require.js with bower, include require.js in the grunt.js file and it should include all the amd files in the build WITHOUT having to add them to the grunt file one by one.

After running artisan assets:build or watch … the files will be compiled into the public folder. In your main layout, just include min or non-min file.

If you have questions feel free to open an issue.