M
M
MOTORIST2015-03-21 12:14:28
Yii
MOTORIST, 2015-03-21 12:14:28

Yii2 compress and merge js and css files. How to compress in batches (jquery separately, angular separately)?

Hello!
I compress css and js files with Closure Compiler, YUI Compressor. Everything is compressed into one js and css file. As a result, I get an error from angular:

Error: $injector:unpr
Unknown Provider
Unknown provider: bProvider <- b

I want to separately compress jquery, angular and other scripts to identify an error (three js output).
I've been struggling with this all day and can't do it. I will be grateful for help.
Compressor
// In the console environment, some path aliases may not exist. Please define these:
 Yii::setAlias('@webroot', __DIR__.'/../web' );
 Yii::setAlias('@web', '/');

return [
    // Adjust command/callback for JavaScript files compressing:
    'jsCompressor' => 'java -jar compiler.jar --js {from} --js_output_file {to}',
    // Adjust command/callback for CSS files compressing:
    'cssCompressor' => 'java -jar yuicompressor.jar --type css {from} -o {to}',
    // The list of asset bundles to compress:
    'bundles' => [
         'yii\web\JqueryAsset',
         'frontend\assets\AppAsset',
         'yii\web\YiiAsset',
    ],
    // Asset bundle for compression output:
    'targets' => [
        'all' => [
            'class' => 'yii\web\AssetBundle',
            'basePath' => '@webroot',
            'baseUrl' => '@web',
            'js' => 'js/all-{hash}.js',
            'css' => 'css/all-{hash}.css',
        ],

    ],
    // Asset manager configuration:
    'assetManager' => [
        'basePath' => '@webroot/assets',
        'baseUrl' => '@web',
    ],
];

class AppAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
//        'css/site.css',

//        'http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700',
        'libs/semantic/semantic.min.css',
        'libs/notification/toaster.css',
        'libs/angular-loading-bar/loading-bar.min.css',
        'libs/angular-datepicker/angular-datepicker.min.css'
    ];
    public $depends = [
        'yii\web\YiiAsset',
//        'yii\bootstrap\BootstrapAsset',
    ];
    public $js = [
//        'http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
        'libs/semantic/semantic.min.js',
        'js/masonry.pkgd.min.js',
        'libs/angular-1.3.8/angular.min.js',
        //'angular-1.3.8/angular-cookies.min.js',
        'libs/angular-1.3.8/i18n/angular-locale_ru.js',
        'libs/angular-1.3.8/angular-route.min.js',
        'libs/angular-1.3.8/angular-animate.min.js',
        'libs/notification/toaster.js',
        'libs/angular-loading-bar/loading-bar.min.js',
        'js/angular-masonry.js',
        'libs/angular-semantic-ui/checkbox/checkbox.js',
        'libs/angular-plupload/plupload.full.min.js',
        'libs/angular-plupload/plupload-angular-directive.min.js',
        'libs/angular-datepicker/angular-datepicker.min.js',
        'app.js',
        'modules/auth/controllers/authController.js',
        'modules/photos/controllers/albumsController.js',
        'modules/photos/controllers/photoController.js',
        'libs/zoomscript/jquery.rotator.js',
        'libs/zoomscript/jquery.common.js',
        'libs/zoomscript/jquery.zoomscript.min.js',
        'libs/zoomscript/translations.js'
    ];
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
M
Mikhail Osher, 2015-03-21
@MOTORIST

Stop, stop, stop!
I am 99.999999999% sure that the problem is with the annotations.
https://docs.angularjs.org/guide/di
No way!:

function MyCtrl($scope, MyService) {
  $scope.data = MyService.getData();
}
angular.module('myapp').controller('MyCtrl', MyCtrl);

The only way:
MyCtrl.$inject = ['$scope', 'MyService'];
function MyCtrl($scope, MyService) {
  $scope.data = MyService.getData();
}
angular.module('myapp').controller('MyCtrl', MyCtrl);

Either like this:
function MyCtrl($scope, MyService) {
  $scope.data = MyService.getData();
}
angular.module('myapp')
    .controller('MyCtrl', ['$scope', 'MyService', MyCtrl]);

//UPD
PLEASE READ MY ANSWER CAREFULLY! Everything is described in it.
Along with ng-app=" myapp " add ng-strict-di , and without compression, see where it swears.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question