Question

我使用了一个Yo Angular-Fullstack生成器（https://github.com/DaftMonk/generator-angular-fullstack）并启动了一个应用程序，然后尝试通过操作从凉亭安装Toastr -

bower install angular-toastr

现在我想添加toastr css和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的grunt任务。它查找我的应用程序使用的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，但是，你可以使用和标签。我认为您只需要从grunt任务配置中删除选项replace。

如何在基于angular-fullstack的应用程序

1 个答案: