Javascript 如何在基于angular fullstack的应用程序中包含库文件（css/js）

我使用了一个Yo Angular Fullstack generator（）并启动了一个应用程序，然后尝试从bower安装Toastr，方法是：

bower install angular-toastr

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

bower\u组件/角度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

我使用了一个名为。它查找我的应用程序使用的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")
            );

---

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

replace

。

我对bundle了解不多，也不确定默认grunt文件是否使用它。因此，如果我将任务粘贴到grunt文件中，并使用bower:js和endbower等标记，这是正确的方法吗？我不太了解bundle，也不确定默认grunt文件是否使用它。因此，如果我将任务粘贴到grunt文件中，并使用bower:js和endbower等标记，这是正确的方法吗？是的，没错。您不必使用捆绑包。只要文件上的这些标签bower:js，endbower，你就可以引用你的js/css引用，你应该很好。如果有帮助，请投票，干杯！