Laravel_Elixir_gulp任务利器安装

Posted 2020-08-16 郑彦彬

目录

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/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‘);
});