如何在基于角满堆栈的应用程序中包含库文件(css/js)

Question

我使用了by角堆生成器(https://github.com/DaftMonk/generator-angular-fullstack)并启动了一个应用程序，然后尝试从bower安装Toastr。

bower install angular-toastr

现在我想添加toastr和js文件。它们位于

bower_components/angular-toastr/dist

现在，如何将它们包含在当前项目中，以便在使用grunt构建应用程序时将它们包含在dist文件夹中。

文件夹结构如下-

├── client
│   ├── app                 - All of our app specific components go in here
│   ├── assets              - Custom assets: fonts, images, etc…
│   ├── components          - Our reusable components, non-specific to to our app
│
├── e2e                     - Our protractor end to end tests
│
└── server
    ├── api                 - Our apps server api
    ├── auth                - For handling authentication with different auth strategies
    ├── components          - Our reusable or app-wide components
    ├── config              - Where we do the bulk of our apps configuration
    │   └── local.env.js    - Keep our environment variables out of source control
    │   └── environment     - Configuration specific to the node environment
    └── views               - Server rendered views

Answer 1

我使用一个名为wiredep的繁重任务。它查找我的应用程序使用的bower组件，并将对css/js文件的引用添加到我指定的文件中。

我使用.NET BundleConfig进行缩小，所以我的任务设置如下所示：

wiredep: {
        task: {
            src: [
            'App_Start/BundleConfig.cs'
            ],
            ignorePath: '..',
            fileTypes: {
                cs: {
                    block: /(([ \t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
                    detect: {
                        js: /<script.*src=['"](.+)['"]>/gi,
                        css: /<link.*href=['"](.+)['"]/gi
                    },
                    replace: {
                        js: '.Include("~{{filePath}}")',
                        css: '.Include("~{{filePath}}")'
                    }
                }
            },
            dependencies: true,
            devDependencies: false
        }
    },

最终的结果是这样的：

bundles.Add(new ScriptBundle("~/bundles/thirdparty")
            //NOTE: auto-generated by a grunt task
            //anything between 'bower:js' and 'endbower' WILL BE LOST!
            //bower:js
            .Include("~/assets/angular/angular.js")
            .Include("~/assets/moment/moment.js")
            //endbower
            );

bundles.Add(new StyleBundle("~/bundles/css")
            //NOTE: auto-generated by a grunt task
            //anything between 'bower:css' and 'endbower' WILL BE LOST!
            //bower:css
            .Include("~/assets/nouislider/distribute/nouislider.min.css")
            //endbower
            .Include("~/Content/css/app.css")
            );

正如我所说的，我使用的是.NET BundleConfing，但是，您可以使用和标记。我认为您只需要将选项replace从普通任务配置中删除。