안녕하세요이 다음 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로 증가합니다.
안녕하세요, 저의 문제를 해결해 주셔서 감사합니다. D – user3718908
또한 시간이 있다면이 파일의 권장 크기/최적 크기를 알려주시겠습니까? AngularJs와 같은 프론트 엔드 프레임 워크를 사용한다고 가정합니다. – user3718908
진짜로 하나가 아니기 때문에, 내 머리 꼭대기의 번호를 말할 수는 없다. 그것은 의견과 상황의 문제입니다.오늘날 받아 들일 수없는 것은 내일 받아 들여질 것입니다. 최선의 방법은 특정 파일 크기로 촬영하는 것이 아니라 Google의 PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/)와 같은 방법으로 사이트 실적을 정기적으로 분석하는 것입니다. –