2016-07-07 11 views
3

안녕하세요이 다음 gulpfile.js : 내 이물의 경우,이 그러나 나는 이상한 결과를 점점 계속 내 프로젝트를 빌드 할 수 있어요연접 및 자바 스크립트 소스 파일보다 큰 파일 uglified

'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')); 
}); 

.js 파일의 빌드 후 총 크기는 12,836 KB입니다. 애플 리케이션을 실행할 때마다 브라우저가 많은 메모리를 소비하는 것 같아서 bower.js 파일에 연결되어있는 모든 파일의 총 크기를 계산하기로 결정했습니다. 결국 3,574KB이되었습니다.

지금 당장 어떤 일이 벌어지고 있는지 궁금해합니다. 빌드 프로세스 중에 숨겨진 파일이 포함되어 있습니다. 함께 결합 된 모든 파일의 출력과 각 파일의 크기를 표시하는 방법이 있습니다. 꿀꺽 꿀꺽 마셔?

내 JS 파일 중 하나에서 외부 스크립트를로드 할 수 있습니까? 내 bower_components 폴더의 전체 크기는 25.3 MB (디스크의 경우 29.8 MB)입니다.

"gulp"를 실행하면 파일 크기가 9,225KB로 작아집니다. 그러나 "gulp --type production"을 실행하여 스크립트를 uglify 할 때 파일 크기는 12,836KB로 증가합니다.

답변

11

bower.js에 소스 맵을 포함시키고 있습니다. 그것이 파일을 너무 크게 만드는 이유입니다.

당신은 bower.js을 결과하고는 연결된 및 uglified에 소스 파일에서 매핑을 지정 후이

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

다 같이 시작하는 라인을 찾아야한다 파일의 맨 끝에 보면 열 경우 bower.js 파일.

이것이 제작 빌드가 개발 빌드보다 훨씬 큰 이유입니다. 프로덕션 빌드는 연결된 파일을 uglify하므로 소스 파일에서 결과로 나타나는 bower.js 파일로 매핑하는 것이 더 많습니다. 반면에 개발 빌드는별로 매핑 할 필요가 없습니다. 결과적으로 bower.js은 하나의 큰 파일로 연결된 모든 소스 파일입니다.

운좋게도 원본지도를 포함하는 다른 방법이 있습니다. 당신은 sourcemaps.write()에서 대상 디렉토리를 지정하여 별도의 파일로 생성 할 수 있습니다 :

.pipe(gutil.env.type === 'production' ? uglify() : gutil.noop()) 
.pipe(sourcemaps.write('.')) 
.pipe(gulp.dest('dist/js')); 

이는 bower.js와 같은 디렉토리에있는 파일 bower.js.map을 만듭니다. 당신이 bower.js의 코드를 디버깅하는 경우

//# sourceMappingURL=bower.js.map 

브라우저 만 bower.js.map 파일을로드되므로 메모리 사용량은 실제로 디버깅하지 않는 한 가서는 안 다음 .map 파일은 bower.js에서 참조됩니다.

+0

안녕하세요, 저의 문제를 해결해 주셔서 감사합니다. D – user3718908

+0

또한 시간이 있다면이 파일의 권장 크기/최적 크기를 알려주시겠습니까? AngularJs와 같은 프론트 엔드 프레임 워크를 사용한다고 가정합니다. – user3718908

+1

진짜로 하나가 아니기 때문에, 내 머리 꼭대기의 번호를 말할 수는 없다. 그것은 의견과 상황의 문제입니다.오늘날 받아 들일 수없는 것은 내일 받아 들여질 것입니다. 최선의 방법은 특정 파일 크기로 촬영하는 것이 아니라 Google의 PageSpeed ​​Insights (https://developers.google.com/speed/pagespeed/insights/)와 같은 방법으로 사이트 실적을 정기적으로 분석하는 것입니다. –