Laravel中运行Gulp任务的利器 —— Laravel Elixir简介及入门教程

gulp-tasks-in-laravel-with-elixir

对现代开发者而言，即使是构建一个很简单的web应用，也要编写很多任务，比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很多其它不计其数的任务。当你将绝大部分精力放在业务主流程上，却还需要时刻盯着这些碎片化任务着实有点让人焦头烂额。

Laravel的宗旨是让PHP开发变得轻松愉悦，所以从Laravel 5开始，提供了一个新的被称作Laravel Elixir的API。该API集成了Gulp，为编译Laravel项目中的Less、Sass、CoffeeScript以及处理许多其他日常任务提供了一个简单的解决方案，从而减少编写上述繁琐任务的时间，有效提高编程效率。

在本节中，我们会展示如何创建并执行与Laravel应用紧密结合的Elixir任务，但在这之前，可能很多人还不太了解什么是Gulp，所以我们将从这里开始，逐一为你解开Elixir的面纱。

1、Gulp是什么？

Gulp是一个功能强大的、开源的自动化构建工具，你可以用它来自动构建所有上述的任务甚至更多。你可以通过编写Gulp任务来自动构建这些令人头痛的任务，并且可以通过集成成百上千的Gulp插件来有效节省时间，避免重复造轮子。下面我们就来看看如何安装配置Gulp：

安装Gulp

由于Gulp是基于Node.js的，所以安装之前需要先安装Node。不管你使用的是什么操作系统，都可以从Node.js官网下载与之对应的安装包。如果你想从源代码编译安装，也可以通过这个链接去下载源码。

安装完Node后，可以通过命令行查看Node版本确保安装成功：

$ node -v
v0.10.36

Node用户可以通过NPM获取成千上万个第三方模块库，然后使用npm安装这些模块，我们正是使用npm来安装Gulp：

$ npm install -g gulp

安装完成后，可以从命令行执行如下命令查看Gulp版本：

$ gulp -v
[14:12:51] CLI version 3.8.10

Gulp安装完成后就可以安装Elixir了！

2、安装Elixir

Laravel 5 安装完成后在项目根目录下自动包含了一个名为package.json的文件，该文件内容如下：

{
    "devDependencies": {
        "gulp": "^3.8.8",
        "laravel-elixir": "*"
    }
}

Node的npm包管理器使用package.json来安装项目的Node模块依赖。正如你所看到的，Laravel项目默认需要两个Node包：gulp和laravel-elixir。你可以使用如下命令本地安装这两个包：

$ npm install

安装完成之后，你会看到项目根目录下新增了一个node_modules文件夹，在该文件夹内包含了我们刚刚安装的gulp和laravel-elixir包。

3、Elixir快速入门

创建第一个Elixir任务

Laravel项目包含了一个默认的gulpfile.js，该文件定义了Elixir版的Gulp任务。在该文件中，可以看到一个Gulp任务示例：

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

mix.less任务可以用于编译Less文件，在本例中该文件名为app.less，这个文件位于resources/assets/less目录下，其内容如下：

@import "bootstrap/bootstrap";

@btn-font-weight: 300;
@font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;

body, label, .checkbox label {
    font-weight: 300;
}

你可以自由添加其他任务到该方法（elixir）中，这意味着几个简单的键盘敲击就可以处理多个重复恼人的任务。

你可以通过在项目根目录下运行gulp命令来执行定义在elixir方法中的任务：

$ gulp
[13:16:18] Using gulpfile ~/Software/dev.todoparrot.com/gulpfile.js
[13:16:18] Starting 'default'...
[13:16:18] Starting 'less'...
[13:16:19] Finished 'default' after 480 ms
[13:16:20] gulp-notify: [Laravel Elixir]
[13:16:20] Finished 'less' after 1.52 s

通过执行gulp命令，我们已经成功将app.less编译为app.css并保存到public/css目录下。当然，要使用app.css文件中的样式，还需要在布局视图中引用它：

<link rel="stylesheet" href="/css/app.css">

记住，默认情况下，Elixir并不会压缩编译的CSS文件，你可以通过添加--production选项到gulp命令来压缩CSS：

$ gulp --production

编译JavaScript资源

你可能还想要管理JavaScript资源，比如你使用了CoffeeScript，并且你将CoffeeScript文件放在了resources/assets/coffee目录下。

下面这个CoffeeScript语句将会在浏览器中显示一个弹出框：

alert “Hi I am annoying”

保存该语句到resources/assets/coffee/test.coffee，接下来，编辑gulpfile.js文件如下：

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

此外，你还可以直接使用方法链到命令上：

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

保存修改并再次运行gulp：

$ gulp
[14:40:25] Using gulpfile ~/Software/dev.todoparrot.com/gulpfile.js
[14:40:25] Starting 'default'...
[14:40:25] Starting 'less'...
[14:40:26] Finished 'default' after 478 ms
[14:40:27] gulp-notify: [Laravel Elixir]
[14:40:27] Finished 'less' after 1.88 s
[14:40:27] Starting 'coffee'...
[14:40:27] gulp-notify: [Laravel Elixir]
[14:40:27] Finished 'coffee' after 236 ms

你将会看到一个名为js的目录被创建在public目录下。在js目录中可以找到test.js，其中包含如下代码：

(function() {
    alert("Hello world");
}).call(this);

其他Elixir任务

Less和CoffeeScript编译是Elixir中最常见的两个功能，也是作为新手你可以快速入门的功能。想要了解更多Elixir细节可查看其官方文档。