使用gruntjs组合并缩小所有bower库_Gruntjs_Minify_Bower_Grunt Contrib Uglify_Wiredep

使用gruntjs组合并缩小所有bower库

gruntjs

使用gruntjs组合并缩小所有bower库,gruntjs,minify,bower,grunt-contrib-uglify,wiredep,Gruntjs,Minify,Bower,Grunt Contrib Uglify,Wiredep,有没有办法将所有bower安装的库自动合并并缩小为一个文件首先，我尝试了最基本的方法：合并所有子目录中的所有.js文件： uglify: { options: {compress: true}, my_target: { files: { 'vendor.js': ['bower_components/**/*.js'], } } } 但这显然是一个糟糕的方法。由于错误太多，它也不起作用我手动删除了所有的文件，只保留了每个库中的一个（主）文件，并且工

有没有办法将所有bower安装的库自动合并并缩小为一个文件

首先，我尝试了最基本的方法：合并所有子目录中的所有

.js

文件：

uglify: {
    options: {compress: true},
    my_target: { files: {
        'vendor.js': ['bower_components/**/*.js'],
}   }   }

但这显然是一个糟糕的方法。由于错误太多，它也不起作用

我手动删除了所有的文件，只保留了每个库中的一个（主）文件，并且工作正常

有没有一种方法可以自动完成这一切

还有，这样做明智吗？（即，将所有供应商库合并为一个文件）

仅需

我建议结合使用两个优秀的grunt库：Wiredep和Usemin：

Wiredep：在html中自动加载bower.json中标识的所有bower依赖项

Usemin：检测两个comments标签内的所有src，所有源文件在dist文件夹中缩小并连接，下面是使用此包的grunt文件的一个小示例，基于angular to yeoman的生成器这只是grunt的一个简要说明

咕噜声

    wiredep: {
        options: {
            cwd: 'appFolder'
        },
        app: {
            src: ['htmlCollections'],
            ignorePath:  /\.\.\//
        }
    },

    useminPrepare: {
        html: 'htmlCollections',
        options: {
            dest: 'distributionFolder',
            flow: {
                html: {
                    steps: {
                        js: ['concat', 'uglifyjs'],
                        css: ['cssmin']
                    },
                    post: {}
                }
            }
        }
    },

  usemin: {
        html: ['distributionFolder+HtmlFiles'],
        css: ['distributionFolder+cssFiles'],
        js: ['distributionFolder+javascriptFiles']
  }

HTML

<!doctype html>
<html lang="en" ng-app="MobileDev" id="ng-app">
<head>
    <!-- build:css(app) styles/vendor.css -->
    <!-- bower:css -->
            //This gonna be generated for the grunt by dependencies in bower
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css(.tmp) styles/main.css -->
        //All the script inside this gonna be concatened and minified in 
        //the dist folder by the name of main.css
        <link type="text/css" rel="stylesheet" href="styles/app.css"/>
    <!-- endbuild -->
</head>

<body>
    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
        //This gonna be generated for the grunt by dependencies in bower
        //And in distribution all bower components added gonna be minified by usemin in
        //vendor.js
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
        //All the script inside this gonna be concatened and minified in the dist 
        //folder by the name of scripts.js
        <script type="text/javascript" src="scripts/numero1"></script>
        <script type="text/javascript" src="scripts/numero2"></script>
    <!-- endbuild -->

</body>


//这将由bower中的依赖项为grunt生成
//这里面所有的脚本都将在
//名称为main.css的dist文件夹
//这将由bower中的依赖项为grunt生成
//在分发过程中，所有添加的bower组件将由usemin在
//vendor.js
//这里面所有的脚本都会在地图上缩小
//名为scripts.js的文件夹

<!doctype html>
<html lang="en" ng-app="MobileDev" id="ng-app">
<head>
    <!-- build:css(app) styles/vendor.css -->
    <!-- bower:css -->
            //This gonna be generated for the grunt by dependencies in bower
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css(.tmp) styles/main.css -->
        //All the script inside this gonna be concatened and minified in 
        //the dist folder by the name of main.css
        <link type="text/css" rel="stylesheet" href="styles/app.css"/>
    <!-- endbuild -->
</head>

<body>
    <!-- build:js(app) scripts/vendor.js -->
    <!-- bower:js -->
        //This gonna be generated for the grunt by dependencies in bower
        //And in distribution all bower components added gonna be minified by usemin in
        //vendor.js
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
        //All the script inside this gonna be concatened and minified in the dist 
        //folder by the name of scripts.js
        <script type="text/javascript" src="scripts/numero1"></script>
        <script type="text/javascript" src="scripts/numero2"></script>
    <!-- endbuild -->

</body>