gruntjs - 使用 gruntjs 合并和缩小所有 bower 库-6ren

gruntjs - 使用 gruntjs 合并和缩小所有 bower 库

转载作者：行者123 更新时间：2023-12-04 10:00:06

28

4

有没有办法自动将所有 bower 安装的库合并和缩小到 1 个文件中？

首先我尝试了最基本的方法:结合所有 .js来自所有子目录的文件:

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

但这显然是一种不好的做法。由于错误太多，它也不起作用。

我手动删除了所有文件，只保留了每个库拥有的 1 个(主)文件，并且它工作正常。

有没有办法自动完成这一切？

另外，是否建议这样做？ (即将所有供应商库合并到 1 个文件中)

最佳答案

我推荐两个不错的 grunt 库的组合，Wiredep 和 Usemin:

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

Usemin:检测两个注释标签内的所有 src，所有源都被缩小并连接到 dist 文件夹中，下面是使用这个包的 grunt 文件的一个小例子，基于 angular to yeoman 的生成器，这只是一个简短的说明咕噜声

咕噜声

    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>

关于gruntjs - 使用 gruntjs 合并和缩小所有 bower 库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25322326/

28

4

0

文章推荐： Pandas 和 Python3.4 与 Python 2.7 共存

文章推荐： angularjs - Angular UI 路由器中的事件链接/选项卡

文章推荐： angularjs - 在 Angular ui-router 子模板中不起作用

文章推荐： azure - 通过 Azure DocumentDB 中的 ID 访问资源

gruntjs - 是否有 gruntjs 的离线安装程序？
我正在尝试找到一种无需互联网访问即可安装 gruntjs 的方法。有没有办法下载安装程序？堆栈溢出让我很难理解这个问题的格式，我不确定还能写什么。这是一个非常简单的请求。最佳答案有点。您有时需要访
gruntjs - 为什么 "gruntjs"任务运行程序名为 "grunt"
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 8年前关闭。 Improve thi
gruntjs - 何时使用 gruntjs 作为 JavaScript 开发人员
首先我还没有真正理解什么gruntjs确实如此，但我有一些想法。我希望通过了解它的用途和用途，我会明白它的目的。任何人都可以向我解释什么是 gruntjs，为什么使用它，以及它的用途。 Is it b
gruntjs - 使用 gruntjs 合并和缩小所有 bower 库
有没有办法自动将所有 bower 安装的库合并和缩小到 1 个文件中？首先我尝试了最基本的方法:结合所有 .js来自所有子目录的文件: uglify: { options: {compres
gruntjs - gruntjs watch 可以在 grunt.js 文件更改时重新启动吗
当 grunt.js 文件发生更改时，是否可以重新启动 grunt watch 用例:我现在正在构建我的 grunt 进程并不断更改 grunt.js 文件，我必须重新启动 grunt.js 以查看它
gruntjs - 如果找不到文件，如何让 gruntjs 跳过 eslint 任务？
我正在使用带有 grunt-eslint 插件的 grunt。这是一个更大的 grunt 任务的一部分，该任务首先找到更改的文件并对它们执行各种任务。如果没有更改任何 JS 文件(例如，如果我只更改
gruntjs - 警告 : [object Object] is not a PostCSS plugin. 带有自动前缀的 GruntJS
我正在尝试将 PostCSS 插件 autoprefixer 与 grunt 一起使用。我浏览了许多相关的文章和 Stackoverflow 答案，但我仍然收到“警告:[object Object]
gruntjs - 如何从usemin任务中获取输出？
我目前正在使用 usemin 任务来执行 concat 和 uglify 任务。但是，我没有从 concat/uglify 任务中获得任何输出。没有看到任何错误或警告。如何获得结果输出 dist/ap
gruntjs - 检查是否安装了grunt？
我已经安装了Node JS。如何检查是否安装了grunt？它是否安装得井井有条，还是驻留在特定的文件夹中？例如，node -v会告诉我我已安装v0.10.33，但找不到Grunt的任何类似命令。最
gruntjs - 使用Yeoman工作流程在何处添加CSS文件
我使用Yeoman进行了角度设置。在我的main.html(加载到index.html上的 View )下，我在样式文件夹中添加了一个引用的css文件。我用构建注释将其包围起来，以便可以在最小化的同
gruntjs - 如何让Yeoman持续运行测试
当我运行grunt服务器时，将进行文件编辑，并通过livereload刷新浏览器。当我运行grunt测试时，它将运行一次并关闭。可以通过运行来模拟此行为 yo angular --minsafe
gruntjs - 从咕噜咕噜到咕噜咕噜
我目前正在尝试将 Grunt 文件转换为 Gulp 文件。我的第一次尝试是使用一个非常简单的文件，它只运行 JSHint 和 Mocha，并具有监视模式。我的第一个结果是……嗯……令人失望。我遇到了
gruntjs - 如何加载两个同名的grunt任务？
我正在将yeoman用于项目。基本上它可以正常工作，但是在构建过程中，我想将我的images文件夹移动到其他地方。因此，我加载了grunt-contrib-copy任务，这使我可以执行此任务。但不
gruntjs - 在运行任务时将选项传递给艰苦的任务
我以为有办法做到这一点，而我以前偶然发现它。我已经阅读了这些答案，但它们并不是我在说的: Programmatically pass arguments to grunt task? Grunt c
gruntjs - 如何卸载npm包？
我已经使用 sudo npm install grunt 安装了 grunt，但现在无法删除它。我已经尝试过: $ sudo npm uninstall grunt 但它给了我一个警告: npm W
gruntjs - 浏览器同步重新加载缓慢
我正在使用与浏览器同步的grunt插件，它正在工作，但是与实时重新加载相比，它非常慢。保存文件后，浏览器开始刷新页面大约需要3秒钟。我不确定这是否与浏览器同步，本地主机有关，还是浏览器同步的典型行为
gruntjs - 使用一项任务的输出作为另一项任务的输入
我有一个 html 文件，其中包含对 js 文件的引用。我想解析它，提取引用的 js 文件列表，并提供 contrib-concat 或任何其他任务。有没有一种方便的方法可以使用一个 grunt 任务
gruntjs - 无法使用副本写入文件
我收到此错误: Warning: Unable to write file (Error code: EISDIR) 我正在尝试复制目录中的所有文件和子文件夹。当我省略 ** 时，以下内容有效，但我
gruntjs - 是否可以在监视任务之后运行任务？
我有一个基于 PHP 的项目，无法在 grunt-php 上运行。相反，我使用 grunt-exec运行我的 MAMP 服务器进行开发。 exec: { serverup: { comma
gruntjs - phantomjs无法启动
我在我的项目和karma中使用了AngularJS来测试。然后我这样配置 karma : config.set({ basePath: '../', frameworks: ['jas

首页

博学

6Ren·AI

商城

gruntjs - 使用 gruntjs 合并和缩小所有 bower 库