Question

连接和缩小模块的好策略是什么？

我想接受这个：

<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="bower_components/satellizer/satellizer.min.js"></script>
etc...

并且这样做：

<script src="js/all_bower_components.js"></script>

我正在为我的其他js文件运行这个构建过程，这些文件被连接并缩小为main.js，但这很容易，因为我自己的JS文件的文件夹结构是相对可预测的。但我的凉亭组件不是：

bower_components/
   angular/
       angular.js
       index.js
       other random js files which aren't the ones I need
   jquery/
       dist/
           jquery.js
       src/
           bunch of other crap

我正在尝试这样做：遍历所有组件和子文件夹，只需搜索.js个文件......但同样，这可能包括我不需要的内容，例如Angular中的index.js ：

gulp.task('modules', function() {
    return gulp.src(['bower_components/**/*.js'])
        .pipe(concat('modules.js'))
        .pipe(uglify())
        .pipe(gulp.dest('public/js'));
});

有什么想法吗？

Answer 1

你试过main-bower-files吗？这个gulp插件将通过查看组件的bower.json文件来捕获所有基本的bower .js和.css，这些文件要抓取哪些文件（列为main）。您可以覆盖对插件的调用中的默认值，以满足与bower.json配置不匹配的任何要求。我发现这对于捆绑vendor.js和vendor.css非常有用，适用于依赖性很强的应用程序。

祝你好运！

gulp构建任务 - 连接和缩小模块

1 个答案: