laravel 基础教程 —— 炼金药

Laravel Elixir(炼金药)

简介

Laravel Elixir 为您的采取定义基础的
Gulp
任务提供了简便明快的 API。Elixir 提供了两种常用的 CSS 和 JavaScript
预处理器和测试工具。Elixir
允许你通过链式调用来对您的资源管道展开流利的操作。比如:

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

要是你曾对怎么行使 Gulp 和资源预编译有所疑惑,那么你势必会爱上 Laravel
Elixir。事实上,你也可以在付出使用的时候不行使它。你可以无限制的选用其他的资源管道工具,或者某些也不用。

安装 & 起步

安装 Node

在触遇到 Elixir 此前,你首先需要规定你的机械中早就设置了 Node:

node -v

默认的,Laravel Homestead 包含了拥有你所急需的;事实上,尽管你利用
Vagrant,你也是可以非凡简单的经过
这里
来进展设置 Node。

Gulp

跟着,你需要经过 NPM 中装置
Gulp 到全局:

npm install --global gulp

要是你使用了版本控制器,你恐怕希望去运转 npm shrinkwrap 来锁住你的 NPM
倚重:

npm shrinkwrap

假若您运行了这条命令。你能够无限制的交由 npm-shrinkwrap.json
文件到源码控制器中去。

Laravel Elixir

终极剩下的就是设置 Elixir 了!在一个新的 laravel
应用中,你会在根目录中发觉 package.json 文件。你可以把它想象成
composer.json 文件。它的不同之处就是它定义的是 Node 依赖,而不是
PHP。你可以由此下边的下令来设置那一个依赖:

npm install

假若你是在 Windows 系统中展开开发,或者运行在虚拟机中的 Windows
系统,你需要周转 npm install 命令的同时添加 --no-bin-links 选项:

npm install --no-bin-links

运行 Elixir

Elixir 是白手起家于 Gulp 之上的,所以运行 Elixir 任务你只需要在终点运行
gulp 命令就行了。添加 --production 标识到命令会率领 Elixir
去缩小你的 CSS 和 JavaScript 文件:

// Run all tasks...
gulp

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

督查资源文件的改动

为了不让你每一趟文件变动之后还要再次运行 gulp 命令,你应有利用
gulp watch
命令来监督资源文件的改动。那些命令会没完没了的在您的终点中运作。当检测到资源文件的改观,新的文本将自行编译完成:

gulp watch

与体制文件合作

在您项目的根目录中有一个 gulpfile.js 文件,该文件包含了装有的 Elixir
任务。Elixir
任务可以被链式的调用,会通过有序的传递来对您的资源文件举行编译。

Less

您可以运用 less 方法来将 less 文件编译为 CSS。less 方法假设你的 less
文件存放在 resources/assets/less
目录中。默认的,在底下的演示中,任务运行的结果将编译的 CSS 文件存放在
public/css/app.css:

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

你也足以统一三个 less 文件到一个单身的 CSS
文件中。默认的,他们将被编译为 public/css/app.css 文件:

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

假定您愿意将编译的公文存放到自定义的职位,那么你可以传递第二个参数到
less 方法:

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

sass 方法允许你讲 sass 文件编译为 CSS。它虽然你的 Sass 文件存放在
resources/assets/sass,你可以像下边的点子来拔取该方法:

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

就像 less 方法同样,你可以编译五个 Sass 文件到一个 CSS
文件中,还是可以将编译的结果存放到指定的地点:

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

原生 CSS

倘使您愿意统一多少个 CSS 文件到一个文本中,你能够行使 styles
方法。你需要传递文件的途径是争持于 resources/assets/css
目录的,并且默认的联合的结果将会被寄放到 public/css/all.css:

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

自然,你也是足以自定义输出结果的门路:

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

编译地图

编译地图是开箱即用的。所以,对于持有的被编译后的文件你都得以在平等的目录下发现
*.css.map
文件。那一个地图文件可以使你在浏览器中追踪到编译前代码的地方,这样方便于调试。

假若你不指望生成地图,你可以在布局中开展关闭:

elixir.config.sourcemaps = false;

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

与剧本合作

Elixr 也提供了多种方法来援救你一头 JavaScript 的做事,例如 ECMAPScript
6,CoffeeScript 的编译,Browserify
模块的加载,脚本的压缩,或者是概括的原生 JavaScript
文件的碰面,这都不是题材!

CoffeeScript

coffee 方法能够用来编译 CoffeeScript 到原生 JavaScript。coffee
方法可以接到一个字符串或者一个 CoffeeScript
文件的数组来拓展文件的编译,它若是你的 CoffeeScript 文件存放在
resources/assets/coffee 目录,并且统一生成的 JavaScript 文件到
public/js/app.js

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

Browserify

Elixir 也顺带了 browserify
方法,该办法可以在浏览器中给你提供您所急需模块的加载,并且同意你利用
ECMAScript 6 和 JSX。

本条任务如果你的本子存放在 resources/assets/js 并且会将结果文件输出到
public/js/main.js。你也足以传递第二个参数来指定输出的地方:

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

// Specifying a specific output filename...
elixir(function(mix) {
  mix.browserify('main.js', 'public/javascripts/main.js');
});

而 Browserify 附带了 Partialify 和 Babelify
转换器,你能够随便的装置你所企望的:

npm install aliasify --save-dev

elixir.config.js.browserify.transformers.push({
  name: 'aliasify',
  options: {} 
});

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

Babel

babel 方法可以使你编译 ECMAScript 6 和 7JSX 到原生的
JavaScript。该方法接收一个文件列表相对于 resources/assets/js
目录的数组,并且在 public/js 目录中生成 all.js 文件:

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

你可以传递第二个参数来指定不同的出口路径。除了举办 Babel
编译,其艺术的效益和 mix.scripts 一样。

Scripts

假如您想要将五个 JavaScript 文件合并到一个文本中,你可以使用 scripts
方法。

scripts 方法如若你富有的文本都相对于 resouces/assets/js
目录,并且会默认的将结果编译到 public/js/all.js 文件中:

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

一经你需要统一多少个公文到多少个例外的门径,你可以透过反复链式调用并传递第二个参数作为指定输出的门道:

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

设若你需要统一指定目录下的兼具脚本文件,你可以使用 scriptIn
方法。合并的结果将存放到 public/js/all.js:

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

复制文件 & 目录

copy
方法能够用来复制文件和目录到一个新的职务。所有的操作都是相对于项目标根目录:

elixir(function (mix) {
  mix.copy('vendor/foo/bar.css', 'public/css/bar.css')
})

elixir(function(mix) {
  mix.copy('vendor/package/views', 'resources/views')
})

本子 / 缓存移除

对此广大开发者相比痛苦的事就是手动的对资源文件增加时间戳或者唯一的 token
标识来迫使浏览器重新加载新的资源文件。Elixir 可以经过 version
方法来帮您活动的落成这多少个。

version 方法接收文件名称相对于 public
目录,并且它会活动的为文件名扩充一个特出的
hash,这样就可以自行的举办缓存清除了。比如,新生成的公文名看上去像这样:all-16d570a7.css:

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

在生成版本化的文本之后,你可以采用 laravel 的大局帮助函数 elixir
在您的视图文件中开展加载适当的 hashed 资源。elixir
方法会自动的判断文件的名称:

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

对两个公文举行版本化

您能够传递一个数组到 version 方法来进行两个公文的版本化:

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

一经文件本版本化,你就足以运用 laravel 的 elixir 方法去生成版本化的
link。记住,你只需要向 elixir
协助方法中传递文件名的前缀就足以了,并不需要填写 hash
后的公文名。协助方法会自动的分辨 hash 后的文件名:

<link rel="stylesheet" href="{{ elixir('css/all.css') }}">

<script src="{{ elixir('js/app.js') }}"></script>

BrowserSync

BrowserSync
可以在您的前端资源文件变更之后自动的基础代谢的你浏览器。你可以应用
browserSync 方法来指点 Elixir 当您运行 gulp watch 命令时启动
BrowserSync 服务:

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

虽然您运行 gulp watch,你能够经过走访你的利用使用 3000 端口来启用
browsersyncing: http://homestead.app:3000。即便你采纳了
homestead.app 之外的域名作为当地开发的支撑,你可以传递一个
options
数组到第一个参数到 browserSync 方法:

elixir(function (mix) {
  mix.browserSync({
    proxy: 'project.app'
  }) 
});

调用已存在的 Gulp 任务

一旦你需要从 Elixir 中调用已经存在的 Gulp 任务。你可以动用 task
方法。你可以想像一下你有一个 Gulp 任务是用来简单的出殡一个文书:

gulp.task('speak', function () {
  var message = 'Tea...Earl Grey...Hot';

  gulp.src('').pipe(shell('say ' + message))
})

设若你想通过 Elixir 来调用那个职责,你可以行使 mix.task
方法并且传递任务的称号到该方法:

elixir(function (mix) {
  mix.task('speak')
})

自定义监控

万一你需要登记一个监控者在您的自定义任务中监控每一趟文件的改观。你可以传递一个正则表明式作为第二个参数到
task 方法:

elixir(function (mix) {
  mix.task('speak', 'app/**/*.php') 
})

编写 Elixir 扩展

要是您需要比 Elixir task 方法所提供的更高的八面玲珑,你可以创制自己的
Elixir 扩充。Elixir
扩充允许你传递参数到你的自定义任务中。比如,你可以编制一个下边好像的扩展:

// File: elixir-extensions.js

var gulp = require('gulp')
var shell = require('gulp-shell')
var Elixir = require('laravel-elixir')

var Task = Elixir.Task

Elixi.extends('speak', function (message) {
  new Task('speak', function () {
    return gulp.src('').pipe(shell('say ' + message))
  })  
})

// mix.speak('Hello World')

就是这般简单。你应有专注,任务的专有逻辑应该编写在措施中传送给 Tast
构造函数作为第二个参数。你也得以将其存放在 Gulpfile
的顶部或者提取到独门的恢宏文件中。比如,你可以存放你的壮大到
elixir-extendsions.js,然后在您的 Gulpfile 文件中展开载入:

// File: Gulpfile.js

var elixir = require('laravel-elixir')

require('./elixir-extendsions')

elixir(function (mix) {
  mix.speak('Tea, Earl Grey, Hot')
})

自定义监控者
假定您指望在运作 gulp watch
时,你的自定义任务可以在文件变更时自动的触发,你可以挂号一个监控者:

new Task('speak', function () {
  return gulp.src('').pipe(shell('say ' + mesage))
})
.watch('./app/**')