Laravel Basic Course--gold-smelting medicine

Laravel Elixir (Gold-smelting medicine)

Brief introduction

Laravel Elixir provides a simple and fluent API for your application to define the basic Gulp tasks. Elixir provides several common CSS and JavaScript pre-processors and test tools. Elixir allows you to work fluently with your resource pipeline using chained tuning. Like what:

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

If you have doubts about how to use Gulp and resource precompilation, you will definitely fall in love with Laravel Elixir. In fact, you can also not use it when developing an application. You are free to use any of the resource plumbing tools, or not at all.

Installation & Start-up

Install Node

Before you touch Elixir, you first need to make sure that Node is already installed in your machine:

Node-v

By default, Laravel Homestead contains all you need, in fact, if you use Vagrant, you can easily install Node here.

Gulp

Next, you need to install Gulp to the global through NPM:

NPM Install--global Gulp

If you use a version controller, you may want to run NPM shrinkwrap to lock up your NPM dependencies:

NPM shrinkwrap

Once you have run this command. You are free to submit Npm-shrinkwrap.json files to the source controller.

Laravel Elixir

The last thing left is the installation of Elixir! In a new Laravel application, you will find the Package.json file in the root directory. You can think of it as a Composer.json file. The difference is that it defines Node dependencies, not PHP. You can install these dependencies by using the following command:

NPM Install

If you are developing in a Windows system or running a Windows system in a virtual machine, you need to add the--no-bin-links option while running the NPM install command:

NPM Install--no-bin-links

Run Elixir

Elixir is built on top of Gulp, so running Elixir task you just need to run the GULP command on the terminal. Adding the--production logo to the command will instruct Elixir to compress your CSS and JavaScript files:

Run all tasks...gulp//Run All tasks and minify all CSS and JavaScript ...

Monitor changes in resource files

To keep you from running the Gulp command again after each file change, you should use the Gulp Watch command to monitor the changes to the resource file. This command will continue to run in your terminal. When a change to the resource file is detected, the new file is automatically compiled and completed:

Gulp Watch

Working with style files

There is a gulpfile.js file in the root directory of your project that contains all the Elixir tasks. The Elixir task can be chained and will compile your resource file through an orderly pass.

Less

You can use the less method to compile the less file as a CSS. The less method assumes that your less file is stored in the Resources/assets/less directory. By default, in the following example, the results of the task run will compile the CSS file in Public/css/app.css:

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

You can also merge multiple less files into a single CSS file. By default, they will be compiled as PUBLIC/CSS/APP.CSS files:

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

If you want to store the compiled file in a custom location, 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 ');});

Sass

The Sass method allows you to speak sass files compiled into CSS. It assumes that your Sass file is stored in Resources/assets/sass, and you can use the method as follows:

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

Just like the less method, you can compile multiple Sass files into a CSS file, and you can also store the compiled results in the specified location:

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

Native CSS

If you want to merge multiple CSS files into a single file, you can use the Styles method. The path you need to pass the file to is relative to the Resources/assets/css directory, and the result of the default merge will be stored in the PUBLIC/CSS/ALL.CSS:

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

Of course, you can also customize the path of the output result:

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

Compiling maps

Compiling maps is out-of-the-box. So, for all the compiled files you can find the *.css.map file in the same directory. This map file allows you to track the location of the pre-compilation code in your browser, making it easier to debug.

If you do not want to generate a map, you can close it in the configuration:

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

Working with Scripts

ELIXR also offers a variety of ways to help you work with JavaScript, such as compiling ecmapscript 6,coffeescript, loading browserify modules, compressing scripts, or merging simple native JavaScript files. This is not a problem!

Coffeescript

The coffee method can be used to compile coffeescript to native JavaScript. The coffee method can receive a string or an array of coffeescript files to compile the file, assuming that your coffeescript file is stored in the Resources/assets/coffee directory, and that the generated JavaScript files to Public/js/app.js:

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

Browserify

Elixir also comes with the Browserify method, which gives you the ability to load the modules you need in the browser and allows you to use ECMAScript 6 and JSX.

This task assumes that your script is stored in RESOURCES/ASSETS/JS and will output the resulting file to public/js/main.js. You can also pass a second parameter to specify the location of the output:

Elixir (function (Mix) {  mix.browserify (' main.js ');}); /specifying a specific output Filename...elixir (function (mix) {  mix.browserify (' main.js ', ' public/javascripts/ Main.js ');});

While Browserify comes with partialify and babelify converters, you can freely install what you want:

NPM Install aliasify--save-dev

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

Babel

The Babel method allows you to compile ECMAScript 6 and 7 and JSX to native JavaScript. The method receives an array of file lists relative to the RESOURCES/ASSETS/JS directory, and generates all.js files in the Public/js directory:

Elixir (function (Mix) {  Mix.babel ([    ' order.js ',    ' product.js ',    ' react-component.jsx '  ]);

You can pass the second parameter to specify a different output path. In addition to Babel compilation, its methods are functionally the same as mix.scripts.

Scripts

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

The scripts method assumes that all of your files are relative to the Resouces/assets/js directory and that the results are compiled to the Public/js/all.js file by default:

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

If you need to merge multiple files into several different paths, you can call through multiple chaining and pass the second parameter as the path to the specified output:

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 all the script files under the specified directory, you can use the Scriptin method. The results of the merge will be stored in public/js/all.js:

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

Copy Files & Directories

The copy method can be used to copy files and directories to a new location. All operations are relative to the root directory of the project:

Elixir (function (Mix) {  mix.copy (' vendor/foo/bar.css ', ' Public/css/bar.css ')}) Elixir (function (mix) {  Mix.copy (' vendor/package/views ', ' Resources/views ')})

Version/Cache removal

The pain for many developers is to manually add a timestamp to the resource file or a unique token ID to force the browser to reload the new resource file. Elixir can help you do this automatically by using the version method.

The version method receives the file name relative to the public directory, and it automatically adds a unique hash to the file name, so that it can be automatically erased by the cache. For example, the newly generated file name looks like this: all-16d570a7.css:

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

After you have generated the versioned file, you can use Laravel's global help function Elixir to load the appropriate hashed resources in your view file. The Elixir method automatically determines the name of the file:

Versioning Multiple Files

You can pass an array to the version method to make multiple files versioned:

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

Once the file is versioned, you can use the Laravel Elixir method to generate a versioned link. Remember, you just have to pass the filename prefix to the Elixir Help method, and you don't need to fill in the hash file name. The Help method automatically recognizes the file name after the hash:

Browsersync

Browsersync can automatically refresh your browser after your front-end resource file changes. You can use the Browsersync method to instruct Elixir to start the Browsersync service when you run the Gulp Watch command:

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

Once you run Gulp watch, you can use the 3000 port to enable browsersyncing:http://homestead.app:3000 by accessing your app. If you use a domain name other than Homestead.app as support for local development, you can pass an options array to the first parameter to the Browsersync method:

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

Calling an existing Gulp task

If you need to invoke a Gulp task that already exists from Elixir. You can use the task method. You can imagine that you have a GULP task that is used to simply send a text:

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

If you want to invoke this task through Elixir, you can use the Mix.task method and pass the name of the task to the method:

Elixir (function (Mix) {  Mix.task (' Speak ')})

Custom Monitoring

If you need to register a monitor to monitor every file change in your custom task. You can pass a regular expression as a second argument to a task method:

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

Writing Elixir Extensions

If you need more flexibility than the Elixir task method provides, you can create your own Elixir extension. The Elixir extension allows you to pass parameters to your custom tasks. For example, you could write an extension similar to the following:

File:elixir-extensions.jsvar Gulp = require (' gulp ') var shell = require (' Gulp-shell ') var elixir = require (' Laravel-eli Xir ') var task = Elixir.TaskElixi.extends (' Speak ', function (message) {  new Task (' Speak ', function () {    return Gul P.SRC ("). Pipe (Shell (' say ' + Message)})  })//Mix.speak (' Hello World ')

It's that simple. You should note that the proprietary logic of the task should be written in the method passed to the Tast constructor as the second parameter. You can also store it at the top of the gulpfile or extract it into a standalone extension file. For example, you can store your extension to elixir-extendsions.js and load it into your Gulpfile file:

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

Custom Monitor If you want to run Gulp Watch, your custom task can be automatically triggered when the file changes, you can register a monitor:

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

