Laravel 5.1 uses Laravel Elixir to integrate and install Bootstrap

Laravel Elixir is a magic package for simplifying processing Gulp. For unfamiliar people, Gulp is a JavaScript task runner that allows you to automatically build tasks. It can be used to compile CSS, connect and minimize JavaScript, and more other tasks.

Gulp is designed to become a faster build tool by using node streams than previous build tools, while Laravel Elixir encapsulates Gulp and makes building easier.

The following is a common example: use Laravel Elixir to integrate Bootstrap in the Laravel project.

1. Install NPM dependencies

Bootstrap and Elixir are both node packages that can be installed through NPM (node package manager). If you open the default package. json, you can see the following content:

{
"Private": true,
"DevDependencies ":{
"Gulp": "^ 3.8.8"
},
"Dependencies ":{
"Laravel-elixir": "^ 3.0.0 ",
"Bootstrap-sass": "^ 3.0.0"
    }
}
Run npm install in the command line so that both packages and their dependencies will be installed. In fact, this process is similar to installing PHP dependencies using Composer. The principle is the same.

After npm install is executed, you will find that a node_modules folder is added under the Project root directory, which contains the two packages that have just been installed.

2. Bootstrap Sass

Now it is very easy to integrate Bootstrap in Laravel project. Open resources/assets/sass/app. scss and cancel the comments before the following line:

@ Import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap ";
Save the changes and run gulp. Then, all the Bootstrap style files you need will be generated.

3. Customize the Bootstrap style

If you do not like the default Bootstrap style, you can also rewrite the corresponding variables to customize it. For example, we will change the default Bootstrap font from Google Fonts to Lato.

Open resources/assets/sass/app. scss again, import the font, and modify the font:

@ Import url (https://fonts.googleapis.com/css? Family = Lato );
$ Font-family-sans-serif: 'lato', sans-serif;
@ Import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap ";

The working principle is to first import Lato fonts from Google, and then rewrite the existing font-family in Bootstrap. This works because Bootstrap uses Sass! Default:

If a variable is not assigned a value, you can add it! The default value is assigned to the variable at the end of the variable value. Of course, if the variable has been assigned a value, it cannot be assigned again.
To view the list of all variables, open this file:

Node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_ variables. scss

4. Use Browserify to introduce Bootstrap JavaScript

To introduce Bootstrap JavaScript, we have multiple options: use their CDN, manually download, or use Browserify.

Browserify allows you to package all dependencies in the browser through require ('modules.
We have installed Bootstrap through NPM. Next we can use browserify to import it to app. js. First, we need to install jQuery using NPM:

Npm install jquery -- save

Now, create the file resources/assets/js/app. js and add the following code to it:

Window. $ = window. jQuery = require ('jquery ');
Require ('bootstrap-sass ');
$ (Document). ready (function (){
Console. log ($. fn. tooltip. Constructor. VERSION );
});

Bootstrap wants jQuery to be global and introduce jQuery before all js, followed by Bootstrap JavaScript.

Now, edit gulpfile. js in the project Root Directory:

Elixir (function (mix ){
Mix. sass ('app. SCS ')
. Browserify ('app. Js ');
});

It's that simple, but that's why Elixir is amazing. Just add a section. browserify ('app. Js'), and everything is automatically processed. After running gulp again, Bootstrap JavaScript-related files are compiled to public/js/app. js.

Finally, introduce the corresponding Bootstrap style file and JavaScript file into the layout file. You can see 3.3.5 in the console of the browser.