laravel 基础教程 —— 炼金药

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');
});

与体制文件同盟

在您项目标根目录中有二个 gulpfile.js 文件,该公文包罗了所有的 Elixir
职务。Elixir
任务可以被链式的调用,会透过有序的传递来对您的能源文件举办编译。

安装 Node

在触蒙受 Elixir 在此之前,你首先须求确定你的机械中一度安装了 Node:

node -v

专断认同的,Laravel Homestead 包涵了具有你所须求的;事实上,如若您利用
Vagrant,你也是足以万分简单的通过
这里
来开展安装 Node。

本子 / 缓存移除

对此许多开发者相比较难过的事就是手动的对财富文件伸张时间戳只怕唯一的 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>

与剧本合营

Elixr 也提供了几种主意来增援您共同 JavaScript 的办事,例如 ECMAPScript
6,CoffeeScript 的编译,Browserify
模块的加载,脚本的回落,或许是简不难单的原生 JavaScript
文件的合并,那都不是题材!

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.map
文件。那几个地图文件可以使您在浏览器中追踪到编译前代码的职位,那样方便于调试。

借使您不期望生成地图,你可以在布署中展开关闭:

elixir.config.sourcemaps = false;

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

Gulp

随之,你须求经过 NPM 中设置
Gulp 到全局:

npm install --global gulp

假诺你利用了版本控制器,你大概希望去运作 npm shrinkwrap 来锁住你的 NPM
看重:

npm shrinkwrap

万一您运营了那条命令。你可以随便的付出 npm-shrinkwrap.json
文件到源码控制器中去。

原生 CSS

若是你希望统一八个 CSS 文件到2个文件中,你可以利用 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'); 
});

编写 Elixir 扩展

万一你须要比 Elixir task 方法所提供的更高的油滑,你可以创设自个儿的
Elixir 增加。Elixir
扩充允许你传递参数到你的自定义义务中。比如,你可以编制3个底下好像的恢宏:

// 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/**')

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'
  }) 
});

简介

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

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

假定您曾对怎么着行使 Gulp 和财富预编译有所疑心,那么您肯定会爱上 Laravel
Elixir。事实上,你也足以在开发使用的时候不接纳它。你可以私行的拔取其余的能源管道工具,恐怕有些也不用。

安装 & 起步

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 一样。

复制文件 & 目录

copy
方法可以用来复制文件和目录到几个新的职分。所有的操作都是相对于项目的根目录:

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

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

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')
});

运行 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

CoffeeScript

coffee 方法可以用来编译 CoffeeScript 到原生 JavaScript。coffee
方法可以吸纳多个字符串只怕一个 CoffeeScript
文件的数组来进展文件的编译,它如若你的 CoffeeScript 文件存放在
resources/assets/coffee 目录,并且统毕生成的 JavaScript 文件到
public/js/app.js

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

Laravel Elixir

最终剩下的就是设置 Elixir 了!在三个新的 laravel
应用中,你会在根目录中窥见 package.json 文件。你可以把它想象成
composer.json 文件。它的不一样之处就是它定义的是 Node 倚重,而不是
PHP。你可以因而下边的指令来设置这个依赖:

npm install

一旦你是在 Windows 系统中开展付出,或然运维在虚拟机中的 Windows
系统,你须求周转 npm install 命令的同时添加 --no-bin-links 选项:

npm install --no-bin-links

调用已存在的 Gulp 任务

要是你要求从 Elixir 中调用已经存在的 Gulp 职分。你可以接纳 task
方法。你能够想象一下你有1个 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') 
})

Laravel 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');
});

相关文章