Laravel_Elixir_gulp任务利器安装

目录

  1. 说明
  2. 安装
    1. 1安装gulp
    2. 2安装Elixir
    3. 3Elixir快速入门
    4. 4合并cssjs
    5. 5版本控制version
    6. 6复制copy
    7. 7方法串联

1.说明

详细说明暂时省略,后期补充。
小白的角度理解:gulp是管理你的css、js、图片等静态资源文件,包括复制、合并、压缩等功能,elixir是管理和使用gulp处理后的文件的,主要方便开发小组统一管理。。。

2.安装

1)安装gulp

由于Gulp是基于Node.js的,所以安装之前需要先安装Node。不管你使用的是什么操作系统,都可以从Node.js官网下载与之对应的安装包。
检查:

node -v
v4.4.3

node是通过命令‘npm’来安装第三方模块库的,使用npm来安装Gulp:

npm install -g gulp

安装完检查:

gulp -v
[15:35:17] CLI version 3.9.1

2)安装Elixir

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

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "laravel-elixir": "^4.0.0",
    "bootstrap-sass": "^3.0.0"
  }
}

node的npm包管理器是通过读取该文件进行安装的。
当你需要新增弄得模块依赖的时候,将其添加进去,随后执行以下命令即可安装成功。

npm install

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

3)Elixir快速入门

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

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

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

// @import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

说明:这行命令是laravel是否支持bootstrap前端框架样式,默认是不支持的,是被注释掉的,如果你的项目需要bootstrap支持就打开注释,然后执行以下命令:

gulp

在项目根目录下运行gulp命令来执行定义在elixir方法中的任务。

通过执行gulp命令,会读取你在gulpfile.js中定义的任务,这里会执行你的这一行命令,把bootstrap框架对应的css样式下载下来,并保存到public/css/app.css文件里。

在视图模板中使用:

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

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

gulp --production

4)合并(css、js)

Elixir强大的功能合并,换一个角度说,如果被合并的文件是一个文件,也可以理解为复制文件了,就看你怎么用了,呵呵。

默认情况下,要合并的源文件位于resources/cssresources/js目录下,合并后的文件位于public/csspublic/js下,而且合并后的文件保存为all.cssall.js

合并主要用来合并css、js,语法分别为:

mix.styles([
    ‘test1.css‘,
    ‘test2.css‘
]);
mix.scripts([
    ‘test1.js‘,
    ‘test2.js‘
]);

合并,同时改变输出文件路径和源文件路径

mix.scripts(
    [‘test1.js‘, ‘test2.js‘], // 原文件名
    ‘public/js/front.js‘,     // 输出文件路径
    ‘resources/front/js‘      // 源文件路径
);

合并某个目录下的文件

mix.stylesIn(‘public/css‘);   // 合并public/css目录下所有css文件
mix.scriptsIn(‘public/js‘);   // 合并public/js目录下所有js文件

5)版本控制(version)

当前端资源(css、js等)更新后,强制客户浏览器加载最新版本,Elixir使用version方法为你处理这种情况。
version方法接收相对于public目录的文件名,附加唯一hash到文件名,从而实现缓存刷新。例如,生成的文件名看上去是这样——all-89ws5fg4.css
语法:

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

在视图文件中使用(elixir):
生成版本文件后,可以在视图中使用Elixir全局的PHP帮助函数elixir方法来加载相应的带hash值的前端资源,elixir函数会自动判断hash文件名。

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

给多个文件添加版本控制(version):
方法:传递一个数组到version方法

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

在视图文件中使用(elixir):
一旦文件被加上版本号,就可以使用帮助函数elixir来生成指向该hash文件的链接。记住,你只需要传递没有hash值的文件名到elixir方法。该帮助函数使用未加hash值的文件名来判断文件当前的hash版本:

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

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

6)复制(copy)

复制文件到新的位置

elixir(function(mix) {
    mix.copy(‘vendor/foo/bar.css‘, ‘public/css/bar.css‘);  //第一个参数为源文件,第二个为目标文件
});

将整个目录都复制到新的位置

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

7)方法串联

elixir(function(mix) {
    mix.version([‘css/all.css‘, ‘js/app.js‘])
        .copy(‘vendor/foo/bar.css‘, ‘public/css/bar.css‘)
        .copy(‘vendor/package/views‘, ‘resources/views‘);
});
时间: 2024-08-05 14:52:27

Laravel_Elixir_gulp任务利器安装的相关文章

MVC底层原理

窥探ASP.Net MVC底层原理 实现跨越Session的分布式TempData 1.问题的引出 我相信大家在项目中都使用过TempData,TempData是一个字典集合,一般用于两个请求之间临时缓存数据或者页面之间传递消息.也都知道TempData是用Session来实现的,既然是用Session来实现的,那么模式就是线程模式,这样的Session是没法用到分布式系统中的,那么在多台机器上部署,怎么做到Session在多台机器中共存,这就涉及到分布式存储.那该如何实现TempData的分布

在ASP.Net MVC 中如何实现跨越Session的分布式TempData

Hi,guys!Long time no see! 1.问题的引出 我相信大家在项目中都使用过TempData,TempData是一个字典集合,一般用于两个请求之间临时缓存数据或者页面之间传递消息.也都知道TempData是用Session来实现的,既然是用Session来实现的,那么模式就是线程模式,这样的Session是没法用到分布式系统中的,那么在多台机器上部署,怎么做到Session在多台机器中共存,这就涉及到分布式存储.那该如何实现TempData的分布式存储?在讲如何实现时,先给大家

Cadence仿真利器,Cadence SI / PI Analysis – Sigrity安装及破解指南

Sigrity提供了丰富的千兆比特信号与电源网络分析技术,包括面向系统.印刷电路板(PCB)和IC封装设计的独特的考虑电源影响的信号完整性分析功能. Sigrity分析技术与Cadence Allegro和OrCAD设计工具的组合将会提供全面的前端到后端的综合流程,帮助系统和半导体公司提供高性能设备,应用千兆比特接口协议,例如DDR和PCI Express. Cadence Sigrity 安装 全新安装安装 Cadence Sigrity 之前需要先安装Cadence Allegro SPB和

Laravel 调试器 Debugbar 和 数据库导出利器 DbExporter 扩展安装 及 注意事项

一.Debugbar 安装 参考:Laravel 调试利器 -- Laravel Debugbar 扩展包安装及使用教程 的"2.安装"部分 二.DbExporter 安装 参考:Laravel 扩展推荐: DbExporter 逆向 Migration 和 db:seed 注意: 1.默认安装 1.1 版本.建议安装最新的 dev-master 版本: composer require nwidart/db-exporter:dev-master 2.安装好之后,访问网站可能会报错.

Mac OS X 程序员利器 – Homebrew安装与使用

Mac OS X 程序员利器 – Homebrew安装与使用 Homebrew安装与使用 什么是Homebrew? Homebrew is the easiest and most flexible way to install the UNIX tools Apple didn’t include with OS X. 我们能够通过终端方便的使用它安装管理苹果没有自带的UNIX相关工具软件. 如何安装? 参考GitHub地址:https://github.com/mxcl/homebrew/w

运维监控利器Nagios之:安装nagios

一.安装前准备 (1)创建nagios用户和用户组 [[email protected] ~]#useradd -s /sbin/nologin nagios [[email protected] ~]#mkdir /usr/local/nagios [[email protected] ~]#chown –R  nagios.nagios /usr/local/nagios (2)开启系统sendmail服务 在nagios监控服务器上开启sendmail服务的主要作用是让nagios在检测到

sql编程利器,Sql Prompt下载及安装方法

Sql Prompt只能提示及其格式化用起来非常方便: 推荐网址:www.4-yecao.com 免费下载地址:http://download.csdn.net/detail/caizz520/4557385 1. 下载SQL Prompt 5.3.4.1,是个压缩包,里面有三个文件 免登录免积分下载地址:http://download.csdn.net/detail/caizz520/4557385 1) 下载完成后,解压得到下面三项.一个是注册教程doc,一个是注册机keygen,一个是官方

iOS-UI分析利器--Reveal安装破解以及简单使用

前言:在 iOS 开发中,我们有时很希望有一款类似 Web 开发中的 UI Debug 工具(例如:Firebug),让我们能够实时查看 UI 的结构,还可以实时更改某个 UIView 的位置和大小的相关属性值查看效果.这里我们发现原来真有这么一款强大的工具存在,他就是 Reveal.(虽然现在的 Xcode 版本有「Capture View Hierarchy」功能,但支持的功能还只是基础的查看 UI 结构,对比 Reveal 来说,就显得逊色多了). 下载需要的破解文件和从官网直接下载的Re

项目管理利器-Maven(Windows安装)

什么是Maven? 安装Maven环境: 下载地址:https://maven.apache.org/download.cgi Maven3.3+JDK1.7以上版本 下载windows版本 解压到本地即可,对其中的文件夹进行讲解 bin目录:包含mvn的运行脚本 boot目录:包含一个类加载器的框架 conf目录:是配置文件目录 lib目录:包含maven平时所用到的所有类库 配置环境变量 M2_HOME:安装家目录D:\maven path:D:\maven\bin 检查安装是否成功 m2