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

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

Laravel的宗旨是让PHP开发变得轻松愉悦,所以从Laravel 5开始,提供了一个新的被称作LaravelElixir的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包: gulplaravel-elixir 。你可以使用如下命令本地安装这两个包:

$ npm install

安装完成之后,你会看到项目根目录下新增了一个 node_modules 文件夹,在该文件夹内包含了我们刚刚安装的 gulplaravel-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细节可查看其官方文档。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-01-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GuZhenYin

ASP.NET Core中使用IOC三部曲(二.采用Autofac来替换IOC容器,并实现属性注入)

前言 本文主要是详解一下在ASP.NET Core中,自带的IOC容器相关的使用方式和注入类型的生命周期. 这里就不详细的赘述IOC是什么 以及DI是什么了.....

28850
来自专栏Core Net

ASP.NET Core 2.0 : 三. 项目结构

48550
来自专栏攻城狮的动态

iOS面试题梳理(三)

40070
来自专栏刘望舒

Android Apk安装过程解析

静默安装 apk安装流程简析 installd进程意义 最近工作上遇到静默安装相关的内容,顺便学习一下apk安装的知识

37660
来自专栏数据分析

[译]Asp.net MVC 之 Contorllers(一)

Asp.net MVC contorllers     在Ajax全面开花的时代,ASP.NET Web Forms 开始慢慢变得落后。有人说,Ajax已经给了...

33170
来自专栏一“技”之长

iOS开发之CFNetwork框架使用 原

    在iOS应用开发中,CFNetwork框架其实并不是非常常用的,相对NSURLSession框架而言,这是一个相对底层的网络工作框架。官方文档中的下图描...

46540
来自专栏向前进

vue-cli脚手架npm相关文件解读(4)utils.js

系列文章传送门: 1、build/webpack.base.conf.js 2、build/webpack.prod.conf.js 3、build/webp...

33560
来自专栏数值分析与有限元编程

CodeBlocks 安装及配置

CodeBlocks 是最适合gfortran的IDE,可以说是量身打造,配置也不复杂。而且体量很小,跟vs动不动就几个G甚至十几个G相比,那是小巫见大巫了。C...

34930
来自专栏散尽浮华

windows平台下编辑的内容传到linux平台出现中文乱码的解决办法

现象说明:在windows下编辑的内容,上传到linux平台下出现中文乱码。如下: 在windows平台编写haha.txt文件,内容如下: ? 上传到linu...

28080
来自专栏bluesummer

.Net Core 学习之路-基础

.Net Core出来好久了,一直在了解,但始终没有应用到实际项目中.... 准备用.net core搞个SSO,才发现它和.net framework的变化并...

36140

扫码关注云+社区

领取腾讯云代金券