Laravel中运行Gulp任务的利器 —— Laravel Elixir简介及入门教程 | 服务篇 | Laravel 5.1 基础教程
Laravel 学院
文档
Laravel 8.x 中文文档
Laravel 7.x 中文文档
Laravel 6.x 中文文档
Laravel 5.8 中文文档
Laravel 5.7 中文文档
Laravel 5.6 中文文档
Laravel 5.5 中文文档
Laravel 5.4 中文文档
Laravel 5.3 中文文档
Laravel 5.2 中文文档
Laravel 5.1 中文文档
Lumen 中文文档
全栈教程
PHP 全栈工程师指南
PHP 入门到实战
Laravel 入门到精通
Vue.js 入门到实战
玩转 PhpStorm 教程
Laravel 博客入门项目
Laravel 微信小程序项目
Laravel 前后端分离项目
Swoole 入门到实战
Eloquent 性能优化实战
Redis 高性能实战系列
Laravel 新版本特性
PHP 新特性与最佳实践
Golang
Go 入门教程
Go Web 编程
Gin 使用教程
微服务开发
内功修炼
数据结构与算法
网络协议
微服务从入门到实践
高性能 MySQL 实战
高性能 Redis 实战
Laravel 消息队列实战
Laravel 从学徒到工匠
PHP 设计模式系列
名企面试指南
资源库
Laravel 资源大全
Laravel 开源项目
Laravel 扩展包
Laravel 资源下载
更多
博客 & 新闻
问答 & 讨论
Leetcode 题解
学院君读书笔记系列
关于 Laravel 学院
Laravel 互助学习群
Golang 互助学习群
更多
Laravel 中文文档
Laravel 全栈教程
Laravel 学习路径
Go 入门教程
程序员内功修炼
博客
问答
搜索
注册
登录
Info
Content
章节导航
Laravel 5.1 基础教程
目录索引
安装篇
3篇文章
在 Windows 中安装 Laravel 5.1.X
在 Windows 上进行 Laravel Homestead 安装、配置及测试
在 Laravel Homestead 中使用 Blackfire Profiler 对应用性能进行分析
基础篇
8篇文章
HTTP路由实例教程（一）—— 基本使用及路由参数
HTTP路由实例教程（二）—— 路由命名和路由分组
HTTP路由实例教程（三）—— CSRF攻击原理及其防护
中间件实例教程 —— 中间件的创建使用及中间件参数定义
HTTP控制器实例教程 —— 创建RESTFul风格控制器实现文章增删改查
HTTP 请求实例教程 —— 获取请求数据、Cookie及文件上传处理
HTTP响应实例教程 —— 基本使用、生成Cookie、返回视图、JSON/JSONP、文件下载及重定向
Laravel 视图实例教程 —— 在视图间共享数据及视图Composer
底层篇
4篇文章
Laravel 5.x 启动过程分析
Laravel 服务容器实例教程 —— 深入理解控制反转和依赖注入
Laravel 服务提供者实例教程 —— 创建 Service Provider 测试实例
Laravel 门面实例教程 —— 创建自定义 Facades 类
数据库篇
12篇文章
Laravel 数据库实例教程 —— 使用DB门面操作数据库
Laravel 数据库实例教程 —— 使用查询构建器对数据库进行增删改查
Laravel 数据库实例教程 —— 使用查询构建器实现对数据库的高级查询
Eloquent ORM 实例教程 —— ORM概述、模型定义及基本查询
Eloquent ORM 实例教程 —— 模型创建、更新及批量赋值
Eloquent ORM 实例教程 —— 模型删除及软删除相关实现
Eloquent ORM 实例教程 —— 查询作用域和模型事件
Eloquent ORM 实例教程 —— 关联关系及其在模型中的定义（一）
Eloquent ORM 实例教程 —— 关联关系及其在模型中的定义（二）
在 Laravel 框架之外使用数据库查询构建器及 Eloquent ORM
将 Sequel Pro 中已存在的数据表导出为 Laravel 迁移文件
将 MySQL Workbench 中已存在的数据表导出到 Laravel 迁移文件
服务篇
29篇文章
Laravel Spark 牛刀初试 —— 安装、设置及使用
Laravel 实例教程 —— 如何在Laravel 5.1中进行自定义包开发
Laravel 5.1用户认证（一） —— 使用Laravel内置组件快速实现注册登录
Laravel 5.1用户认证（二） —— 使用Laravel内置组件快速实现密码重置
Laravel 5.1用户认证（三） —— 使用Socialite实现GitHub登录认证
Laravel 5.1 中的ACL用户授权及权限检查功能实现教程
Laravel 5.1 中创建自定义 Artisan 控制台命令实例教程
Laravel 支付解决方案之 Laravel Cashier （一）—— 安装配置篇
Laravel 支付解决方案之 Laravel Cashier （二）—— 付费会员&分期付款&生成发票
Laravel 支付解决方案之如何使用支付宝进行支付
Laravel 支付解决方案之如何使用银联支付进行支付
Laravel 支付解决方案之如何使用微信支付进行支付
Laravel 缓存实例教程（一） —— 基于Memcached缓存驱动的配置
Laravel 缓存实例教程（二） —— 基于模型+缓存对文章增删改查进行优化
Laravel中运行Gulp任务的利器 —— Laravel Elixir简介及入门教程
如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap
Laravel Elixir 深入探究（一）：Elixir配置选项、前端资源文件编译及合并
Laravel Elixir 深入探究（二）：版本控制、测试套件、任务执行以及自定义任务和扩展
Laravel 5.1中 Redis 的安装配置及基本使用教程
Laravel 5.1 分页功能实现及如何自定义分页样式
Laravel 5.1 中的异常处理器和HTTP异常处理实例教程
基于 Laravel 集成的 Monolog 库对日志进行配置和记录
Laravel 5.1 定义事件、事件监听器以及触发事件实例教程
使用 Laravel 5.1 的文件系统对文件进行存储、移动和删除操作
使用 Laravel 5.1 内置的本地化功能轻松实现多语言支持
在 Laravel 5.1 中使用SMTP驱动实现邮件发送（含附件和图片）详细教程
Laravel 队列系列 —— 基于 Redis 实现任务队列的基本配置和使用
Laravel 5.1 中 Session 数据存储、访问、删除及一次性Session实例教程
Laravel 5.1 测试系列 —— PHPUnit 安装及简单单元测试示例
实战篇
2篇文章
使用 Laravel 纯手工打造一个简单的电子商务网站（一） —— 后台新增商品及前台显示
使用 Laravel 纯手工打造一个简单的电子商务网站（二） —— 用户认证及购物车功能实现
图书
Laravel 5.1 基础教程
服务篇
Laravel中运行Gulp任务的利器 —— Laravel Elixir简介及入门教程
Laravel中运行Gulp任务的利器 —— Laravel Elixir简介及入门教程
由 学院君 创建于7年前, 最后更新于 2年前
版本号 #3
17151 views
5 likes
0 collects
对现代开发者而言，即使是构建一个很简单的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细节可查看其官方文档。
Laravel
Elixir
CSS
JavaScript
Gulp
Node.js
Less
编译
压缩
CoffeeScript
点赞
取消点赞
收藏
取消收藏
赞赏
分享到以下平台：
<< 上一篇:
Laravel 缓存实例教程（二） —— 基于模型+缓存对文章增删改查进行优化
>> 下一篇:
如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap
9 条评论
#1
小胜
评论于 6年前
正在删除评论...
执行npm install报了一大堆警告和错误
#2
学院君
评论于 6年前
正在删除评论...
警告可以忽略 错误要解决 Windows的话先安装下对应版本的Visual Studio Express For Windows Desktop
#3
封心
评论于 6年前
回复 #13
正在删除评论...
Visual Studio Express For Windows Desktop要几个g，有没有其他解决办法？
#4
封心
评论于 6年前
正在删除评论...
唉，放弃了，装了一晚上都没安装成功，又是装python 又是装Visual Studio Express For Windows Desktop，结果运行npm install还是出错，而且就这下载的Laravel Elixir目录都200多m，算了算了 对它无爱了
#5
学院君
评论于 6年前
正在删除评论...
不一定非要用这个 你可以直接把相应js，css文件拷贝到public目录下能访问即可
#6
封心
评论于 6年前
正在删除评论...
是啊 所以决定不用这个了
用不用倒是其次的，搞得这么麻烦，这是就没打算让人用吗
#7
学院君
评论于 6年前
正在删除评论...
windows环境就是这样 mac上可能好点
#8
排骨
评论于 6年前
正在删除评论...
为什么在gulp watch的时候js一旦有错误就会自动终止watch，如何避免终止watch
#9
小呆呆
评论于 5年前
正在删除评论...
Message:
(notify-send:40631): GLib-GObject-CRITICAL **: g_object_unref: assertion `G_IS_OBJECT (object)' failed
运行gulp后报这个是为啥？环境LNMP环境
登录后即可添加评论
升级为学院君订阅用户(新年优惠🎁)
内容导航
1、Gulp是什么？
安装Gulp
2、安装Elixir
3、Elixir快速入门
创建第一个Elixir任务
编译JavaScript资源
其他Elixir任务
相关推荐
Laravel Elixir
Laravel 5.1 中文文档
服务
如何在 Laravel 5.1 中使用 Laravel Elixir 集成安装 Bootstrap
Laravel 5.1 基础教程
服务篇
Laravel Elixir 深入探究（一）：Elixir配置选项、前端资源文件编译及合并
Laravel 5.1 基础教程
服务篇
集成前端资源：Laravel Elixir
Laravel 5.2 中文文档
服务
编译资源（Laravel Elixir）
Laravel 5.3 中文文档
JavaScript & CSS
回到顶部
2022 基于 Laravel 6 构建
关于学院
订阅服务
友情链接
站点地图
本站 CDN 加速服务由又拍云赞助