Manage your app with Laravel+grunt+bower

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

1. Using Laravel can better take advantage of the latest version of PHP, excluding some historical issues.
2. 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.
3. 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.
4. 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

1. How I use Bower and Grunt with my Laravel projects
2. Using Grunt + Bower with Laravel and Bootstrap

Manage your app with Laravel+grunt+bower