こんにちは、次の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'));
});
I am able to build my project with this however I keep getting a weird output, for my bower.js file the total size after build is 12,836 KB. I did not understand this because I noticed my browser seems to use up a lot of memory whenever I run the app, so I decided to calculate the total size of all the files that had been concatenated in my bower.js file and what I had at the end was 3,574 KB.
Right now I am wondering what is going on, are some hidden files being included during the build process, is there a way for me to display an output of all files that were joined together and uglified and the size of each file in gulp?
Is it possible that one of my JS files is loading external scripts? The total size of my bower_components folder is 25.3 MB (29.8 MB on disk).
「gulp」だけを実行すると、ファイル サイズは 9,225 KB と小さくなりますが、「gulp --type production」を実行してスクリプトを醜くすると、代わりにファイル サイズが 12,836 KB に増加します。