elixir 规格_使用Elixir轻松在Laravel中运行Gulp任务

elixir 规格

As a developer(frontend or backend), you might have probably or still use a task runner, for those who haven't used a task runner, a task runner is simply an automated tool for performing repetitive tasks like concatenation, minification, unit testing, linting e.t.c.

作为开发人员（前端或后端），您可能已经或仍在使用任务运行程序，对于那些尚未使用任务运行程序的人，任务运行程序只是用于执行重复任务（例如级联，最小化，单元测试）的自动化工具，棉绒等

There are awesome task runners on github available for everyone to use, but out of all the task runners, gulp and grunt really stand out as they are very popular, mature and mostly used by developers.

github上有很棒的任务运行器可供所有人使用，但是在所有任务运行器中， gulp和grunt确实脱颖而出，因为它们非常流行，成熟并且主要由开发人员使用。

For this article, gulp is a requirement and if you are new to gulp, this article should be extremely useful.

对于本文来说，gulp是必需的，如果您不熟悉gulp，那么本文将非常有用。

长生不老药 (Elixir)

When developing applications, there are many repetitive processes involved:

开发应用程序时，涉及许多重复过程：

• write a script
  写剧本
• test your script
  测试你的脚本
• write a sass file
  写一个sass文件
• compile it
  编译它
• compress files and more
  压缩文件等

Sure we could write tasks with gulp and they do the job just fine, but as of Laravel 5, a new feature named Elixir has been added to Laravel.

当然，我们可以用gulp编写任务，并且可以很好地完成工作，但是从Laravel 5开始，已向Laravel添加了一个名为Elixir的新功能。

Elixir developed by Jeffrey Way is a task runner built as a wrapper around gulp, it comes with basic tasks like:

由Jeffrey Way开发的Elixir是一个任务运行器，是围绕gulp进行包装的，它具有以下基本任务：

• compilation of sass, less and coffee files
  sass ， less和coffee文件的汇编
• concatenation
  级联
• unit testing and more
  单元测试等

Elixir is also open for extension as you could also define your gulp tasks and add it to elixir.

Elixir也可以扩展，因为您还可以定义gulp任务并将其添加到elixir中。

组态 (Configuration)

Although not specified in the official documentation, elixir is configurable, due to the fact that elixir exposes a config object on the elixir object. A few of the configurable options include

尽管在正式文档中未指定，但由于elixir在elixir对象上公开了一个配置对象，因此elixir是可配置的 。 一些可配置选项包括

• production - checks if the current environment is set to production, defaults to true
  生产 -检查当前环境是否设置为生产，默认为true
• assetsDir - assets directory path, default is resources/assets
  资产目录 -资产目录路径，默认为资源/资产
• cssOutput - default output directory for all css files, default is public/css
  cssOutput -所有css文件的默认输出目录，默认为public / css
• jsOutput - default output directory for all js files, default is public/js
  jsOutput -所有js文件的默认输出目录，默认为public / js
• sourcemaps - if sourcemaps should be generated, default is true
  源图 -如果应生成源映射，则默认为true

资产编制 (Assets Compilation)

To use elixir, from the root of your Laravel application run the command:

要使用长生不老药，请从您的Laravel应用程序的根目录运行以下命令：

npm install

There should be a package.json file with the dependencies (gulp and laravel-elixir) listed.

应该有一个列出了依赖项（gulp和laravel-elixir）的package.json文件。

少和无礼 (Less and Sass)

In your gulpfile.js you should see something like this to start.

在您的gulpfile.js中，您应该看到类似的内容开始。

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.less('app.less');
});

All this simply does is compile a less file named app.less which is located in resources/assets/less. After compilation, the file is stored in public/css.

所有这些简单的操作就是编译一个名为app.less的较少文件，该文件位于resources / assets / less中 。 编译后，文件存储在public / css中 。

To compile sass files you would basically do the same thing but instead of storing the sass file in resources/assets/less you would store it in resources/assets/sass folder and compile it using:

要编译sass文件，您基本上会做同样的事情，但是与其将sass文件存储在resources / assets / less中，不如将其存储在resources / assets / sass文件夹中并使用以下命令进行编译：

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

You could also compile .sass files. If you prefer using ruby sass instead of libsass you would just change the method on the mix object from sass to rubySass, but for this to work you'll need sass installed on your computer.

您也可以编译 .sass 文件。 如果您更喜欢使用ruby sass而不是 libsass 您只需更改 方法 在来自的混合对象上 ass 至 Ruby ，但要执行此操作，您需要在计算机上安装sass。

咖啡脚本 (Coffeescript)

The mix object also exposes a coffee method that compiles coffee files in resources/assets/coffee and saves them in public/js folder.

的 混合 对象也暴露出 咖啡 在其中编译咖啡文件的方法 资源/资产/咖啡 并将它们保存在 公共/ js 夹。

Compilation of multiple files is also possible, all you need do is pass an array containing names of files to compile

也可以编译多个文件，您需要做的就是传递一个包含文件名的数组进行编译

mix.sass(['awesome.scss', 'legendary.scss']);
mix.coffee(['awesome.coffee', 'legendary.coffee']);

方法链 (Method chaining)

Method chaining is also allowed if you want to use multiple tasks at once.

如果要一次使用多个任务，也可以使用方法链接。

mix.sass('legendary.scss')
    .coffee('legendary.coffee');

供应商前缀 (Vendor Prefixes)

Furthermore, you do not need to worry about CSS vendor prefixes, as elixir comes with gulp-autoprefixer, so if you write a CSS property that still requires vendor prefixes it automatically adds them for you.

此外，您无需担心CSS供应商前缀，因为elixir带有gulp-autoprefixer ，因此，如果编写CSS属性仍然需要供应商前缀，它将自动为您添加前缀。

If you wrote something like this:

如果您这样写：

a:hover {
    transform: scale(1.1);
}

you would get:

您会得到：

a:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
}

Before rounding up on assets compilation, you should know that the less, sass, rubySass and coffee functions all take in three parameters

在进行资产汇总之前，您应该知道 减 ， ass ， Ruby 和 咖啡 所有功能均接受三个参数

• Source: The name of the file or an array of files to compile.
  源 ：要编译的文件或文件数组的名称。
• Output: The output directory to save the compiled files.
  Output ：保存编译文件的输出目录。
• Options: Configurable options for compilation depending on the plugin used e.g options for coffee compilation would be options you would use for gulp-coffee plugin.
  选项 ：根据所使用的插件，可配置的编译选项，例如，用于咖啡编译的选项将是您用于 口香糖咖啡 插入。

级联 (Concatenation)

You can also concatenate files with elixir, to combine your stylesheets just use

您还可以使用elixir连接文件，以组合样式表，仅需使用

mix.styles([
    'module1.css',
    'module2.css'
]);

By default, files are combined from resources/css directory, the combined files are then stored in public/css and the result of the combination is saved as all.css.

默认情况下，文件从 资源/ CSS 目录，然后将合并的文件存储在 公共/ css 合并结果另存为 all.css 。

The same is true for JavaScript files with only a few exceptions, the method on the mix object is named scripts the source directory is resources/js and destination is public/js and the output file is named app.js.

对于JavaScript文件，只有少数例外情况也是如此，mix对象上的方法被命名为 剧本 源目录是 资源/ js 目的地是 公共/ js 并且输出文件名为 app.js 。

mix.scripts([
    'module1.js', 'module2.js'
]);

更改输出文件 (Changing Output File)

To change the name of the output file, you pass in a second parameter to the styles or scripts method

要更改输出文件的名称，请将第二个参数传递给 样式 要么 剧本 方法

mix.scripts(
    ['module1.js', 'module2.js'],
    'path/to/output/file.js'
);

更改源目录 (Change Source Directory)

By default, elixir will look into the resources/ folder. To change the source directory, you pass in a third parameter with the path to the directory.

默认情况下，长生不老药会调查 资源/ 夹。 要更改源目录，请传入第三个参数以及目录路径。

mix.scripts(
    ['module1.js', 'module2.js'],
    'path/to/output/file.js',
    'path/to/source'
);

The mix object also exposes the other methods for combining files in a directory, to combine all css files in a directory

的 混合 对象还公开了用于合并目录中文件的其他方法，以合并目录中的所有css文件

mix.stylesIn('public/css');

and for javascript files

和JavaScript文件

mix.scriptsIn('public/js');

版本控制或散列 (Versioning or Hashing)

When you fix a javascript or css file and you push the changes to your server, some users instantly get the update while others don't due to the fact that their browser still has the previous script cached, to fix this problem developers always change the name of the file either by appending a query string to the file or using random strings to name the file, this process is known as hashing or versioning.

当您修复JavaScript或CSS文件并将更改推送到服务器时，某些用户会立即获得更新，而其他用户则不会因为他们的浏览器仍然缓存了先前的脚本而将其更新，以解决此问题，开发人员总是会更改通过将查询字符串附加到文件或使用随机字符串命名文件来命名文件，此过程称为哈希或版本控制 。

Elixir also includes hashing, to hash a file you simply:

Elixir还包括散列，可以简单地对文件进行散列：

mix.version('path/to/file');

all files to be hashed no matter the path provided is relative to the public folder. Hashing of multiple file is also supported, to hash multiple files, pass in an array of files.

无论要提供的路径是相对于 上市 夹。 还支持散列多个文件，以散列多个文件，传入文件数组。

mix.version(['path/to/file1', 'path/to/file2']);

After hashing, all files are saved in public/build and a unique hash is placed between the filename and the file extension.

散列后，所有文件都保存在 公共/建筑 并且在文件名和文件扩展名之间放置一个唯一的哈希。

mix.version('css/main.css'); // public/build/css/main-39d5f9a7.css
mix.version('js/app.js'); // public/build/js/app-78efbae6.js

To always use the latest versioned/hashed file from your blade templates or just from any php file, Laravel provides a helper function elixir. Without this function you would have to manually type in the name of the hashed file every time you compile an asset.

为了始终使用刀片模板或任何php文件中的最新版本/已哈希文件，Laravel提供了帮助功能 长生不老药 。 如果没有此功能，则每次编译资产时都必须手动输入哈希文件的名称。

<link rel="stylesheet" href="{{ elixir('css/main.css') }}" />
<script src="{{ elixir('js/main.js') }}"></script>

运行测试套件 (Running your test suites)

By default elixir comes with two tasks for your test suites. One for phpunit and the other for phpspec, in your gulpfile phpUnit method is called on the mix object for phpunit test suite

默认情况下，elixir为您的测试套件附带了两个任务。 一为 phpunit 而另一个 phpspec ， 在你的 gulp文件 phpUnit 方法被调用 混合 的对象 phpunit 测试套件

mix.phpUnit();

while for phpspec

而为 phpspec

mix.phpSpec();

执行灵药任务 (Execute elixir tasks)

To run the tasks listed above, you can simply run

要运行上面列出的任务，您只需运行

gulp

From the root of your Laravel application, this should run all the tasks defined in your gulpfile. Instead of running gulp everytime you make a change you can just run

从Laravel应用程序的根目录开始，这应该运行您在 gulp文件 。 而不是跑步 吞咽 每次进行更改时，您都可以运行

观察文件是否有变化 (Watch Files for Changes)

gulp watch

to watch the files for changes, so whenever you save a sass file, it is automatically compiled, if any test task is defined, whenever you save your php file your configured test suite is run.

监视文件的更改，因此，每当您保存sass文件时，都会自动编译该文件，如果定义了任何测试任务，则每当您保存php文件时，都会运行配置的测试套件。

There is also an optional --production flag you can pass to the gulp command to trigger asset optimization like minification.

还有一个可选的--production标志，您可以将其传递给gulp命令以触发资产优化（如缩小）。

执行一个任务 (Execute a Single Task)

Sometimes you might just want to run a single task, and for style compilation run

有时您可能只想运行一个任务，然后运行样式编译

gulp styles

for compilation of coffeescript files

用于编译coffeescript文件

gulp scripts

for your test suites run

为您的测试套件运行

gulp tdd

this does not only run your test suite, it also watches your files for changes.

这不仅可以运行测试套件，还可以监视文件中的更改。

自定义任务和扩展 (Custom Tasks and extensions)

It is very evident that elixir comes with some helpful tasks but, not all the required ones for example there is no task for stylus compilation, or image compression, but other users have developed tasks as packages for these purposes, to define your own task, you simply need to extend elixir.

很明显elixir附带了一些有用的任务，但是并非所有必需的任务，例如，没有用于手写笔编译或图像压缩的任务，但是其他用户为此目的将任务开发为软件包，以定义您自己的任务，您只需要扩展长生不老药。

elixir.extend(nameOfTask, function(arguments) {
    // define a gulp task here
    // setup watcher for certain files which is optional
    // queue the gulp task
});

Let's build a simple task that logs the current date to the console.

让我们构建一个简单的任务，将当前日期记录到控制台。

var gulp = require('gulp'),
    elixir = require('laravel-elixir');

elixir.extend('logDate', function() {
    gulp.task('date_logger', function() {
        console.log(new Date());
    });

    // this.registerWatcher('date_logger', '/**/*.js');
    return this.queueTask('date_logger');
});

To use the above task, from your mix object, call

要使用上述任务，请从 混合 对象，呼叫

mix.logDate();

and if the watcher is uncommented, you can run

如果观察者没有评论，则可以运行

gulp watch

From the command line and whenever a file with js extension is saved the logDate task is run.

从命令行以及任何时候使用 js 扩展名已保存 logDate 任务运行。

结论 (Conclusion)

Gulp is a powerful tool on its own and Elixir only makes using it even easier. Add in the Laravel goodness like the helper functions and Elixir is a great tool to integrate Gulp into your Laravel projects.

Gulp本身就是一个功能强大的工具，Elixir仅使使用它变得更加容易。 加上辅助功能之类的Laravel优势，Elixir是将Gulp集成到Laravel项目中的好工具。

Give it a try and let us know how you like it in the comments.

试试看，让我们在评论中告诉您您的喜欢程度。

翻译自: https://scotch.io/tutorials/run-gulp-tasks-in-laravel-easily-with-elixir

elixir 规格