Skip to content

Commit d17c095

Browse files
committed
Optimize gulp tasks
1 parent 54d30d6 commit d17c095

File tree

6 files changed

+63
-96
lines changed

6 files changed

+63
-96
lines changed

app/images/[email protected]

14.3 KB
Loading

app/index.html

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,23 @@
55
<title>Quckstart for jQuery</title>
66
<meta name="description" content="">
77
<link rel="shortcut icon" href="/favicon.ico">
8+
9+
<!-- build:css styles/main.css -->
810
<link rel="stylesheet" href="styles/main.css">
9-
<link rel="stylesheet" href="bower_components/chosen/chosen.css">
10-
<link rel="stylesheet" href="bower_components/iCheck/skins/all.css">
11+
<!-- endbuild -->
12+
13+
<!-- build:css styles/vendor.css -->
14+
<link rel="stylesheet" href="../bower_components/iCheck/skins/all.css">
15+
<link rel="stylesheet" href="../bower_components/chosen/chosen.css">
16+
<!-- endbuild -->
1117
</head>
1218
<body>
1319
<div class="container">
1420
<div class="jumbotron">
1521
<h1 id="slogan">Hello, Quick start</h1>
22+
<h2>
23+
<img class="logo" src="images/[email protected]">
24+
</h2>
1625
<p class="lead"></p>
1726
</div>
1827
<div class="row">
@@ -41,9 +50,14 @@ <h4>Select with <a href="https://github.com/fronteed/iCheck">iCheck</a></h4>
4150
</div>
4251
</div>
4352

44-
<script src="bower_components/jquery/dist/jquery.js"></script>
45-
<script src="bower_components/iCheck/iCheck.js"></script>
46-
<script src="bower_components/chosen/chosen.jquery.js"></script>
53+
<!-- build:js scripts/vendor.js -->
54+
<script src="../bower_components/jquery/dist/jquery.js"></script>
55+
<script src="../bower_components/iCheck/iCheck.js"></script>
56+
<script src="../bower_components/chosen/chosen.jquery.js"></script>
57+
<!-- endbuild -->
58+
59+
<!-- build:js scripts/main.min.js -->
4760
<script src="scripts/main.js"></script>
61+
<!-- endbuild -->
4862
</body>
4963
</html>

app/scripts/main.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,12 @@ $('#icheck-input').iCheck({
2222
cursor: true,
2323
checkboxClass: 'icheckbox_minimal',
2424
radioClass: 'iradio_minimal',
25-
increaseArea: '20%' // optional
25+
increaseArea: '20%'
2626
});
2727

2828
// Handle checked event fired
2929
$('#icheck-input input').on('ifChecked', function(e){
30-
console.log(e);
3130
if (e.type === 'ifChecked') {
32-
$('#slogan').text($(e.target).val());
31+
$('#slogan').text($(e.target).val());
3332
}
3433
});

app/styles/main.css

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,49 +13,54 @@ html, body {
1313
max-width: 730px;
1414
}
1515

16+
.container h4 {
17+
font-size: 18px;
18+
margin-top: 10px;
19+
margin-bottom: 10px;
20+
font-family: inherit;
21+
font-weight: 500;
22+
line-height: 1.1;
23+
color: inherit;
24+
}
25+
1626
.jumbotron {
1727
padding-top: 48px;
1828
padding-bottom: 48px;
1929
padding-right: 64px;
2030
padding-left: 64px;
2131
margin-bottom: 30px;
22-
background-color: #eee;
32+
background-color: #0769AD;
2333
text-align: center;
2434
border-bottom: 1px solid #e5e5e5;
2535
border-radius: 6px;
2636
}
2737

28-
.row {
29-
margin: 30px 0;
38+
.jumbotron h1 {
39+
color:#fff;
40+
}
41+
42+
.jumbotron h2 {
43+
max-width: 300px
3044
}
3145

3246
.row {
3347
position: relative;
34-
min-height: 1px;
48+
margin: 30px 0;
49+
min-height: 10px;
3550
padding-right: 15px;
3651
padding-left: 15px;
3752
}
3853

39-
h4 {
40-
font-size: 18px;
41-
margin-top: 10px;
42-
margin-bottom: 10px;
43-
font-family: inherit;
44-
font-weight: 500;
45-
line-height: 1.1;
46-
color: inherit;
47-
}
48-
4954
ul#icheck-input {
5055
padding: 0;
5156
}
5257

53-
#icheck-input li {
58+
ul#icheck-input li {
5459
list-style-type: none;
5560
padding: 0;
5661
}
5762

58-
#icheck-input label {
63+
ul#icheck-input label {
5964
margin-left: 10px;
6065
font-family: inherit;
6166
font-size: 16px;

gulpfile.js

Lines changed: 21 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
*
3-
* Quickstart gulpfile.js, This has changed from Web Starter Kit
3+
* Quickstart gulpfile.js, This has changed come from Web Starter Kit
44
*
55
* Licensed under Apache License, Copyright 2014 Google Inc.
66
* See the LICENSE for more details of licence
@@ -13,21 +13,8 @@ var $ = require('gulp-load-plugins')();
1313
var del = require('del');
1414
var runSequence = require('run-sequence');
1515
var browserSync = require('browser-sync');
16-
var pagespeed = require('psi');
1716
var reload = browserSync.reload;
1817

19-
var AUTOPREFIXER_BROWSERS = [
20-
'ie >= 10',
21-
'ie_mob >= 10',
22-
'ff >= 30',
23-
'chrome >= 34',
24-
'safari >= 7',
25-
'opera >= 23',
26-
'ios >= 7',
27-
'android >= 4.4',
28-
'bb >= 10'
29-
];
30-
3118
// Lint JavaScript
3219
gulp.task('jshint', function () {
3320
return gulp.src('app/scripts/**/*.js')
@@ -59,76 +46,52 @@ gulp.task('copy', function () {
5946
.pipe($.size({title: 'copy'}));
6047
});
6148

62-
63-
// Compile and Automatically Prefix Stylesheets
64-
gulp.task('styles', function () {
65-
// For best performance, don't add Sass partials to `gulp.src`
66-
return gulp.src([
67-
'app/styles/**/*.css',
68-
]).on('error', console.error.bind(console))
69-
.pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
70-
.pipe(gulp.dest('.tmp/styles'))
71-
// Concatenate And Minify Styles
72-
.pipe($.if('*.css', $.csso()))
73-
.pipe(gulp.dest('dist/styles'))
74-
.pipe($.size({title: 'styles'}));
75-
});
76-
7749
// Scan Your HTML For Assets & Optimize Them
7850
gulp.task('html', function () {
79-
var assets = $.useref.assets({searchPath: '{.tmp,app}'});
51+
var assets = $.useref.assets({searchPath: ['app']});
8052

81-
return gulp.src('app/**/*.html')
53+
return gulp.src('app/**/*.html').on('error', console.error.bind(console))
8254
.pipe(assets)
83-
// Concatenate And Minify JavaScript
8455
.pipe($.if('*.js', $.uglify({preserveComments: 'some'})))
85-
// Remove Any Unused CSS
86-
// Note: If not using the Style Guide, you can delete it from
87-
// the next line to only include styles your project uses.
88-
.pipe($.if('*.css', $.uncss({
89-
html: [
90-
'app/index.html',
91-
],
92-
// CSS Selectors for UnCSS to ignore
93-
ignore: []
94-
})))
95-
// Concatenate And Minify Styles
96-
// In case you are still using useref build blocks
9756
.pipe($.if('*.css', $.csso()))
9857
.pipe(assets.restore())
9958
.pipe($.useref())
100-
// Update Production Style Guide Paths
101-
.pipe($.replace('components/components.css', 'components/main.min.css'))
102-
// Minify Any HTML
10359
.pipe($.if('*.html', $.minifyHtml()))
104-
// Output Files
10560
.pipe(gulp.dest('dist'))
10661
.pipe($.size({title: 'html'}));
10762
});
10863

64+
// Copy the files associated with components
65+
gulp.task('assets', function () {
66+
return gulp.src([
67+
'bower_components/iCheck/skins/**/*',
68+
'!bower_components/iCheck/skins/all.css',
69+
'bower_components/chosen/[email protected]',
70+
'bower_components/chosen/chosen-sprite.png',
71+
], {
72+
dot: true
73+
}).pipe(gulp.dest('dist/styles'))
74+
.pipe($.size({title: 'copy'}));
75+
});
76+
10977
// Clean Output Directory
110-
gulp.task('clean', del.bind(null, ['.tmp', 'dist']));
78+
gulp.task('clean', del.bind(null, ['dist']));
11179

11280
// Watch Files For Changes & Reload
113-
gulp.task('serve', ['styles'], function () {
81+
gulp.task('serve', function () {
11482
browserSync({
11583
notify: false,
116-
// Customize the BrowserSync console logging prefix
11784
logPrefix: 'QS',
118-
// Run as an https by uncommenting 'https: true'
119-
// Note: this uses an unsigned certificate which on first access
120-
// will present a certificate warning in the browser.
121-
// https: true,
12285
server: {
123-
baseDir: ['.tmp', 'app'],
86+
baseDir: 'app',
12487
routes: {
12588
"/bower_components": "./bower_components"
12689
}
12790
}
12891
});
12992

13093
gulp.watch(['app/**/*.html'], reload);
131-
gulp.watch(['app/styles/**/*.css'], ['styles', reload]);
94+
gulp.watch(['app/styles/**/*.css'], [reload]);
13295
gulp.watch(['app/scripts/**/*.js'], ['jshint']);
13396
gulp.watch(['app/images/**/*'], reload);
13497
});
@@ -138,15 +101,11 @@ gulp.task('serve:dist', ['default'], function () {
138101
browserSync({
139102
notify: false,
140103
logPrefix: 'QS',
141-
// Run as an https by uncommenting 'https: true'
142-
// Note: this uses an unsigned certificate which on first access
143-
// will present a certificate warning in the browser.
144-
// https: true,
145104
server: 'dist'
146105
});
147106
});
148107

149108
// Build Production Files, the Default Task
150109
gulp.task('default', ['clean'], function (cb) {
151-
runSequence('styles', ['jshint', 'html', 'images', 'copy'], cb);
110+
runSequence(['jshint', 'html', 'images', 'copy', 'assets'], cb);
152111
});

package.json

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,19 @@
11
{
22
"devDependencies": {
3-
"apache-server-configs": "^2.7.1",
43
"browser-sync": "^1.3.0",
54
"del": "^0.1.2",
65
"gulp": "^3.8.5",
7-
"gulp-autoprefixer": "^1.0.0",
86
"gulp-cache": "^0.2.2",
9-
"gulp-changed": "^1.0.0",
107
"gulp-csso": "^0.2.9",
11-
"gulp-flatten": "^0.0.2",
128
"gulp-if": "^1.2.1",
139
"gulp-imagemin": "^1.0.0",
1410
"gulp-jshint": "^1.6.3",
1511
"gulp-load-plugins": "^0.6.0",
1612
"gulp-minify-html": "^0.1.5",
17-
"gulp-replace": "^0.4.0",
18-
"gulp-ruby-sass": "^0.7.1",
1913
"gulp-size": "^1.0.0",
2014
"gulp-uglify": "^1.0.1",
21-
"gulp-uncss": "^0.4.5",
2215
"gulp-useref": "^1.0.1",
2316
"jshint-stylish": "^0.4.0",
24-
"opn": "^1.0.0",
25-
"psi": "^0.1.2",
26-
"require-dir": "^0.1.0",
2717
"run-sequence": "^0.3.6"
2818
},
2919
"engines": {

0 commit comments

Comments
 (0)