Source: http://yansu.org/2014/03/10/grunt-bower-and-laravel.html
Why are you so selective?
Now open source, from the back-end of the various libraries, to the front-end of the jquery plug-in, front-end framework, and so on, more and more excellent components can be chosen by us to apply in existing projects. As open-source components are updated iteratively, their dependence on each other is becoming more complex. The old frame is always difficult to adapt to new changes, even if the old frame is changed for the sake of new features, it will be slightly farfetched. Then there will be new frameworks and tools, which are highlighted at this time.
The direction of each project starts is important, and a good start can be avoided after a variety of problems. The following three tools are a good starting point for existing application development.
Laravel
Laravel is a very new PHP framework, drawing on the excellent features of many predecessors, taking PHP5 as the starting point, introduced the composer as a package management tool, called the PHP framework created by web artists.
Grunt
The automated JavaScript-based build tool allows you to automate repetitive tasks such as compression (Minification), compilation, unit testing, linting, and more.
Bower
The Web front-end development of the package management tools, to solve the dependencies between the front-end framework, easy to modularization and reuse.
Advantage
- Using Laravel can better take advantage of the latest version of PHP, excluding some historical issues.
- The use of composer can greatly reduce the number of "wheels", excellent packages can go to packagist find, these packages are almost all using GitHub to host, using GitHub's issue and request can help improve the quality of the package.
- Bower can help unify the management of open-source front-end libraries, such as Bootstrap and jquery, as well as the packages that are hosted on GitHub.
- Grunt helps to glue the open source components of the front and back end, automating the merging of compilation and compression.
Installation and Usage Prerequisites
Some components that need to be installed in advance are not mentioned here, please Google yourself.
- Composer
- Node & NPM
- Grunt
- Bower
Laravel
With composer it is easy to install a laravel project
composer create-project laravel/laravel myproject
After the installation is complete myproject
, the Laravel frame structure is generated in the directory, and the entry file is in public
. In the myproject
root directory, there is a composer.json
file that looks like this:
{ "name": "laravel/laravel", "description": "The Laravel Framework.", "keywords": ["framework", "laravel"], "license": "MIT", "require": { "laravel/framework": "4.1.*" }, //...}
This file can control some of the dependencies of the project, and we need some components to require
add them directly, which composer
will help us to find the dependent packages required for this component.
Next, in order to install the front-end framework, let's create a few common directories and, public
under, create a similar directory
.|-- assets| |-- css| |-- fonts| `-- js|-- favicon.ico|-- index.php|-- packages`-- robots.txt
The only assets
directory I've created here is my new one.
Bower
After the backend framework is ready, you can install the front-end framework, for example Bootstrap
. The Bower
installation of the front-end library is its entire project, not the individual files we need, so we can say that they first in one place, then use Grunt
to unify processing.
First configure the installation path, the myproject
configuration file in the root directory .bowerrc
is
{ "directory": "public/assets/bower"}
This file tells Bower to install the downloaded package to the public/assets/bower
next.
Then create a configuration file in the root directory bower
bower.json
for
{ "name": "myproject"}
Then add the front end library
bower install bootstrap -S
This command will use the configuration file to manage the entire library dependency, and at this time look at the configuration file, Bower has helped us to automatically install the Bootstrap
dependent package – jQuery
while modifying the configuration file
{ "name": "myproject", "dependencies": { "bootstrap": "~3.1.1" }}
After looking at the target directory, public/assets
a bower directory is generated, which contains the Bootstrap
and jQuery
.
Grunt
Based on the above steps, we can easily set up the back-end framework and the front-end framework, but the front-end framework in use when the direct use bower
of the file is not very convenient, but also may involve some of the library merge compression and other steps. All these questions can be given Grunt
to do.
Start myproject
by npm init
initializing a configuration file in the root directory. Follow the prompts step by step, and the resulting configuration file package.json
should look like this:
{ "name": "myproject", "version": "0.0.1", "description": "", "main": "Gruntfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}
There are different places not to worry about, although the changes can be.
Then we need to install some grunt plug-ins to help us do the required functions better.
npm install grunt --save-devnpm install grunt-contrib-concat --save-devnpm install grunt-contrib-less --save-devnpm install grunt-contrib-uglify --save-devnpm install grunt-contrib-watch --save-devnpm install grunt-contrib-copy --save-devnpm install grunt-contrib-cssmin --save-dev
Each of the plugins here will be described in the configuration below. The option in the above command --save-dev
is to put the installed packages into the profile dependencies for later installation. Here is the post-installation configuration file:
{ "name": "myproject", "version": "0.0.1", "description": "", "main": "Gruntfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "grunt": "~0.4.3", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-less": "~0.10.0", "grunt-contrib-uglify": "~0.4.0", "grunt-contrib-watch": "~0.5.3", "grunt-contrib-cssmin": "~0.9.0" "grunt-contrib-copy": "~0.5.0" }}
Note that after the installation there node_modules
is a directory, this is the node project depends on the location of the package, we generally do local file merging and compression, so you can keep this package locally. In addition bower
, for the generated directory, Grunt
after processing can also not be uploaded to the formal environment. So modify the .gitignore
file to exclude these two folders:
/bootstrap/compiled.php/vendorcomposer.pharcomposer.lock.env.local.php.env.php.DS_StoreThumbs.db/public/assets/bower/node_modules
The next Grunt
configuration item is written, and I'll add a comment to the configuration to help understand it. Remember the package.json
entry file in the configuration file we just created? This file does not yet exist, so we need to manually create the file created below, with the following myproject
Gruntfile.js
content:
Module.exports = function (grunt) {//config item grunt.initconfig ({//concat plug-in configuration, used to merge multiple files Concat: {//delimiter between files op tions: {separator: '; ',},//app is a task name, you can name the app: {//merge items to be made src: ['./pub Lic/assets/bower/jquery/dist/jquery.js ', './public/assets/bower/bootstrap/dist/js/bootstrap.js ',], Merge after placement in dest: './public/assets/js/javascript.js ',},},//css merge compression cssmin: {//Task Name app: { SRC: ['./public/assets/bower/bootstrap/dist/css/bootstrap.css ', './public/assets/css/base.css ' ], dest: './public/assets/css/stylesheet.css '},//js compression uglify: {options: {Mang Le:false//Whether the variable is mixed, if the demand is set to true}, the app: {files: {'./public/assets/js/javascript.js ': './public /assets/js/javascript.js ',}},},//Move file copy: {app: {files: [{E Xpand:true,Flatten:true, CWD: './public/assets/bower/bootstrap/fonts/', src: [' * * '], dest: './publ Ic/assets/fonts/', filter: ' Isfile '}, '}},//listener file changes, if the file changes, will be re-performed task watch: { App: {files: ['./public/assets/bower/jquery/dist/jquery.js ', './public/assets/bower/bootstr Ap/dist/js/bootstrap.js ', './public/assets/bower/bootstrap/dist/css/bootstrap.css ',],//File changes after execution What tasks: [' Concat:app ', ' Uglify:app ', ' Cssmin:app ', ' Copy:app '], options: {livereload:true } }, } }); Import the required plug-in grunt.loadnpmtasks (' Grunt-contrib-concat '); Grunt.loadnpmtasks (' Grunt-contrib-watch '); Grunt.loadnpmtasks (' grunt-contrib-less '); Grunt.loadnpmtasks (' grunt-contrib-uglify '); Grunt.loadnpmtasks (' grunt-contrib-copy '); Grunt.loadnpmtasks (' grunt-contrib-cssmin '); Register two tasks Grunt.registertask (' Watch ', [' Watch ']); Grunt.registertask (' Default ', [' Concat:apP ', ' Uglify:app ', ' Cssmin:app ', ' Copy:app ']);
We see that we finally registered two tasks, which can be executed from the terminal, for example:
grunt watch
You can turn on file snooping and perform the tasks set in watch when the file changes.
If executed directly grunt
, the task that is default
set in is executed. We can also specify the execution of a single task, such as
grunt copy:app
The above will only bootstrap/fonts
copy the files in public/assets/fonts
.
For these plugins, you can find them here, as well as use them in detail.
Summarize
Everyone has their own preferences, my this configuration may only throw a brick, I hope there is a better way to share. Finally, summing up the Three Musketeers:
- Laravel leverages the latest PHP features and introduces composer package management to address dependencies between backend libraries
- Bower Help install and resolve dependencies for front-end frameworks and libraries
- Grunt helps to glue open source components to the front and back end, and to perform repetitive work such as merging and compression.
The following two articles of reference each have their own features, if you want to know what you can click on the link to see.
I built the directory structure in this blog on GitHub and wanted to quickly build a project that could be used, with just the following:
git clone https://github.com/suyan/Laravel-Bower-Grunt.gitcomposer installbower updatenpm installgrunt
Enjoy it!
Reference
- How I use Bower and Grunt with my Laravel projects
- Using Grunt + Bower with Laravel and Bootstrap
Manage your app with Laravel+grunt+bower