Gulp

Question

我正在做一个项目，其中有一个 vendor 目录，其中包含相当多的库，然后是 app/js 目录中的所有应用程序特定源。我想使用 gulp 来缩小单个文件中的所有内容以维护依赖关系。我找不到合适的方法。

示例 - jQuery UI 和 Bootstrap 都需要在它们之前加载 jQuery。我如何在我的 gulp 任务中指定它？

我知道的一种方法是向 gulp.src() 方法传递一个路径数组，它会按特定顺序发出文件，但对我来说这似乎很不自然。

var paths = ['vendor/jquery.min.js', 'vendor/jquery-ui.min.js', 'vendor/bootstrap.min.js']
gulp.task('scripts', function(){
    gulp.src(paths)
        .pipe(concat('all.min.js'))
        ...
        ...
        .pipe(gulp.dest('build/js/all.min.js'))

})

对于大量的库，以这种方式包含特定文件的路径并将其传递给 .src() 方法似乎并不正确。我怎样才能更好地管理它？ bower 能以某种方式使用吗？

Answer 1

正如您所说，最简单的方法是将它们添加到一个数组中，然后 gulp.src

gulp.src([
    'public/assets/vendor/jquery/dist/jquery.js',
    'public/assets/vendor/bootstrap/dist/js/bootstrap.js',
    'public/assets/js/my_scripts.js'
    ])

因此您只需添加要包含的新 js 文件的路径即可。

另一种可能是https://github.com/austinpray/asset-builder

这是一个带有 asset-builder 的示例 gulpfile https://github.com/roots/sage/blob/master/gulpfile.js

另一种可能性是自动捆绑您的 bower 文件中的文件。 https://truongtx.me/2014/07/18/using-bower-with-gulp/

Gulp - 管理库依赖项

Gulp - Managing library dependencies

javascript

dependencies