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

gulp build task - concat and minify modules

本文关键字：缩小 模块 连接 构建 任务 Gulp      更新时间：2023-09-26

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

我想要这个:

<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'));
});

任何想法吗?

您试过main-bower-files了吗?这个gulp插件将通过查看组件的包来捕获所有的基础包。js和。css。要抓取哪些文件的json文件(列为main的文件)。您可以在对插件的调用中覆盖默认值，以满足不匹配的任何需求。json配置。我发现这对于绑定vendor.js和vendor.css非常有用。

祝你好运!

相关文章：