更改 Laravel 的 Gulp/Elixir `watch` 任务答案

【问题标题】：Changing Laravel's Gulp/Elixir `watch` task更改 Laravel 的 Gulp/Elixir `watch` 任务
【发布时间】：2015-09-17 05:02:16
【问题描述】：

我想在我的新项目中使用 Laravel 的 Elixir 和 Semantic UI。

在 Semantic UI 文档中，他们建议如何将他们的 gulp 任务包含到您当前项目的 gulpfile 中。在 Laravel 中，他们（简要地）建议如何扩展 Elixir。但是如何在watch 命令中包含另一个 gulp 任务？

目前我正在运行gulp watch watch-ui，但我想在watch 中包含watch-ui 任务。有可能吗？

这是我目前的gulpfile.js：

var gulp     = require('gulp');
var elixir   = require('laravel-elixir');
var semantic = {
  watch: require('./resources/assets/semantic/tasks/watch'),
  build: require('./resources/assets/semantic/tasks/build')
};

gulp.task('watch-ui', semantic.watch);
gulp.task('build-ui', semantic.build);

elixir(function(mix) {
  mix.task('build-ui');
});

【问题讨论】：

标签： laravel laravel-5 gulp semantic-ui gulp-watch

【解决方案1】：

如果我正确理解您的问题，您想在语义 UI 任务中添加一些内容。但是，它们从未真正定义任务，而只是您可以分配给任务的功能。

您实际上不能在 semantic watch 任务中包含任何内容，除非您想修补文件，但您可以添加两个监视任务并确保它们都运行。

下面的代码应该能让你做你需要做的事情：

var gulp     = require('gulp');
var elixir   = require('laravel-elixir');
var semantic = {
  watch: require('./resources/assets/semantic/tasks/watch'),
  build: require('./resources/assets/semantic/tasks/build')
};

// Define a task for the semantic watch function.
gulp.task('semantic-watch', semantic.watch);

// Define the main watch task, that is depended on the semantic-watch, this will run both watch tasks when you run this one.
gulp.task('watch', ['semantic-watch'], function() {
    // Do your own custom watch logic in here.
});

gulp.task('build-ui', semantic.build);

elixir(function(mix) {
  mix.task('build-ui');
});

您可以在此处查看语义 UI 是如何实际定义其watch 任务应使用监视功能的：https://github.com/Semantic-Org/Semantic-UI/blob/master/gulpfile.js#L46

【讨论】：

【解决方案2】：

如果您的意思是是否可以通过 Elixir API 添加自定义观察者逻辑，那么简短的回答是否...

...但是，由于 Elixir 是 Gulp 之上的包装器，您可以直接修改 gulp.tasks 以获得相同的结果：只需将 Elixir 定义的 watch 任务重命名为否则，然后创建您自己的 watch 任务来运行 Elixir 的手表和 Semantic UI 手表：

gulp.tasks['watch-elixir'] = gulp.tasks.watch;

gulp.task('watch', ['watch-elixir', 'watch-ui']);

在 Elixir 本身中，最接近自定义观察者的是 mix.task() 的第二个参数，它采用一组文件路径来观察并在更改时重新触发任务。所以，虽然你可以做类似...

mix.task('build-ui', './resources/assets/semantic/src/**/*')

...这将在每次更改时触发完全重建，这与语义提供的更精细的watch 任务不同。

【讨论】：