构建具有轻量级 NPM 依赖项的 angularjs 应用程序的正确方法是什么？答案

【问题标题】：What is the right way to build an angularjs app with ligthweight NPM dependencies?构建具有轻量级 NPM 依赖项的 angularjs 应用程序的正确方法是什么？
【发布时间】：2017-10-03 22:38:36
【问题描述】：

我正在开发一个 angularjs 应用程序。我正在使用 npm 下载 JS 依赖项。因此，我所有的依赖项都位于我的应用程序的 node_modules 文件夹中。这工作正常。

我现在想交付我的应用程序，但node_modules 文件夹很大~30M，而且有很多我不在乎的繁重文件。我的应用程序仅包含 js 文件的缩小版本，例如 node_modules/chart.js/dist/Chart.min.js。

所以，我想知道如何继续构建我的应用程序，只使用使用过的缩小 js 文件以获得轻量级构建？

就我而言，我只关心 js 文件的缩小版本。我不知道这是否可能或我应该朝哪个方向挖掘？

我已经在我的项目中使用 gulp 来自动执行任务，如果有“gulp”的方式来做到这一点，那就太好了。

【问题讨论】：

标签： angularjs npm gulp

【解决方案1】：

你可以运行两个新的 gulp 任务第一个会将所有节点 js 文件复制到目标位置。第二个会将 js 文件连接并缩小为单个文件。

var concat = require('gulp-concat');  
var rename = require('gulp-rename');  
var uglify = require('gulp-uglify'); 

var dest = 'destination/';
var concatSource = dest;
var concatDest = 'dist/scripts/'

gulp.task('copy-minified', [], function() {

    var paths = [
        [
            'node_modules/**/*.js'
        ]
    ];

    paths.forEach(function(path) {

        gulp.src(path)
            .pipe(
                gulp.dest(dest)
            );

    });

});

gulp.task('concatenate-into-on-file-and-minify', function() {  
    return gulp.src(concatSource)
        .pipe(concat('scripts.js'))
        .pipe(gulp.dest(concatDest))
        .pipe(rename('scripts.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(concatDest));
});

【讨论】：

好的，感谢您的提示，但这并非在所有情况下都有效，因为我的一些 NODE 模块（例如 this one）没有附带缩小的 js 文件。
@ben.IT 我修改了我的答案。现在我复制非缩小的 js 文件，将它们连接起来，然后缩小它们。问候，
如果我们这样做，这将占用所有 .js 文件，例如 gruntfile.js，这不是预期的。但是受到您的启发，我在 gulpfile 开头的一个数组中列出了我的应用程序的依赖项，这些依赖项通过连接和 uglify 的 gulp 任务连接到一个文件中。