https://github.com/antonioribeiro/laravel-grunt
Example of using Grunt.js with Laravel. Twitter Bower is along for the ride.
https://github.com/antonioribeiro/laravel-grunt
Last synced: 7 months ago
JSON representation
Example of using Grunt.js with Laravel. Twitter Bower is along for the ride.
- Host: GitHub
- URL: https://github.com/antonioribeiro/laravel-grunt
- Owner: antonioribeiro
- Created: 2013-01-29T00:49:59.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-01-23T19:37:10.000Z (over 12 years ago)
- Last Synced: 2025-01-06T01:43:46.132Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 161 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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
└── server.php
public/
├── css
│ ├── all.css
│ └── all.min.css
└── js
├── all.js
└── all.min.css
###Put these two folders 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/');
}
}
### Twitter Bower
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
### 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.