8

我有一个名为 build 的 gulp 任务，它使用子任务将源代码的各个部分移动到构建文件夹：

gulp.task('build', ['jshint', 'templates', 'app', 'components', 'stylesheets', 'assets', 'index']);

gulp.task('app', ['clean-app'], function(){
    return gulp.src(config.inputs.app)
        .pipe(gulp.dest(config.outputs.root));
});

然后我想在 --env=prod 时添加一些额外的步骤，我用 gulp-if 做了：

gulp.task('app', ['clean-app'], function(){
    return gulp.src(config.inputs.app)
        **.pipe(gulpif(env === 'prod', uglify()))**
        .pipe(gulp.dest(config.outputs.root));
});

这工作正常。我要做的最后一件事是 gulp-concat 来自这些子任务的所有 js 文件。我认为我可以使用 gulpif 从每个任务返回一个流，而不是去 gulp.dest，但我仍然需要以某种方式有条件地运行一个任务来组合这些流和 concat。

有一个更好的方法吗？

4

2 回答 2

14

与其将所有内容都塞进一个构建任务中，不如为compileor设置一个单独的任务build-prod。这将使您的代码更易于维护，并且不那么脆弱。

您仍然可以通过将任务封装在函数中来重用部分任务：

function jsBaseTasks() {
    return gulp.src(config.inputs.app);
}

gulp.task('build', function() { jsBaseTasks().pipe(...); // etc }

或者，如果您有大量可重用的代码，您可以使用lazypipe来构建它们并根据需要使用它们：

var jsProcess = lazypipe()
                    .pipe(jshint, jshintOptions)
                    .pipe(/* other gulp plugin */);

gulp.task('build', function() { gulp.src(...).pipe(jsProcess()).pipe(gulp.dest()); }

另外，我认为将您的生产和开发版本构建到同一位置是一个坏主意。您将在某个时候意外部署开发版本。

我有一个相当大的 gulpfile 可以做到这一点，如果这有助于理解我的意思，但听起来你已经有很多工作要做了。

于 2014-02-06T16:07:02.537 回答
0

一定要把你的任务分解成尽可能多的更小的模块，然后尽可能地遵守 DRY 原则。

在你的情况下。例如，您可能只有一个标准dev任务可以让您启动并运行，并且可能在您开发时运行一些watch任务和通用任务。build当您想为发布部署代码时，您可能有某种选项配置来定义要推送哪些文件以进行发布。除此之外，您可能还会有一个release任务来查看配置文件，然后收集您需要的所有源、进程、concats、uglify 等，然后输出到指定的构建目标。

旁注：现在使用最新版本更容易遵守 DRY 原则，gulp-watch因为您现在可以将数组作为回调函数传递。

我有一些 gulpfiles，如果你需要帮助，我很乐意与你分享。

于 2014-05-02T14:20:02.487 回答