javascript - grunt uglify bower_components 文件夹

标签 javascript gruntjs grunt-contrib-uglify

所以我的项目安装了很多插件 bower

所有这些都在它们自己的自定义文件夹中,全部包含在 bower_components 文件夹中

现在我想运行一个 grunt 脚本,它基本上接受所有这些并对它们进行 uglify

所以我创建了以下脚本:

    module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        copy: {
            dist: {
                files: [ {src: 'index.html', dest: 'dist/index.html'} ]
            }
        },

        'useminPrepare': {
            options: {
                dest: 'dist'
            },
            html: 'index.html'
        },

        usemin: {
            html: ['dist/index.html']
        }
    });

    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-usemin');

    grunt.registerTask('default', ['useminPrepare', 'copy', 'concat', 'uglify', 'usemin']);
};

取自另一个SO question

但是,每当我运行它时,我都会收到以下警告/错误:

No "concat" targets found. Warning: Task "concat" failed. Use --force to continue. Aborted due to warnings.

谁能告诉我我做错了什么?

我的 index.html 的示例:

    <!DOCTYPE html>
<html lang="en" data-ng-app="app" ng-controller="AppCtrl">
<head>
    <script src="js/newrelic.js"></script>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

    <!-- remove browser caching -->
    <meta http-equiv="cache-control" content="max-age=0"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/>
    <meta http-equiv="pragma" content="no-cache"/>

    <!-- Favicons start -->
    <link rel="icon"
          href="{{ app.settings.favicon ? 'user_resources/organization/' + app.settings.org_id + '/16x16-favicon.ico' :  'img/learning_bank/favicon.ico' }}"
          type="image/x-icon">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <!-- hide top bar in mobile safari-->
    <!--<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> translucent top bar -->
    <link rel="shortcut icon" href="{{ app.settings.favicon ? 'user_resources/organization/' + app.settings.org_id + '/16x16-favicon.ico' :  'img/learning_bank/favicon.ico' }}" type="image/x-icon">
    <!-- For third-generation iPad with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ app.settings.favicon ? 'user_resources/organization/' + app.settings.org_id + '/144x144-favicon.png' :  'img/learning_bank/144x144-favicon.png' }}"/>
    <!-- For iPhone with high-resolution Retina display: -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ app.settings.favicon ? 'user_resources/organization/' + app.settings.org_id + '/114x114-favicon.png' :  'img/learning_bank/114x114-favicon.png' }}"/>
    <!-- For first- and second-generation iPad: -->
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ app.settings.favicon ? 'user_resources/organization/' + app.settings.org_id + '/72x72-favicon.png' :  'img/learning_bank/72x72-favicon.png' }}"/>
    <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
    <link rel="apple-touch-icon-precomposed" sizes="57x57"
          href="{{ app.settings.favicon ? 'user_resources/organization/' + app.settings.org_id + '/57x57-favicon.png' :  'img/learning_bank/57x57-favicon.png' }}"/>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/simple-line-icons/css/simple-line-icons.css" type="text/css"/>
    <link rel="stylesheet" href="css/font.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/angular-chartjs/dist/angular-chart.css">
    <link rel="stylesheet" href="css/app.css" type="text/css"/>
    <link rel="stylesheet" href="css/animate.css" type="text/css"/>
    <link rel="stylesheet" href="css/companies.css" type="text/css"/>
    <link rel="stylesheet" href="css/google-chart.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom/costum_button.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom/category.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom/academy.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom/learningbank.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom/utility.css" type="text/css"/>
    <link rel="stylesheet" href="css/custom/custom_app.css" type="text/css"/>
    <link rel="stylesheet" href="css/centered-directive.css" type="text/css"/>
    <link rel="stylesheet" href="css/responsive-table.css" type="text/css"/>
    <link rel="stylesheet" href="css/social-media.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/ng-grid/ng-grid.min.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/rickshaw/rickshaw.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/angularjs-toaster/toaster.css"/>
    <link rel="stylesheet" href="bower_components/video.js/dist/video-js/video-js.css">
    <link rel="stylesheet" href="bower_components/farbtastic/farbtastic.css">
    <link rel="stylesheet" href="bower_components/bootstrap-iconpicker/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/alertify.js/dist/css/alertify.css" type="text/css"/>

    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-touch.js" type="application/javascript"></script>-->

    <link rel="stylesheet"
          href="bower_components/bootstrap-iconpicker/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/mediaElement/build/mediaelementplayer.css">
    <link rel="stylesheet" href="bower_components/angularjs-toaster/toaster.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/video.js/dist/video-js/video-js.css" type="text/css"/>
    <link rel="stylesheet" href="bower_components/mediaElement/build/mediaelementplayer.css" type="text/css"/>
    <link data-require="fancybox@2.1.5" data-semver="2.1.5" rel="stylesheet"
          href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css"/>
    <link rel="stylesheet" href="bower_components/c3/c3.css" type="text/css">
    <link rel="stylesheet" href="bower_components/alertify/dist/css/alertify.css">

</head>
<body ng-style="{'background': 'url(' + getBackgroundImage() + ') no-repeat center center fixed', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover', 'min-height': '100%'}">
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<div class="app" id="app" ng-class="{'app-header-fixed':app.settings.headerFixed, 'app-aside-fixed':app.settings.asideFixed, 'app-aside-folded':app.settings.asideFolded, 'app-aside-dock':app.settings.asideDock, 'app-aside-bottom':app.settings.asideBottom, 'container':app.settings.container}"
     ui-view></div>
<!-- jQuery -->

<!-- Angular -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.js"></script>
<script src="vendor/angular-locale_da-dk.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="js/directives/angular-google-chart.js"></script>
<script>google.load('visualization', '1', {packages: ['orgchart']});</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-touch/angular-touch.min.js"></script>
<script src="bower_components/ng-grid/ng-grid-2.0.14.debug.js"></script>
<script src="bower_components/angularjs-toaster/toaster.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ngstorage/ngStorage.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/bootstrap-iconpicker/bootstrap-iconpicker/js/iconset/iconset-fontawesome-4.2.0.min.js"></script>
<script src="bower_components/bootstrap-iconpicker/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<script src="bower_components/farbtastic/farbtastic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js"
        type="application/javascript"></script>

最佳答案

如果您为其 src 属性提供一个数组,Uglify 可以为您连接。像这样:

     uglify: {
        development: {
           options: {},
           src: [pathToMyJavaScriptFile, pathToOtherJavaScriptFile],
           dest: pathToWhereIWantTheUglifiedJSToEndUp
        }
     }

或者您可以像this post 的答案中一样使用**/*.js stars 来解决它。 .

希望对您有所帮助:)

关于javascript - grunt uglify bower_components 文件夹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34991339/

相关文章:

javascript - 是否有任何 htaccess 或允许文件来启用跨站点脚本? Javascript

javascript - 使用 API 生成多个预签名 URL

javascript - 回流 : having multiple components access the same Store

gruntjs - 更改 grunt jshint 的选项

javascript - Uglify 意外改变 Angularjs 代码加载顺序

javascript - 将 javascript 变量传递到嵌入式调查表单中

javascript - 使用 grunt 连接所有 vendor 的 javascript 文件?

character-encoding - Grunt -contrib-sass : incompatible character encodings: UTF-8 and CP850

javascript - 保留 'debugger' 关键字 grunt uglify

javascript - 在 Grunt (Yeoman) 中禁用缩小