[Laravel5.2 documentation] service-integration of frontend resources: LaravelElixir

[Laravel5.2 documentation] service-integration of frontend resources: LaravelElixir 1. Introduction

LaravelElixir provides a set of clean and smooth APIs for defining basic Gulp tasks for Laravel applications. Elixir supports some common CSS and JavaScript preprocessors and even test tools. Using method chain, Elixir allows you to smoothly define resource pipelines. For example:

elixir(function(mix) {    mix.sass('app.scss')       .coffee('app.coffee');});

If you are confused about how to use Gulp and compile front-end resources, you will fall in love with Laravel Elixir. However, it is not mandatory to use it during development. You can choose to use any front-end resource pipeline tool, or do not use it at all.

2. install and set2.1 install Node

Before starting Elixir, make sure that Node. js has been installed on the machine:

node -v

By default, Laravel Homestead contains everything you need. However, if you do not use Vagrant, you can easily install Node by visiting the Node 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, in the newly installed Laravel root directory, you will find a package. json file. This file is the same as composer. json, but is used to define Node dependencies rather than PHP. you can install the required dependencies by running the following command:

npm install

If you are developing on a Windows system, you need to run the npm install command with -- no-bin-links:

npm install --no-bin-links

3. run Elixir

Elixir is based on Gulp. to run the Elixir command, you only need to run the gulp command on the terminal. Adding the -- production identifier 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 frontend resource changes

Since it is inconvenient to run gulp after each front-end resource modification, you can use the gulp watch command. This command will always run on the terminal and monitor changes to the front-end files. When a change occurs, the new file will be automatically compiled:

gulp watch

4. process CSS

The gulpfile. js file under the Project root directory contains all Elixir tasks. Elixir tasks can be linked using method chains to define how frontend resources are compiled.

4.1 Less

To compile Less into CSS, you can use the less method. The less method assumes that all your Less files are stored in resources/assets/less. By default, in this example, the compiled CSS is put into public/css/app.css:

elixir(function(mix) {    mix.less('app.less');});

You can also compile multiple Less files into a single CSS file. Similarly, the file will be put in public/css/app.css:

elixir(function(mix) {    mix.less([        'app.less',        'controllers.less'    ]);});

If you want to customize the output location of the 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 that your Sass file is stored in resources/assets/sass, you can use this method as follows:

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

Similarly, like the less method, you can compile multiple scripts into a single CSS file, or even customize the output path of the result 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 this method is relative to the resources/assets/css Directory. as a result, CSS is stored in public/css/all.css:

elixir(function(mix) {    mix.styles([        'normalize.css',        'main.css'    ]);});

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

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

4.4 source map

The source map is enabled by default. Therefore, you can find a *. css. map file in the same directory for each compiled file. This matching allows you to trace the compiled style selector back to the original Sass or Less during debugging in the browser.

If you do not want to generate source maps for CSS, you can use a simple configuration option to disable them:

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

5. processing JavaScript

Elixir also provides multiple functions to help you process JavaScript files, such as compiling ECMAScript 6, CoffeeScript, Browserify, minimizing, and simply connecting to 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 the CoffeeScript file associated with the resources/assets/coffee directory and generates a single app. js file under the public/js Directory:

elixir(function(mix) {    mix.coffee(['app.coffee', 'controllers.coffee']);});

5.2 Browserify

Elixir also provides the browserify method, allowing you to introduce modules in your browser and use EcmaScript 6.

This task assumes that all your scripts are stored in resources/assets/js and the result files are stored in public/js/bundle. js:

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

In addition to Partialify and Babelify, you can 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. This method receives an array of files relative to the resources/assets/js directory and generates a single all. js file in the public/js Directory:

elixir(function(mix) {    mix.babel([        'order.js',        'product.js'    ]);});

To select different output paths, you only need to pass the target path to the method as the second parameter. In addition to Babel compilation, babel and mix. scripts () have similar usage and functions.

5.4 script

If you want to compile multiple JavaScript files 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 all results of JavaScript are stored in public/js/all. js by default:

elixir(function(mix) {    mix.scripts([        'jquery.js',        'app.js'    ]);});

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

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. As a result, JavaScript will be stored in public/js/all. js:

elixir(function(mix) {    mix.scriptsIn('public/js/some/directory');});

6. copy files/Directories

You can use the copy method to copy files/directories to the new path. 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 timestamps or unique token suffixes to compiled front-end resources to force the browser to load the latest version instead of 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, attaches a unique hash to the file name, so as to refresh the cache. For example, the generated file name looks like this -- all-16d570a7.css:

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

After the version file is generated, you can use the Elixir global PHP help function elixir method in the view to load the corresponding front-end resources with hash values. The elixir function will automatically determine the hash File name:

Add version numbers to multiple files

You can pass an array to the version method to add version numbers to multiple files:

elixir(function(mix) {    mix.version(['css/all.css', 'js/app.js']);});

Once the file is added with a 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 hash value to the elixir method. This help function uses a file name without a hash value to determine the current hash version of the file: