1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>I love to Grunt and Gulp · Allegiant</title>
<link rel="stylesheet" href="http://localhost:1313//css/style.css" />
<link rel="stylesheet" href="http://localhost:1313//css/font-awesome.min.css" />
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,600' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="header" style="background-color: #009DDC;
background-image: url(http://localhost:1313//img/texture.png),linear-gradient(to bottom, #009DDC, #006ccb);background-repeat: repeat, no-repeat;background-position: left top, left top;background-size: 100px 100px, 100% 100%;" role="banner">
<section id="branding">
<div id="site-title"><a href="http://localhost:1313/">Allegiant</a></div>
<nav id="mainmenu">
<ul>
<li><a href="http://localhost:1313/">Articles</a></li>
<li><a href="http://github.com/username" target="_blank">Github</a></li>
<li><a href="https://twitter.com/username" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/username" target="_blank">LinkedIn</a></li>
</ul>
</nav>
<input type="checkbox" id="op"></input>
<div class="lower">
<label for="op">Menu</label>
</div>
<div class="overlay overlay-hugeinc">
<label for="op"></label>
<nav id="menu" role="navigation">
<ul>
<li><a href="http://localhost:1313/">Articles</a></li>
<li><a href="http://github.com/username" target="_blank">Github</a></li>
<li><a href="https://twitter.com/username" target="_blank">Twitter</a></li>
<li><a href="https://www.linkedin.com/in/username" target="_blank">LinkedIn</a></li>
</ul>
</nav>
</div>
<div class="clearfix"></div>
</section>
<div class="post-heading">
<h1>
I love to Grunt and Gulp
<div class="share-icons-header">
<a href="http://www.twitter.com/share?url=http%3a%2f%2flocalhost%3a1313%2fpost%2f2015-02-14-i-love-to-grunt-and-gulp%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M437.219,245.162c0-3.088-0.056-6.148-0.195-9.18c13.214-9.848,24.675-22.171,33.744-36.275
c-12.129,5.453-25.148,9.097-38.835,10.626c13.965-8.596,24.675-22.338,29.738-38.834c-13.075,7.928-27.54,13.603-42.924,16.552
c-12.323-14.021-29.904-22.95-49.35-23.284c-37.332-0.612-67.598,30.934-67.598,70.463c0,5.619,0.584,11.072,1.752,16.329
c-56.22-3.616-106.042-32.881-139.369-77c-5.814,10.571-9.152,22.922-9.152,36.164c0,25.037,11.934,47.291,30.071,60.421
c-11.099-0.5-21.503-3.866-30.627-9.375c0,0.306,0,0.612,0,0.918c0,34.996,23.312,64.316,54.245,71.159
c-5.675,1.613-11.656,2.448-17.804,2.421c-4.367-0.028-8.596-0.501-12.713-1.392c8.596,28.681,33.577,49.628,63.147,50.323
c-23.145,19.194-52.298,30.655-83.955,30.572c-5.453,0-10.849-0.361-16.135-1.029c29.933,20.53,65.456,32.491,103.65,32.491
C369.23,447.261,437.219,339.048,437.219,245.162z"/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="http://plus.google.com/share?url=http%3a%2f%2flocalhost%3a1313%2fpost%2f2015-02-14-i-love-to-grunt-and-gulp%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M349.146,402.251c0-30.016-17.387-44.815-36.525-60.922l-15.662-12.185c-4.785-3.895-11.294-9.124-11.294-18.693
c0-9.57,6.537-15.662,12.184-21.309c18.249-14.354,36.526-29.571,36.526-61.756c0-33.076-20.892-50.462-30.878-58.724l0,0h26.956
L358.271,153h-89.603c-23.479,0-53.049,3.478-77.863,23.924c-18.693,16.079-27.818,38.278-27.818,58.279
c0,33.911,26.093,68.294,72.188,68.294c4.368,0,9.125-0.445,13.937-0.863c-2.17,5.23-4.34,9.569-4.34,16.97
c0,13.464,6.955,21.753,13.047,29.57c-19.556,1.308-56.109,3.478-83.065,20.001c-25.676,15.217-33.493,37.416-33.493,53.077
c0,32.186,30.461,62.201,93.525,62.201C309.561,484.454,349.146,443.116,349.146,402.251z M255.621,291.34
c-37.415,0-54.384-48.292-54.384-77.418c0-11.322,2.17-23.034,9.569-32.186c6.955-8.707,19.139-14.382,30.461-14.382
c36.108,0,54.802,48.738,54.802,80.033c0,7.845-0.862,21.754-10.877,31.768C278.237,286.11,266.498,291.312,255.621,291.34z
M256.066,466.177c-46.54,0-76.556-22.171-76.556-53.049s27.846-41.311,37.416-44.787c18.276-6.093,41.755-6.982,45.677-6.982
c4.34,0,6.51,0,9.987,0.445c33.076,23.479,47.402,35.218,47.402,57.416C319.992,446.176,297.821,466.177,256.066,466.177z"/>
<polygon points="353.068,317.768 400.164,317.768 400.164,364.836 423.699,364.836 423.699,317.768 470.768,317.768
470.768,294.233 423.699,294.233 423.699,247.165 400.164,247.165 400.164,294.233 353.068,294.233 "/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2flocalhost%3a1313%2fpost%2f2015-02-14-i-love-to-grunt-and-gulp%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
<path d="M317.739,482.617V306h58.279l9.208-58.529h-67.487v-29.348c0-15.272,5.007-29.849,26.928-29.849h43.813v-58.418h-62.201
c-52.298,0-66.569,34.438-66.569,82.175v35.413h-35.885V306h35.885v176.617H317.739L317.739,482.617z"/>
</g>
</svg>
</a>
</div>
</h1>
</div>
</header>
<div id="container">
<section id="content" role="main">
<section class="entry-meta">
<span class="post-date">Feb 14, 2015</span>
</section></header>
<section class="entry-content">
<article>
<p>(Happy Valentine’s Day, ya’ll. Get off the computer and go buy something nice for your woman.)</p>
<p>Sometimes I like to pretend that I know stuff, when I really don’t. Gulp is one of those things. :)</p>
<p>I need to get better at finding solutions to a lot of the repetitive tasks that I do on a daily basis. Up until now, let’s say I was about to push some production code to the web. Of course I needed to minify the CSS first. So I would copy the code, hit up <a href="http://cssminifier.com/" target="_blank">CSS Minifier</a>, paste the code back into my CSS file, and then rename the file, <code>styles.min.css</code>. This wouldn’t be that big of an issue if I only did it once upon completion of a site. But it never really worked out that way. I’d forget to change a specific style last minute, and then I’d have to copy all of my code into CSS Minifier and do it all again.</p>
<p>Wouldn’t it be great if there were a service that did all of this for you, automatically? You’re in luck! They’re called “Task Runners”. I’m going to be focusing on “Gulp”, which is a JavaScript task runner, built off of Node.js.</p>
<p>Now, to many of you, you’ve probably been using a task runner of some sort for years. For a long time, Grunt has been the big name in the game. Not too long ago, Gulp emerged and has been hogging the spotlight. It’s not only faster at rendering, but it also has an easier-to-read syntax.</p>
<p>Now, I’m too lazy to reinvent the wheel and write a tutorial on how to install and run gulp. <a href="http://travismaynard.com/writing/getting-started-with-gulp" target="_blank">This guy</a> does a much better job than I could do, anyway.</p>
<p>But I did at least want to post my gulpfile and say how freaking awesome it is. By simply running the <code>gulp</code> command, in less than second, I can minify my CSS, JS, and HTML, concatenate multiple files into one, rename them automatically, add in browser prefixes, and then reload the browser window. In less than a second. Boom. Pretty nifty, huh? Additionally, my gulpfile will watch for any changes to those files, and rerun all of those tanks without me doing anything. Dope.</p>
<pre><code class="language-js">var gulp = require('gulp');
/**********************************************
****************** Modules ********************
***********************************************/
var sass = require('gulp-ruby-sass'); //Compiles SASS
var autoprefix = require('gulp-autoprefixer'); //Automatically throws in browser prefixes
var minifycss = require('gulp-minify-css'); //Minifies CSS
var rename = require("gulp-rename"); //Renames files to .min after minifying
var minifyhtml = require('gulp-minify-html'); //Minifies the HTML
var concat = require('gulp-concat'); //Concatenates all source files into one file
var uglify = require('gulp-uglify'); //Removes whitespaces from JavaScript
var imagemin = require('gulp-imagemin'); //Compresses images
var livereload = require('gulp-livereload'); //Live reload
var plumber = require('gulp-plumber'); //Error handling
/**********************************************
****************** Functions ********************
***********************************************/
// css auto-prefix, minify, and rename
gulp.task('styles', function() {
return sass('src/styles/', {style:'expanded'}).on('error', function(handleError){ console.log('Error: There\'s a problem with your SASS, stupid. Fix that shiz.'); })
.pipe(autoprefix('last 2 versions'))
.pipe(minifycss())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('build/styles/'))
.pipe(livereload());
});
// minify new images
gulp.task('imagemin', function() {
gulp.src('src/images/*.jpg').on('error', function(handleError){ console.log('Error: There\'s a problem with your images, stupid. Fix that shiz.'); })
.pipe(imagemin())
.pipe(gulp.dest('build/images/'));
});
// minify new or changed HTML pages
gulp.task('html', function() {
gulp.src('src/*.html')
.pipe(minifyhtml())
.pipe(gulp.dest('build/'))
.pipe(livereload());
});
// JS concat, strip debugging and minify
gulp.task('scripts', function() {
gulp.src('src/scripts/*.js')
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(rename({suffix:'.min'}))
.pipe(gulp.dest('build/scripts/'))
.pipe(livereload());
});
/**********************************************
************ Watch & Build Tasks **************
***********************************************/
gulp.task('default', ['styles', 'html', 'scripts', 'imagemin'], function() {
// watch for CSS changes & minify
gulp.watch('./src/styles/*.scss', function() {
livereload.listen();
gulp.run('styles');
});
// watch for html &amp; minify
gulp.watch('./src/*.html', function() {
livereload.listen();
gulp.run('html');
});
// watch for JS changes
gulp.watch('./src/scripts/*.js', function() {
livereload.listen();
gulp.run('scripts');
});
// watch for new images
gulp.watch('./src/images/*.jpg', function() {
gulp.run('imagemin');
});
});
</code></pre>
<p>This isn’t even the tip of the iceberg. There are hundreds of gulp plugins, and I have yet to play with the majority of them. But these seem to be the most basic/common plugins, and so far, they’ve proved invaluable.</p>
</section>
<div class="entry-links"></div>
</article>
<div class="share-icons-body">
<a href="http://www.twitter.com/share?url=http%3a%2f%2flocalhost%3a1313%2fpost%2f2015-02-14-i-love-to-grunt-and-gulp%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M437.219,245.162c0-3.088-0.056-6.148-0.195-9.18c13.214-9.848,24.675-22.171,33.744-36.275
c-12.129,5.453-25.148,9.097-38.835,10.626c13.965-8.596,24.675-22.338,29.738-38.834c-13.075,7.928-27.54,13.603-42.924,16.552
c-12.323-14.021-29.904-22.95-49.35-23.284c-37.332-0.612-67.598,30.934-67.598,70.463c0,5.619,0.584,11.072,1.752,16.329
c-56.22-3.616-106.042-32.881-139.369-77c-5.814,10.571-9.152,22.922-9.152,36.164c0,25.037,11.934,47.291,30.071,60.421
c-11.099-0.5-21.503-3.866-30.627-9.375c0,0.306,0,0.612,0,0.918c0,34.996,23.312,64.316,54.245,71.159
c-5.675,1.613-11.656,2.448-17.804,2.421c-4.367-0.028-8.596-0.501-12.713-1.392c8.596,28.681,33.577,49.628,63.147,50.323
c-23.145,19.194-52.298,30.655-83.955,30.572c-5.453,0-10.849-0.361-16.135-1.029c29.933,20.53,65.456,32.491,103.65,32.491
C369.23,447.261,437.219,339.048,437.219,245.162z"/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="http://plus.google.com/share?url=http%3a%2f%2flocalhost%3a1313%2fpost%2f2015-02-14-i-love-to-grunt-and-gulp%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M349.146,402.251c0-30.016-17.387-44.815-36.525-60.922l-15.662-12.185c-4.785-3.895-11.294-9.124-11.294-18.693
c0-9.57,6.537-15.662,12.184-21.309c18.249-14.354,36.526-29.571,36.526-61.756c0-33.076-20.892-50.462-30.878-58.724l0,0h26.956
L358.271,153h-89.603c-23.479,0-53.049,3.478-77.863,23.924c-18.693,16.079-27.818,38.278-27.818,58.279
c0,33.911,26.093,68.294,72.188,68.294c4.368,0,9.125-0.445,13.937-0.863c-2.17,5.23-4.34,9.569-4.34,16.97
c0,13.464,6.955,21.753,13.047,29.57c-19.556,1.308-56.109,3.478-83.065,20.001c-25.676,15.217-33.493,37.416-33.493,53.077
c0,32.186,30.461,62.201,93.525,62.201C309.561,484.454,349.146,443.116,349.146,402.251z M255.621,291.34
c-37.415,0-54.384-48.292-54.384-77.418c0-11.322,2.17-23.034,9.569-32.186c6.955-8.707,19.139-14.382,30.461-14.382
c36.108,0,54.802,48.738,54.802,80.033c0,7.845-0.862,21.754-10.877,31.768C278.237,286.11,266.498,291.312,255.621,291.34z
M256.066,466.177c-46.54,0-76.556-22.171-76.556-53.049s27.846-41.311,37.416-44.787c18.276-6.093,41.755-6.982,45.677-6.982
c4.34,0,6.51,0,9.987,0.445c33.076,23.479,47.402,35.218,47.402,57.416C319.992,446.176,297.821,466.177,256.066,466.177z"/>
<polygon points="353.068,317.768 400.164,317.768 400.164,364.836 423.699,364.836 423.699,317.768 470.768,317.768
470.768,294.233 423.699,294.233 423.699,247.165 400.164,247.165 400.164,294.233 353.068,294.233 "/>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
</g>
</svg></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2flocalhost%3a1313%2fpost%2f2015-02-14-i-love-to-grunt-and-gulp%2f" target="_blank">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
<g>
<path d="M612,306C612,137.004,474.995,0,306,0C137.004,0,0,137.004,0,306c0,168.995,137.004,306,306,306
C474.995,612,612,474.995,612,306z M27.818,306C27.818,152.36,152.36,27.818,306,27.818S584.182,152.36,584.182,306
S459.64,584.182,306,584.182S27.818,459.64,27.818,306z"/>
<path d="M317.739,482.617V306h58.279l9.208-58.529h-67.487v-29.348c0-15.272,5.007-29.849,26.928-29.849h43.813v-58.418h-62.201
c-52.298,0-66.569,34.438-66.569,82.175v35.413h-35.885V306h35.885v176.617H317.739L317.739,482.617z"/>
</g>
</svg>
</a>
</div>
<div class="clearfix"></div>
<figure class="author-bio">
<img class="bio-image" src="../../img/avatar.jpg" />
<figcaption class="bio-text">Insert your bio here. You should write something really whitty and interesting that nobody is ever going to read or care about. But such is life. I really like the look of having a bio snippet on the blog, though. You may have to adjust some CSS styles depending on how long or short your bio is. I didn't make it super resillient.</figcaption>
</figure>
<hr>
</section>
<div class="clear"></div>
</div>
<footer id="footer" style="color: #7A7B7C; background-color: #3A3B3C;background-image: url(http://localhost:1313//img/texture.png),linear-gradient(to bottom, #3A3B3C, #1d1e1e); background-repeat: repeat, no-repeat; background-position: left top, left top; background-size: 100px 100px, 100% 100%;">
<div id="footer-container">
<div class="footer-column">Some text here.</div>
<div class="footer-column">Some different text here.</div>
<div class="footer-column">Even more different text here.</div>
<div class="clearfix"></div>
</div>
<div id="copyright">© Allegiant. All Rights Reserved.</div>
</footer>
<script src="http://localhost:1313//js/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'Your Google Analytics tracking id', 'auto');
ga('send', 'pageview');
</script>
</div>
<script data-no-instant>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':1313/livereload.js?mindelay=10"></'
+ 'script>')</script></body>
<link rel="shortcut icon" href="http://localhost:1313//img/favicon.ico" />
<link rel="apple-touch-icon" href="http://localhost:1313//img/apple-touch-icon.jpg" />
</html>
|
