Gulp 连接和丑化的Javascript文件比源文件大

您好，我有以下gulpfile.js：

'use strict';

var gulp = require('gulp'),
    jshint = require('gulp-jshint'),
    sass = require('gulp-ruby-sass'),
    compass = require('gulp-compass'),
    gutil = require('gulp-util'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    templateCache = require('gulp-angular-templatecache'),
    path = require('path');

/* Default Gulp Task */
gulp.task('default', ['sass', 'mfb-sass', 'bower-css', 'bower-js', 'app-js', 'ng-templates'], function () {
    return gutil.log('Gulp is running!')
});

/* Build SASS files */
gulp.task('sass', function () {
    return gulp.src('./src/sass/*.scss')
        .pipe(sourcemaps.init())
        .pipe(compass({
            project: path.join(__dirname, '/'),
            css: 'dist/css',
            sass: 'src/sass'
        }))
        .pipe(sourcemaps.write())
        .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
        .pipe(gulp.dest('./dist/css'));
});

gulp.task('mfb-sass', () =>
    sass('bower_components/ng-material-floating-button/mfb/src/*.scss')
    .on('error', sass.logError)
    .pipe(gulp.dest('bower_components/ng-material-floating-button/mfb/dist'))
);


/* Build and Compreess Bower CSS Files */
gulp.task('bower-css', function () {
    return gulp.src([
                        'bower_components/bootstrap/dist/css/bootstrap.min.css',
                        'bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.min.css',
                        'bower_components/bootstrap-material-design/dist/css/ripples.min.css',
                        'bower_components/angular-loading-bar/src/loading-bar.css',
                        'bower_components/snapjs/snap.css',
                        'bower_components/angular-snap/angular-snap.min.css',
                        'bower_components/font-awesome/css/font-awesome.min.css',
                        'bower_components/animate.css/animate.min.css',
                        'bower_components/ngAnimate/css/ng-animation.css',
                        'bower_components/angular-material/angular-material.css',
                        'bower_components/Ionicons/css/ionicons.css',
                        'bower_components/ng-material-floating-button/mfb/dist/mfb.css',
                    ])
        //only uglify if gulp is ran with '--type production'
        .pipe(concat('bower.css'))
        .pipe(gutil.env.type === 'production' ? cleanCSS() : gutil.noop())
        .pipe(gulp.dest('dist/css'));
});

/* Build and Compreess Bower Javascript Files */
gulp.task('bower-js', function () {
    return gulp.src([
                        'bower_components/jquery/dist/jquery.js',
                        'bower_components/bootstrap/dist/js/bootstrap.js',
                        'bower_components/angular/angular.js',
                        'bower_components/bootstrap-material-design/dist/js/material.js',
                        'bower_components/bootstrap-material-design/dist/js/ripples.min.js',
                        'bower_components/angular-ui-router/release/angular-ui-router.min.js',
                        'bower_components/angular-animate/angular-animate.js',
                        'bower_components/angular-loading-bar/src/loading-bar.js',
                        'bower_components/oclazyload/dist/ocLazyLoad.min.js',
                        'bower_components/satellizer/satellizer.js',
                        'bower_components/snapjs/snap.min.js',
                        'bower_components/angular-snap/angular-snap.min.js',
                        'bower_components/ngSlimscroll/src/js/ngSlimscroll.js',
                        'bower_components/angular-animate/angular-animate.min.js',
                        'bower_components/angular-sanitize/angular-sanitize.js',
                        'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
                        'bower_components/angular-aria/angular-aria.js',
                        'bower_components/angular-material/angular-material.js',
                        'bower_components/ng-material-floating-button/src/mfb-directive.js',
                        'bower_components/humanize-duration/humanize-duration.js',
                        'bower_components/moment/min/moment-with-locales.js',
                        'bower_components/angular-timer/dist/angular-timer.js',
                        'bower_components/angular-fullscreen/src/angular-fullscreen.js',
                        'bower_components/angular-translate/angular-translate.js'
                    ])
        .pipe(sourcemaps.init())
        .pipe(concat('bower.js'))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/js'));
});

/* Build and Compress App Javascript Files */
gulp.task('app-js', function () {
    return gulp.src([
                        'src/js/core/app.js',
                        'src/js/core/controllers.js',
                        'src/js/core/services.js',
                        'src/js/core/templates.js',
                        'src/js/core/directives.js',
                        'src/js/core/routes.js',
                        'src/js/**/*.js'
                    ])
        .pipe(sourcemaps.init())
        .pipe(concat('app.js'))
        //only uglify if gulp is ran with '--type production'
        .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/js'));
});


/* Caching all GTML Views */
gulp.task('ng-templates', function () {
    return gulp.src('src/views/**/*.html')
        .pipe(templateCache({
            filename: 'templates.js',
            root: 'tpls/',
            module: 'app.tpls'
        }))
        .pipe(gulp.dest('dist/js'));
});

我可以用它来构建我的项目，但是我不断得到一个奇怪的输出，对于我的bower.js文件，构建后的总大小是12836 KB。我不明白这一点，因为我注意到每当我运行应用程序时，我的浏览器似乎都会占用大量内存，所以我决定计算连接到bower.js文件中的所有文件的总大小，最后我得到的是3574 KB

现在我想知道发生了什么，在构建过程中是否包含了一些隐藏文件，是否有一种方法可以让我显示所有连接在一起的文件的输出以及每个文件的大小

我的一个JS文件可能正在加载外部脚本吗？ my bower_components文件夹的总大小为25.3 MB（磁盘上为29.8 MB）。

---

当我只运行“gulp”时，文件大小是9225KB，这是较小的，但是当我运行“gulp--type production”来丑化脚本时，文件大小反而增加到12836KB。

您正在将源映射嵌入生成的

bower.js

中。这就是文件如此之大的原因

如果打开生成的

bower.js

并查看文件的最后一行，您应该会发现一行开头如下

//# sourceMappingURL=data:application/json;base64,

之后的所有内容都指定了从源文件到连接的、经过uglified的

bower.js

文件的映射

这就是为什么生产构建比开发构建大得多的原因。您的产品构建使连接的文件变得丑陋，因此有很多东西需要从源文件映射到生成的

bower.js

文件。另一方面，您的开发构建不需要太多映射。生成的

bower.js

只是将所有源文件连接到一个大文件中

幸运的是，还有另一种方法可以包含源地图。通过在

sourcemaps.write（）

中指定目标目录，可以将它们生成到单独的文件中：

这将在与

bower.js

相同的目录中创建一个文件

bower.js.map

。

.map

文件也在

bower.js

中引用：

//# sourceMappingURL=bower.js.map

---

如果您正在调试

bower.js

中的代码，浏览器将只加载

bower.js.map

文件，因此除非您正在实际调试，否则内存使用量不会增加。

如果您有时间，您能告诉我这样的文件的建议/最佳大小吗？假设我使用的是一个像AngularJs这样的前端框架，我不能告诉你我的一些想法，因为实际上没有。这是一个意见和情况的问题。再加上今天不可接受的东西明天很可能会被接受。你最好的选择不是拍摄一个特定的文件大小，而是定期分析你的网站的性能，比如。很好的答案！谢谢

//# sourceMappingURL=bower.js.map