Laravel basic tutorial-alchemy-php Tutorial

Basic laravel tutorial -- Introduction to alchemy Laravel Elixir

Laravel Elixir provides simple and fluent APIs for defining basic Gulp tasks for your applications. Elixir provides several common CSS and JavaScript preprocessors and testing tools. Elixir allows you to perform fluent operations on your resource pipeline through chained calls. For example:

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

If you have doubts about how to use Gulp and resource pre-compilation, you will surely fall in love with Laravel Elixir. In fact, you can also not use it when developing an application. You can freely use any resource pipeline tool, or do not need it at all.

Install and start to install Node

Before you touch Elixir, you must first make sure that Node has been installed on your machine:

node -v

By default, Laravel Homestead contains all what you need. In fact, if you use Vagrant, you can simply 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 your NPM dependency:

npm shrinkwrap

Once you run this command. You can freely submit the npm-shrinkwrap.json file to the source controller.

Laravel Elixir

The last thing left is to install 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 rather than PHP. You can install these dependencies using the following commands:

npm install

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

npm install --no-bin-links

Run Elixir

Elixir is built on Gulp, so you only need to run the gulp command on the terminal to run the Elixir task. Adding the -- production identifier to the command will guide Elixir to compress your CSS and JavaScript files:

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

Monitor Resource file changes

To prevent you from re-running the gulp command after every file change, you should use the gulp watch command to monitor resource file changes. This command will continue to run on your terminal. When changes to resource files are detected, the new files are automatically compiled:

gulp watch

Cooperation with style files

There is a gulpfile. js file in the root directory of your project, which contains all Elixir tasks. Elixir tasks can be chained and compiled by sequential transmission.

Less

You can use the less method to compile the less file into CSS. The less method assumes that your less files are stored in the resources/assets/less directory. By default, in the following example, the result of running a task stores the compiled 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 into public/css/app.css files:

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

If you want to store the compiled file to 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 compile sass files into CSS. It assumes that your Sass file is stored in resources/assets/sass. you can use this 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 store the compilation results to 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 one file, you can use the styles method. You need to pass the file path relative to the resources/assets/css directory, and the default merge result will be stored in public/css/all.css:

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

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

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

Compile a map

Map compilation is out-of-the-box. Therefore, you can find *. css. map files in the same directory for all compiled files. This map file allows you to track the location of the pre-compilation code in your browser, which facilitates debugging.

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

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

Cooperation with scripts

Elixr also provides a variety of methods to help you work with JavaScript, such as ECMAPScript 6, CoffeeScript compilation, Browserify module loading, script compression, or simple merge of 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 for file compilation. it assumes that your CoffeeScript file is stored in the resources/assets/coffee directory, and merge 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 can provide you with the loading of the required modules in the browser and allow you to use ECMAScript 6 and JSX.

This task assumes that your script is stored in resources/assets/js and the result file is output to public/js/main. js. You can also specify the output location by passing the second parameter:

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 the 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 enables you to compile ECMAScript 6 and 7 and JSX to native JavaScript. This method receives an array of file lists relative to the resources/assets/js directory, and generates the all. js file 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 different output paths. In addition to Babel compilation, the function of the method is the same as that of mix. scripts.

Scripts

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

The scripts method assumes that all your files are relative to the resouces/assets/js directory, and the results will be 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 to multiple different paths, you can use multiple chained calls and pass the second parameter as the specified output path:

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 script files in the specified directory, you can use the scriptIn method. The merged results 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 most painful thing for many developers is to manually add a timestamp or a unique token to the resource file to force the browser to reload the new resource file. Elixir can use the version method to automatically complete these tasks.

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

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

After a versionized file is generated, you can use the global help function elixir of laravel to load the appropriate hashed resources in your view file. The elixir method automatically determines the file name:

Versioning multiple files

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

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

Once the file version is localized, you can use the elixir method of laravel to generate a version-based link. Remember, you only need to pass the prefix of the file name to the elixir help method, and do not need to fill in the hash file name. The help method automatically identifies the hash File name: