Laravel_Elixir_gulp任务利器安装
目录
1.说明
详细说明暂时省略，后期补充。
小白的角度理解：gulp是管理你的css、js、图片等静态资源文件，包括复制、合并、压缩等功能，elixir是管理和使用gulp处理后的文件的，主要方便开发小组统一管理。。。
2.安装
1）安装gulp
由于Gulp是基于Node.js的，所以安装之前需要先安装Node。不管你使用的是什么操作系统，都可以从Node.js官网下载与之对应的安装包。
检查：
node -v
v4.4.3node是通过命令‘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/css和resources/js目录下，合并后的文件位于public/css和public/js下，而且合并后的文件保存为all.css和all.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');
});
