Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

grunt uglify bower_components folder

Tags:

javascript

gruntjs

grunt-contrib-uglify

So my project has ALOT of plugins installed with bower

All of these are in their own custom folder all contained in the bower_components folder

Now I wish to run a grunt script that basically takes all of these and uglify them.

So I created the following script:

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

Taken from another SO question

However whenever I run this I get the following warning / error:

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

Can anyone tell me what I am doing wrong?

Example of how my index.html look like:

    <!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="[email protected]" 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>
like image 278
Marc Rasmussen Avatar asked Nov 08 '22 21:11

Marc Rasmussen

1 Answers

Uglify can concatenate for you if you provide its src property with an array. Like this:

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

Or you can solve it using **/*.js stars like in the answer of this post.

I hope this helps :)

like image 75
Swoot Avatar answered Nov 15 '22 05:11

Swoot
Sign in to Comment

Related questions

Best way to sort page disposition on client side
NodeJS HTTP Requests not executing in order
Does ES6 make named function expressions unnecessary? [closed]
onchange display GridView record if exist from database using Javascript
How to handle site update with angular?
how to validate email id and password and password should contain lowercase,uppercase and minimum one character and both fields should be inline?
Custom Directive calling $scope function causes $rootScope:infdig
Setting animation-delay in Safari overwrites animation property, but not in Chrome
Element goes to wrong position when scroll
Print Preview Is Blank After adding External Stylesheet reference in print html content
I want to get my accurate latitude longitude of my linux device on command line. Like Geolocation in HTML5. I dont have access to browser
CSS style transform vs svg transform
Remove parameter from query string without reloading
How to pass a dynamic route to AJAX POST request in Rails
Working With Array Of Objects
Behat test validation message
Webpack: Multiple entry points of different types (JS, HTML, LESS,...)
How to make the inline CKEditor scroll inside div?
What is a "matrix" for in raphael
Angular2: Cloning component / HTML element and it's functionality

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!