Здравствуйте, у меня есть следующий файл 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 общий размер после сборки составляет 12 836 КБ. Я не понял этого, потому что заметил, что мой браузер потребляет много памяти всякий раз, когда я запускаю приложение, поэтому я решил рассчитать общий размер всех файлов, которые были объединены в моем файле bower.js, и то, что у меня было. в конце было 3574 КБ.
Прямо сейчас мне интересно, что происходит, включаются ли некоторые скрытые файлы в процесс сборки, есть ли способ отобразить вывод всех файлов, которые были объединены и удалены, а также размер каждого файла в gulp?
Возможно ли, что один из моих JS-файлов загружает внешние скрипты? Общий размер моей папки bower_components составляет 25,3 МБ (29,8 МБ на диске).
Когда я запускаю только «gulp», размер файла составляет 9 225 КБ, что меньше, однако, когда я запускаю «gulp --type production», чтобы ухудшить сценарии, размер файла вместо этого увеличивается до 12 836 КБ.
