Question

我正在使用ASP.NET 5并使用gulp。我将angularjs和angular-route添加到我的package.json文件中，该文件将文件存储在Dependencies-＆gt; NPM中。我把它添加到我的gulpfile.js中，认为它会复制正确的JS文件。它确实复制了文件，但是它也使项目崩溃了。我不得不手动进入lib文件夹并删除gulp添加的所有内容。将文件从NPM文件夹复制到目标文件夹的正确方法是什么。我希望能够从Task Runner运行任务。

我认为这是不正确的:(这就是我跑的）

gulp.task("copyJs", function () {
    return gulp.src('./node_modules/**/*.js')        
        .pipe(gulp.dest('./wwwroot/lib/'))  
});

Answer 1

*我认为'/'中的结尾gulp.dest('./wwwroot/lib/')可能是问题的原因，请尝试使用gulp.dest('./wwwroot/lib')。

这是我用于Angular 2和Asp.Net 5的gulp工作流程。

var gulp = require("gulp"),
    merge = require("merge-stream"),
    rimraf = require("rimraf");

var paths = {
    webroot: "./wwwroot/",
    node_modules: "./node_modules/"
};

paths.libDest = paths.webroot + "lib/";

gulp.task("clean:libs", function (cb) {
    rimraf(paths.libDest, cb);
});

gulp.task("copy:libs", ["clean:libs"], function () {
    var angular2 = gulp.src(paths.node_modules + "angular2/bundles/**/*.js")
        .pipe(gulp.dest(paths.libDest + "angular2"));

    var es6_shim = gulp.src([
            paths.node_modules + "es6-shim/*.js",
            "!**/Gruntfile.js"])
        .pipe(gulp.dest(paths.libDest + "es6-shim"));

    var systemjs = gulp.src(paths.node_modules + "systemjs/dist/*.js")
        .pipe(gulp.dest(paths.libDest + "systemjs"));

    var rxjs = gulp.src(paths.node_modules + "rxjs/bundles/**/*.js")
        .pipe(gulp.dest(paths.libDest + "rxjs"));

    return merge(angular2, es6_shim, systemjs, rxjs);
});

Answer 2

有很多方法可以做到，但我找到的一个很好的简单方法是：http://www.hanselman.com/blog/ControlHowYourBowerPackagesAreInstalledWithAGulpfileInASPNET5.aspx

更新bowerrc文件以及更新后的所有内容更有意义。

更新.BOWERRC和PROJECT.JSON

在项目的根目录中是.bowerrc文件。它看起来像这样：

> {   "directory": "wwwroot/lib" } Change it to something like this, and
> delete your actual wwwroot/lib folder.
> 
> {   "directory": "bower_components" } EXCLUDE YOUR SOURCE BOWER FOLDER
> FROM YOUR PROJECT.JSON

您还需要进入ASP.NET 5和的project.json文件确保排除源bower_components文件夹该项目以及任何包装和出版过程。

> "exclude": [
>     "wwwroot",
>     "node_modules",
>     "bower_components"   ],

更新你的GULPFILE.JS

在gulpfile中，确保路径中存在路径。有   完全是其他方法，包括gulp安装凉亭和   找出路径。这取决于你想要的复杂程度   只要结果是生产准备好.js就可以得到gulpfile   最终在您的wwwroot中准备好提供给客户。也   包含一个lib或目标，用于生成JavaScript的位置   复制。可能是脚本，可能是js，可能就像我的情况一样。

var paths = {       webroot：“./”+ project.webroot +“/”，       凉亭：“./ bower_components /”，       lib：“./”+ project.webroot +“/ lib /”};添加复制任务给你的GULPFILE

现在打开你的Gulpfile并记下所有任务。你要添加一个   复制任务只复制您想要部署的文件   网络应用。

以下是一个示例复制任务：

> 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}",
>         "hammer.js": "hammer.js/hammer*.{js,map}",
>         "jquery": "jquery/jquery*.{js,map}",
>         "jquery-validation": "jquery-validation/jquery.validate.js",
>         "jquery-validation-unobtrusive": "jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"
>     }
>  
>     for (var destinationDir in bower) {
>         gulp.src(paths.bower + bower[destinationDir])
>           .pipe(gulp.dest(paths.lib + destinationDir));
>     } });

请注意，这是一个非常简单且非常明确的复制任务。其他   可能只是或多或少地复制，甚至使用通配符通配符。   由你决定。关键是，如果您不喜欢ASP.NET中的行为   5或者在Web应用程序的一般构建流程中，您拥有更多   比以往任何时候都要强大。

右键单击解决方案资源管理器中的Bower节点，然后单击“还原”   包。“你也可以在命令行中执行此操作或只是让它   在建设时发生。

在这个简化的屏幕截图中，您可以看到凉亭   属于〜/ bower_components文件夹的依赖项。只是   我想要的部分移动到〜/ wwwroot / lib / **文件夹中   gulpfile运行复制任务。

使用gulp

2 个答案: