Skip to content

Commit 90faad7

Browse files
mgoldsboroughmgoldsborough
committed
Merge pull request #70 from mgoldsborough/optimize-gulp
Gulp optimizations to combine and minify js/css files. Merging this in and using as a baseline for rdash-angular.
2 parents 65c8de3 + 5cad328 commit 90faad7

File tree

9 files changed

+327
-87
lines changed

9 files changed

+327
-87
lines changed

‎gulpfile.js‎

Lines changed: 86 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,117 @@
11
var gulp = require('gulp'),
22
less = require('gulp-less'),
3-
usemin = require('gulp-usemin'),
43
wrap = require('gulp-wrap'),
4+
watch = require('gulp-watch'),
5+
concat = require('gulp-concat'),
6+
uglify = require('gulp-uglify'),
57
connect = require('gulp-connect'),
6-
watch = require('gulp-watch');
8+
cssmin = require('gulp-minify-css'),
9+
templates = require('gulp-angular-templates');
10+
11+
var vendors = [
12+
'src/bower_components/angular/angular.js',
13+
'src/bower_components/angular-cookies/angular-cookies.js',
14+
'src/bower_components/angular-bootstrap/ui-bootstrap.js',
15+
'src/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
16+
'src/bower_components/angular-ui-router/release/angular-ui-router.js',
17+
];
18+
19+
var styles = [
20+
'src/bower_components/bootstrap/dist/css/bootstrap.css',
21+
'src/bower_components/font-awesome/css/font-awesome.css',
22+
'src/less/dashboard/variables.less',
23+
'src/less/dashboard/mixins.less',
24+
'src/less/dashboard/main.less',
25+
'src/less/dashboard/loading.less',
26+
'src/less/dashboard/content.less',
27+
'src/less/dashboard/header.less',
28+
'src/less/dashboard/sidebar.less',
29+
'src/less/dashboard/widgets.less',
30+
'src/less/dashboard/hamburg.less',
31+
];
32+
33+
var fonts = [
34+
'src/fonts/**.*',
35+
'src/bower_components/bootstrap/dist/fonts/*.{ttf,woff,eof,svg}',
36+
'src/bower_components/font-awesome/fonts/*.{ttf,woff,eof,svg}'
37+
];
738

839
var paths = {
9-
js: 'src/js/**/*.*',
10-
fonts: 'src/fonts/**.*',
40+
js: ['src/js/**/*.*', 'dist/js/templates.js'],
41+
files: ['src/index.html'],
1142
images: 'src/img/**/*.*',
12-
styles: 'src/less/**/*.less',
13-
index: 'src/index.html',
14-
bower_fonts: 'src/bower_components/**/*.{ttf,woff,eof,svg}',
15-
bower_components: 'src/bower_components/**/*.*',
43+
templates: 'src/templates/**/*.html',
44+
fonts: fonts,
45+
styles: styles,
46+
vendors: vendors
1647
};
1748

49+
// The name of the Angular module which will be injected into the templates.
50+
var moduleName = 'Dashboard';
1851

19-
gulp.task('usemin', function() {
20-
return gulp.src(paths.index)
21-
.pipe(usemin({
22-
less: ['concat', less()],
23-
js: ['concat', wrap('(function(){ \n<%= contents %>\n})();')],
24-
}))
25-
.pipe(gulp.dest('dist/'));
52+
// Minify and copy all 3rd party libs to vendors.min.js
53+
gulp.task('copy-vendors', function() {
54+
return gulp.src(paths.vendors)
55+
.pipe(uglify())
56+
.pipe(concat('vendors.min.js'))
57+
.pipe(gulp.dest('dist/js'));
2658
});
2759

28-
/**
29-
* Copy assets
30-
*/
31-
gulp.task('copy-assets', ['copy-images', 'copy-fonts', 'copy-bower_fonts']);
60+
// Minify and copy all dashboard script files to dashboard.min.js
61+
gulp.task('copy-scripts', function() {
62+
return gulp.src(paths.js)
63+
.pipe(uglify())
64+
.pipe(concat('dashboard.min.js'))
65+
.pipe(gulp.dest('dist/js'));
66+
});
3267

68+
// Minify and copy all angular templates to templates.min.js
69+
gulp.task('copy-templates', function() {
70+
return gulp.src(paths.templates)
71+
.pipe(templates({module: moduleName}))
72+
.pipe(uglify())
73+
.pipe(concat('templates.min.js'))
74+
.pipe(gulp.dest('dist/js'));
75+
});
76+
77+
// Copy all static/HTML files to output directory
78+
gulp.task('copy-files', function(){
79+
return gulp.src(paths.files)
80+
.pipe(gulp.dest('dist'));
81+
});
82+
83+
// Copy all images to output directory
3384
gulp.task('copy-images', function(){
3485
return gulp.src(paths.images)
3586
.pipe(gulp.dest('dist/img'));
3687
});
3788

89+
// Copy all fonts to output directory
3890
gulp.task('copy-fonts', function(){
3991
return gulp.src(paths.fonts)
4092
.pipe(gulp.dest('dist/fonts'));
4193
});
4294

43-
gulp.task('copy-bower_fonts', function(){
44-
return gulp.src(paths.bower_fonts)
45-
.pipe(gulp.dest('dist/lib'));
95+
// Compile less styles into dashboard.css
96+
gulp.task('compile-less', function(){
97+
return gulp.src(paths.styles)
98+
.pipe(less())
99+
.pipe(cssmin())
100+
.pipe(concat('dashboard.min.css'))
101+
.pipe(gulp.dest('dist/css'));
46102
});
47103

48104
/**
49105
* Watch src
50106
*/
51107
gulp.task('watch', function () {
52-
gulp.watch([paths.styles, paths.index, paths.js], ['usemin']);
53-
gulp.watch([paths.images], ['copy-images']);
54-
gulp.watch([paths.fonts], ['copy-fonts']);
55-
gulp.watch([paths.bower_fonts], ['copy-bower_fonts']);
108+
gulp.watch(paths.vendors, ['copy-vendors']);
109+
gulp.watch(paths.js, ['copy-scripts']);
110+
gulp.watch(paths.templates, ['copy-templates']);
111+
gulp.watch(paths.files, ['copy-files']);
112+
gulp.watch(paths.images, ['copy-images']);
113+
gulp.watch(paths.fonts, ['copy-fonts']);
114+
gulp.watch(paths.styles, ['compile-less']);
56115
});
57116

58117
gulp.task('webserver', function() {
@@ -68,14 +127,5 @@ gulp.task('livereload', function() {
68127
.pipe(connect.reload());
69128
});
70129

71-
/**
72-
* Compile less
73-
*/
74-
gulp.task('compile-less', function(){
75-
return gulp.src(paths.styles)
76-
.pipe(less())
77-
.pipe(gulp.dest('dist/css'));
78-
});
79-
80-
gulp.task('build', ['usemin', 'copy-assets']);
130+
gulp.task('build', ['copy-vendors', 'copy-scripts', 'copy-templates', 'copy-files', 'copy-images', 'copy-fonts', 'compile-less']);
81131
gulp.task('default', ['build', 'webserver', 'livereload', 'watch']);

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@
1818
"bower": "^1.3.9",
1919
"gulp": "~3.8.0",
2020
"gulp-angular-templates": "^0.0.1",
21+
"gulp-concat": "^2.3.4",
2122
"gulp-connect": "^2.0.6",
2223
"gulp-less": "~1.3.3",
23-
"gulp-usemin": "^0.3.7",
24+
"gulp-minify-css": "^0.3.7",
25+
"gulp-uglify": "^1.0.0",
2426
"gulp-watch": "^0.6.9",
2527
"gulp-wrap": "^0.3.0"
2628
}

‎src/index.html‎

Lines changed: 7 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,54 +6,7 @@
66

77
<title>Dashboard</title>
88

9-
<!-- build:less lib/bootstrap/css/bootstrap.css -->
10-
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css">
11-
<!-- endbuild -->
12-
13-
<!-- build:css lib/font-awesome/css/font-awesome.css -->
14-
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css">
15-
<!-- endbuild -->
16-
17-
<!-- build:less css/dashboard/dashboard.css -->
18-
<link rel="stylesheet" type="text/css" href="less/dashboard/variables.less">
19-
<link rel="stylesheet" type="text/css" href="less/dashboard/mixins.less">
20-
<link rel="stylesheet" type="text/css" href="less/dashboard/main.less">
21-
<link rel="stylesheet" type="text/css" href="less/dashboard/loading.less">
22-
<link rel="stylesheet" type="text/css" href="less/dashboard/content.less">
23-
<link rel="stylesheet" type="text/css" href="less/dashboard/header.less">
24-
<link rel="stylesheet" type="text/css" href="less/dashboard/sidebar.less">
25-
<link rel="stylesheet" type="text/css" href="less/dashboard/widgets.less">
26-
<link rel="stylesheet" type="text/css" href="less/dashboard/hamburg.less">
27-
<!-- endbuild -->
28-
29-
<!-- SCRIPTS -->
30-
<!-- build:js lib/angular/angular.js -->
31-
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
32-
<!-- endbuild -->
33-
<!-- build:js lib/angular-cookies/angular-cookies.js -->
34-
<script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
35-
<!-- endbuild -->
36-
<!-- build:js lib/angular-bootstrap/ui-bootstrap.js -->
37-
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
38-
<!-- endbuild -->
39-
<!-- build:js lib/angular-bootstrap/ui-bootstrap-tpls.js -->
40-
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
41-
<!-- endbuild -->
42-
<!-- build:js lib/angular-ui-router/angular-ui-router.js -->
43-
<script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
44-
<!-- endbuild -->
45-
46-
<!-- build:js js/dashboard.js -->
47-
<script type="text/javascript" src="js/dashboard/module.js"></script>
48-
<script type="text/javascript" src="js/dashboard/routes.js"></script>
49-
<script type="text/javascript" src="js/dashboard/controllers/master-ctrl.js"></script>
50-
<script type="text/javascript" src="js/dashboard/controllers/alerts-ctrl.js"></script>
51-
<script type="text/javascript" src="js/dashboard/directives/loading.js"></script>
52-
<script type="text/javascript" src="js/dashboard/directives/widget.js"></script>
53-
<script type="text/javascript" src="js/dashboard/directives/widget-body.js"></script>
54-
<script type="text/javascript" src="js/dashboard/directives/widget-header.js"></script>
55-
<!-- endbuild -->
56-
<!-- SCRIPTS -->
9+
<link rel="stylesheet" type="text/css" href="css/dashboard.min.css">
5710

5811
</head>
5912
<body ng-controller="MasterCtrl">
@@ -172,6 +125,11 @@
172125
</div><!-- End Content Wrapper -->
173126
</div><!-- End Page Wrapper -->
174127

128+
<<<<<<< HEAD
129+
<script type="text/javascript" src="js/vendors.min.js"></script>
130+
<script type="text/javascript" src="js/dashboard.min.js"></script>
131+
<script type="text/javascript" src="js/templates.min.js"></script>
132+
=======
175133
<script type="text/ng-template" id="dashboard.html">
176134
<div class="row alerts-container" data-ng-controller="AlertsCtrl" data-ng-show="alerts.length">
177135
<div class="col-xs-12">
@@ -379,5 +337,6 @@
379337
</div>
380338
</div>
381339
</script>
340+
>>>>>>> develop
382341
</body>
383342
</html>

‎src/less/dashboard/main.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "variables.less";
2+
13
/* Fonts */
24
@font-face {
35
font-family: 'Montserrat';

‎src/less/dashboard/sidebar.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "variables.less";
2+
13
/**
24
* Sidebar
35
*/

‎src/less/dashboard/variables.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,4 @@
1111

1212

1313
/* Font path: */
14-
@fontPath: '../../fonts';
14+
@fontPath: '../fonts';

‎src/less/dashboard/widgets.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* Widgets
33
*/
44
.widget {
5-
.box-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
5+
box-shadow: 1px 1px rgba(0, 0, 0, 0.05);
66
background: #ffffff;
77
border: 1px solid transparent;
88
border-radius: 2px;

0 commit comments

Comments
 (0)