[Laravel 5.2 Documentation] services--integrated front-end resources: Laravel Elixir

1. Introduction

Laravelelixir provides a clean and smooth set of APIs for defining basic gulp tasks for Laravel applications. Elixir supports some common CSS and JavaScript preprocessor, and even testing tools. Using the method chain, Elixir allows you to smoothly define the resource pipeline. For example:

Elixir (function (Mix) {    mix.sass (' app.scss ')       . Coffee (' App.coffee ');});

If you've ever wondered how to use gulp and compile front-end resources, you'll love Laravel Elixir. However, it is not mandatory to use it during development. You can freely choose to use any of the front-end resource pipeline tools, or not at all.

2. Installation & Setup

2.1 Installing Node

Before you start Elixir, you must first ensure that node. JS is installed on the machine:

Node-v

By default, Laravel Homestead contains everything you need, but if you don't use Vagrant, you can easily install node by visiting the node's download page.

2.2 Gulp

Next, you need to install Gulp as the Global NPM package:

NPM Install--global Gulp

2.3 Laravel Elixir

Finally, under the newly installed Laravel root directory, you will find a Package.json file. This file, like Composer.json, is simply used to define Node dependencies rather than PHP, and you can install the required dependencies by running the following command:

NPM Install

If you are developing on a Windows system, you will need to take--no-bin-links with the NPM install command when running:

NPM Install--no-bin-links

3. Running Elixir

Elixir is based on Gulp, so to run the Elixir command you only need to run the GULP command in the terminal. Adding the--production identity to the command minimizes the CSS and JavaScript files:

Run all tasks...gulp//Run All tasks and minify all CSS and Javascript...gulp--production

Monitor front-end resource changes

Because it is inconvenient to run gulp every time you modify a front-end resource, you can use the Gulp Watch command. The command will always run at the terminal and monitor changes to the front-end files. When the change occurs, the new file is automatically compiled:

Gulp Watch

4. Working with CSS

The Gulpfile.js file under the project root directory contains all the Elixir tasks. Elixir tasks can be chained together using a method chain to define how the front-end resources are compiled.

4.1 Less

To compile less into CSS, you can use the less method. The less method assumes that your less file is placed in the resources/assets/less. By default, the task in this example puts the compiled CSS into public/css/app.css:

Elixir (function (Mix) {    mix.less (' app.less ');});

You can also compile multiple less files into a single CSS file. Again, the file will be placed in PUBLIC/CSS/APP.CSS:

Elixir (function (Mix) {    mix.less ([        ' app.less ',        ' controllers.less '    );});

If you want to customize the output location of a compiled file, you can pass the second parameter to the less method:

Elixir (function (Mix) {    mix.less (' app.less ', ' public/stylesheets ');}); /specifying a specific output Filename...elixir (function (mix) {    mix.less (' app.less ', ' public/stylesheets/ Style.css ');});

4.2 Sass

The Sass method allows you to compile sass into CSS. Assuming your Sass file is stored in Resources/assets/sass, you can use this method like this:

Elixir (function (Mix) {    mix.sass (' app.scss ');});

Similarly, as with the less method, you can compile multiple scripts into a single CSS file and even customize the output path of the resulting CSS:

Elixir (function (Mix) {    Mix.sass ([        ' app.scss ',        ' controllers.scss '    ], ' public/assets/css ');});

4.3 Native CSS

If you only want to merge multiple native CSS style files into one file, you can use the Styles method. The path passed to the method is relative to the Resources/assets/css directory, and the resulting CSS is stored in the PUBLIC/CSS/ALL.CSS:

Elixir (function (Mix) {    mix.styles ([        ' normalize.css ',        ' main.css '    );});

Of course, you can also output a result file to a custom path by passing the second argument to the Styles method:

Elixir (function (Mix) {    mix.styles ([        ' normalize.css ',        ' main.css '    ], ' public/assets/css ');});

4.4 Source Map

The default source map is enabled, so you can find a corresponding *.css.map file in the same directory for each file you have compiled. This match allows you to trace the compiled style selector back to the original Sass or less when debugging in the browser.

If you don't want to generate a source map for CSS, you can turn them off with a simple configuration option:

Elixir.config.sourcemaps = False;elixir (function (mix) {    mix.sass (' app.scss ');});

5. Handling JavaScript

Elixir also provides several functions to help you work with JavaScript files, such as compiling ECMAScript 6,coffeescript,browserify, minimizing and simply connecting native JavaScript files.

5.1 Coffeescript

The coffee method is used to compile coffeescript into native JavaScript. This method receives a string or array of coffeescript files associated to the Resources/assets/coffee directory and generates a single app.js file in the Public/js directory:

Elixir (function (Mix) {    Mix.coffee ([' App.coffee ', ' Controllers.coffee ');});

5.2 Browserify

Elixir also provides a browserify method that allows you to introduce modules into your browser and use EcmaScript 6.

This task assumes that your scripts are stored in Resources/assets/js and the resulting files are stored in the Public/js/bundle.js:

Elixir (function (Mix) {    mix.browserify (' main.js ');});

In addition to handling partialify and babelify, you can also install and add more:

NPM Install vueify--save-dev

Elixir.config.js.browserify.transformers.push ({    name: ' vueify ',    options: {}}); Elixir (function (mix) {    Mix.browserify (' Main.js ');});

5.3 Babel

The Babel method can be used to compile EcmaScript 6 and 7 into native JavaScript. The method receives an array of files relative to the Resources/assets/js directory and generates a single all.js in the Public/js directory:

Elixir (function (Mix) {    Mix.babel ([        ' order.js ',        ' product.js '    );});

To select a different output path, you simply pass the destination path as the second parameter to the method. In addition to Babel compilation, Babel and Mix.scripts () use the same methods and functions.

5.4 Scripts

If you have multiple JavaScript files that you want to compile into a single file, you can use the scripts method.

The scripts method assumes that all paths are relative to the Resources/assets/js directory, and that all result JavaScript is stored by default in Public/js/all.js:

Elixir (function (Mix) {    mix.scripts ([        ' jquery.js ',        ' app.js '    );});

If you need to merge multiple script collections into different files, you need to call the scripts method multiple times. The second parameter of the method determines the result file name for each merge:

Elixir (function (Mix) {    mix.scripts ([' App.js ', ' controllers.js '], ' public/js/app.js ')       . Scripts ([' Forum.js ') , ' threads.js '], ' public/js/forum.js ');

If you need to merge multiple scripts into a given directory, you can use the Scriptsin method. The result is that JavaScript is stored in public/js/all.js:

Elixir (function (Mix) {    mix.scriptsin (' public/js/some/directory ');});

6. Copy files/directories

You can copy a file/directory to a new path using the Copy method, and all operations are relative to the project root directory:

Elixir (function (Mix) {    mix.copy (' vendor/foo/bar.css ', ' public/css/bar.css ');}); Elixir (function (Mix) {    mix.copy (' vendor/package/views ', ' resources/views ');});

7. Version number/cache refresh

Many developers add a timestamp or a unique token suffix to a compiled front-end resource to force the browser to load the latest version rather than the cached copy of the code. Elixir can use the version method to handle this situation for you.

The version method receives the file name relative to the public directory, appending a unique hash to the file name, enabling cache refreshes. For example, the generated file name looks like this--all-16d570a7.css:

Elixir (function (Mix) {    mix.version (' css/all.css ');});

After generating the version file, you can use the Elixir Global PHP Helper function Elixir method in the view to load the corresponding hash value of the front-end resource, the Elixir function will automatically determine the hash file name:

Add a version number to multiple files

You can pass an array to the version method to add a revision number to multiple files:

Elixir (function (Mix) {    mix.version ([' Css/all.css ', ' js/app.js ');});

Once the file is added to the version number, you can use the Help function elixir to generate a link to the hash file. Remember, you only need to pass the file name without the hash value to the Elixir method. The Help function uses a file name with no hash value to determine the current hash version of the document:

8, Browsersync

Browsersync will automatically refresh the browser after you modify the front-end resources, you can use the Browsersync method to tell Elixir to start a Browsersync server when you run the Gulp Watch command:

Elixir (function (Mix) {    mix.browsersync ();});

After running Gulp Watch, use http://homestead.app:3000 to access the app to turn on browser synchronization. If you use a domain name other than Homestead.app in your local development, you can pass the domain name parameter to the Browsersync method:

Elixir (function (Mix) {    Mix.browsersync ({        proxy: ' Project.app '    });

9. Call the existing Gulp task

If you need to invoke an existing Gulp task from Elixir, you can use the task method. For example, suppose you have a Gulp task that invokes only a few simple words:

Gulp.task (' Speak ', function () {    var message = ' Tea ... Earl Grey ... Hot ';    GULP.SRC ("). Pipe (Shell (' say ' + message));});

If you want to invoke the task from Elixir, use the Mix.task method and pass the task name as the unique parameter for the method:

Elixir (function (Mix) {    Mix.task (' speak ');});

Custom Monitor

If you need to register a monitor to run a custom task every time the file is modified, pass a regular expression as the second parameter of the task method:

Elixir (function (Mix) {    Mix.task (' Speak ', ' app/**/*.php ');});

10. Write Elixir Extension

If you need more flexibility than the Elixir task method provides, you can create a custom Elixir extension. The Elixir extension allows you to pass parameters to a custom task, for example, you can write an extension like this:

File:elixir-extensions.jsvar Gulp = require (' gulp '); var shell = require (' Gulp-shell '); var elixir = require (' LARAVEL-E Lixir '); var Task = Elixir.task; Elixir.extend (' Speak ', function (message) {    new Task (' Speak ', function () {        return gulp.src ("). Pipe (' Say ' + message);});    /Mix.speak (' Hello world ');

It's that simple! Note that your specific gulp logic should be placed in the closure function as the second parameter passed to the task constructor. You can put it at the top of the gulpfile, or resolve it to a custom task file. For example, if you put the extension on elixir-extensions.js, you can introduce the file in the main gulpfile like this:

File:Gulpfile.jsvar Elixir = require (' Laravel-elixir '); require ('./elixir-extensions ') Elixir (function (mix) {    Mix.speak (' Tea, Earl Grey, hot ');});

Custom Monitors

If you want the custom task to be triggered when running Gulp watch, you can register a monitor:

New Task (' Speak ', function () {    return gulp.src ('). Pipe (Shell (' say ' + Message)}). Watch ('./app/** ');

