gulp 和 bower 在 asp.net mvc5 中的工作原理

Question

我不明白在 wwwroot 中导入 bower 依赖项的机制。这是我的 gulp 文件：

var gulp = require("gulp"),
  rimraf = require("rimraf"),
  fs = require("fs");

eval("var project = " + fs.readFileSync("./project.json"));

var paths = {
    bower: "./bower_components/",
    lib: "./" + project.webroot + "/lib/",
    app: "./" + project.webroot + "/app/",
    Scripts: "./" + project.webroot + "/Scripts/",
    srcScripts: "./Scripts/",
    srcapp: "./app/"
};

gulp.task("clean", function (cb) {
    rimraf(paths.lib, cb);
});

gulp.task("copy", ["clean"], function () {
    var bower = {
        "bootstrap": "bootstrap/dist/**/*.{js,map,css,ttf,svg,woff,eot}",
        "bootstrap-touch-carousel": "bootstrap-touch-carousel/dist/**/*.{js,css}",
        "bootstrap-ui": "angular-bootstrap/ui-bootstrap-tpls.js.{js,css}",
        "hammer.js": "hammer.js/hammer*.{js,map}",
        "jquery": "jquery/jquery*.{js,map}",
        "jquery-ui": "jquery-ui/jquery-ui.{js, css}",
        "jquery-validation": "jquery-validation/jquery.validate.js",
        "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js",
        "angular": "angular/angular*.{js,map}",
        "angular-route": "angular-route/angular-route*.{js,map}",
        "angular-resource": "angular-resource/angular-resource*.{js,map}",
        "angular-ui-router": "angular-ui-router/release/angular-ui-router.{js,min.js,min.js.map}",
        "angular-animate": "angular-animate/angular-animate.js",
        "angular-cookies": "angular-cookies/angular-cookies.js",
        "angular-locker": "angular-locker/angular-locker.js"
    }

    for (var destinationDir in bower) {
        gulp.src(paths.bower + bower[destinationDir])
          .pipe(gulp.dest(paths.lib + destinationDir));
    }
});

gulp.task("cleanapp", function (cb) {
    rimraf(paths.app, cb);

});

gulp.task("copyapp", ["cleanapp"], function () {
    var app = {
        "Controllers": "Controllers/*Ctrl.{js,map}",
        "Factories": "Factories/*Factory*.{js,map}",
        "Scripts": "Scripts/*.js",
        "/": "app.js"
    }

    for (var destinationDir in app) {
        gulp.src(paths.srcapp + app[destinationDir])
          .pipe(gulp.dest(paths.app + destinatio²
});

gulp.task('libTask', ['clean', 'copy']);
gulp.task('appTask', ['cleanapp', 'copyapp']);

依赖凉亭很好下载。但是，某些文件没有复制到我的 wwwroot 中，因为依赖项 bootstrap-ui 和 angular-locker。如果有人可以解释与其他依赖副本的区别以及为什么它不起作用。谢谢

Answer 1

我尝试了 wiredep 但它不起作用：这是我的应用程序架构：

这是我的 gulp 文件（我已经使用 NPM 安装了 wiredep v.3.0.0-beta）：

//edit

var gulp = require('gulp'),
    rimraf = require('rimraf'),
    fs = require('fs'),
    wiredep = require('wiredep').stream;
eval("var project = "+fs.readFileSync("./project.json");
gulp.task('bower', function(){
    gulp.src("./"+project.webroot + "/index.html")
        .pipe(wiredep({
            directory:'./bower_components/',
            bowerJson: require('./bower.json'),
        }))
        .pipe(gulp.dest("./"+project.webroot + "/lib/"));
    });

当我运行任务时，凉亭的依赖项被复制到 bower_components 但它们没有复制到我的 wwwroot 的 lib 目录中。而且我不知道如何在我的索引中自动引用凉亭的依赖项。我是不是忘记了什么？

无论如何，感谢您的帮助。

gulp 和 bower 在 asp.net mvc5 中的工作原理

How to works gulp and bower in asp.net mvc5

angularjs

bower

asp.net-mvc-5

gulp