Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use laravel elixir". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use laravel elixir" can help you solve the problem.

Laravel Elixir is an API that integrates Gulp and provides a simple solution for compiling Less, Sass, CoffeeScript and many other daily tasks in Laravel projects, thus reducing the time spent writing the above tedious tasks and effectively improving programming efficiency.

The operating environment of this tutorial: windows7 system, Laravel8.5 version, Dell G3 computer.

The purpose of Laravel is to make PHP development easy and enjoyable, so starting with Laravel 5, a new API called LaravelElixir is provided. The API integrates Gulp and provides a simple solution for compiling Less, Sass, CoffeeScript and many other daily tasks in the Laravel project, thus reducing the time of writing the above tedious tasks and effectively improving the programming efficiency.

Laravel Elixir provides a concise and smooth API that allows you to define basic Gulp tasks in your Laravel application. Elixir supports many common CSS and JavaScrtip preprocessors, and even includes testing tools. Using chained calls, Elixir allows you to define the development process smoothly, such as:

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

If you have ever been confused about getting started with Gulp and compiling resource files, you will fall in love with Laravel Elixir, but Laravel does not force you to use Elixir, you are free to choose your favorite automated development process tools.

Installation and configuration # install Node

Before you start using Elixir, you must make sure that Node.js is installed on your machine.

Node-v

By default, Laravel Homestead contains everything you need; however, if you are not using Vagrant, you can simply browse to Node's download page (http://nodejs.org/download/) to install it. [related recommendation: laravel video tutorial]

Gulp#

Next, you need to install the NPM expansion pack for Gulp (http://gulpjs.com) globally:

Npm install-global gulpLaravel Elixir#

The final step is to install Elixir! In each newly installed Laravel code, you will find a file called package.json in the root directory. Imagine that it is like your composer.json file, except that it defines Node's dependent extension package, not PHP's. You can install the dependency extension package using the following command:

Npm install

If you are running VM on a Windows system or a Windows host system for development, you need to turn on-- no-bin-links when running the npm install command:

Npm install-- no-bin-links runs Elixir#

Elixir is created on top of Gulp, so to run your Elixir task, just run the gulp command on the command line. Add-production to the command to tell Elixir to compress your CSS and JavaScript files:

/ / run all tasks... gulp// runs all tasks and compresses all CSS and JavaScript...gulp-- production monitoring resource file modification

Because it is quite inconvenient to run the gulp command on the command line after each modification of your resource file, you can use the gulp watch command. This command will run on your command line and monitor any changes to the resource file. When changes occur, the new file will be compiled automatically:

Gulp watch uses style #

The gulpfile.js of the project root contains all your Elixir tasks. The Elixir task can be chained up to define how your resource files should be compiled.

Less#

To compile Less to CSS, you can use the less method. The less method assumes that your Less file is saved in the resources/assets/less folder. By default, the task for this example places the compiled CSS on public/css/app.css:

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

You may want to merge multiple Less files into a single CSS file. Similarly, the generated CSS is placed in the public/css/app.css:

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

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

Elixir (function (mix) {mix.less ('app.less',' public/stylesheets');}); / / specify the output file name... elixir (function (mix) {mix.less ('app.less',' public/stylesheets/style.css');}); Sass

The sass method allows you to compile Sass to CSS. The default read path for Sass files is resources/assets/sass, and you can use this method:

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

Similarly, like the less method, you can compile multiple Sass files into a single CSS file, or even customize the output directory of the generated CSS:

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

If you just want to merge some pure CSS styles into a single file, you can use the styles method. The default path for this method is the resources/assets/css directory, and the generated CSS is placed in public/css/all.css:

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

Of course, you can also output the generated file to the specified location by passing the second parameter to the styles method:

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

Source maps is on by default. Therefore, for each compiled file, there is a *. Css.map file in the same directory. This file allows you to trace the compiled style selector to the original Sass or Less location while debugging the browser.

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

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

Elixir also provides functions to help you use JavaScript files, such as compiling ECMAScript 6, compiling CoffeeScript, Browserify, compression, and simple concatenated pure JavaScript files.

CoffeeScript

The coffee method can be used to compile CoffeeScript to pure JavaScript. The coffee function takes a string or array of CoffeeScript file names relative to the resources/assets/coffee directory, and then generates a single app.js file in the public/js directory:

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

Elixir also comes with a browserify method that gives you useful features to introduce modules and ECMAScript 6 into your browser.

This task assumes that your scripts are saved in resources/assets/js and the generated files are placed in public/js/main.js:

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

Although Browserify comes with Partialify and Babelify converters, you can install and add more converters if you like:

Npm install aliasify-- save-develixir.config.js.browserify.transformers.push ({name: 'aliasify', options: {}}); elixir (function (mix) {mix.browserify (' main.js');}); Babel

The babel method can be used to compile ECMAScript 6 and 7 to pure JavaScript. This function takes an array of files relative to the resources/assets/js directory and then generates a single all.js file in the public/js directory:

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

To choose a different output location, simply specify the path you want as the second parameter. In addition to the compilation of Babel, the feature and function of this method are equal to 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 paths are relative to the resources/assets/js directory, and the generated JavaScript is placed in the public/js/all.js by default:

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

If you want a collection of multiple scripts to be merged into different files, you can use to call multiple scripts methods. The second parameter given to the method determines the name of the generated file for each concatenation:

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

If you want to merge all the scripts in the specified directory, you can use the scriptsIn method. The generated JavaScript is placed in the public/js/all.js:

Elixir (function (mix) {mix.scriptsIn ('public/js/some/directory');}); copy files and directories

The copy method copies files and directories to a new location. All action paths 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 and cache cleanup

Many developers add timestamps or unique token to their compiled resource files, forcing browsers to load new resource files instead of providing copies of the old version of the code. You can use the version method to let Elixir handle them.

The version method receives a file name relative to the public directory, and then adds a unique hash to your file name to prevent the file from being cached. For example, the generated file name might look like this: all-16d570a7.css:

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

After generating a version of the file, you can use the global elixir PHP helper function of Laravel in your view to correctly load the file whose name has been hashed. The elixir function automatically determines the name of the file being hashed:

Generate versions for multiple files

You can pass an array to the version method to generate versions for multiple files:

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

Once the file is versioned, you need to use the elixir helper function to generate the correct link to the hash file. Remember, you only need to pass the name of the unhashed file to the elixir helper function. This function automatically uses the name of the non-hash to determine whether the file is the current hash version:

BrowserSync

When you make changes to the front-end resources, BrowserSync will automatically refresh your web browser. You can use the browserSync method to tell Elixir to start the BrowserSync server when you run the gulp watch command:

Elixir (function (mix) {mix.browserSync ();})

Once you run gulp watch, you can use connection port 3000 to enable browser synchronization and access your web application: http://homestead.app:3000. If the domain name you are using in native development is not homestead.app, you can pass an array of options as the first parameter of the browserSync method:

Elixir (function (mix) {mix.browserSync ({proxy: 'project.app'});}); invoke the existing Gulp task

If you need to call an existing Gulp task in Elixir, you can use the task method. For example, suppose you have a Gulp task that outputs some simple text when you call it:

Gulp.task ('speak', function () {var message =' Tea...Earl Grey...Hot'; gulp.src ('') .pipe (shell ('say' + message));})

If you want to call this task in Elixir, use the mix.task method and pass the name of the task as the only parameter to the method:

Elixir (function (mix) {mix.task ('speak');}); Custom Monitor

If you want to register a monitor so that your custom task can run every time the file changes, simply pass a regular expression as the second parameter of the task method:

Elixir (function (mix) {mix.task ('speak',' app/**/*.php');}); write Elixir extensions

If you need a solution that is more flexible than Elixir's task method, you can create custom Elixir extensions. The Elixir extension allows you to pass parameters to your custom task. For example, you can write an extension such as:

/ File: elixir-extensions.jsvar gulp = require ('gulp'); var shell = require (' gulp-shell'); var Elixir = require ('laravel-elixir'); var Task = Elixir.Task;Elixir.extend (' speak', function (message) {new Task ('speak', function () {return gulp.src (') pipe (shell ('say' + message);}); / / mix.speak ('Hello World')

okay! Note that the specific logic of your Gulp must be placed in the constructor function passed by the second parameter of the Task. You can place this extension on top of Gulpfile and export to a custom task file instead. For example, if you put your extension in an elixir-extensions.js file, you can introduce the file in Gulpfile like this:

/ / File: Gulpfile.jsvar elixir = require ('laravel-elixir'); require ('. / elixir-extensions') elixir (function (mix) {mix.speak ('Tea, Earl Grey, Hot');}); Custom Monitor

If you want to be able to re-trigger your custom tasks when running gulp watch, you can register a monitor:

New Task ('speak', function () {return gulp.src (') .pipe (shell ('say' + message));}) .watch ('. / app/**'); that's all for "how to use laravel elixir". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.