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
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Basic Gulp Build for Sass</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="basic-gulp-build-for-sass">Basic Gulp Build for Sass</h1>
<p>2019-01-15</p>
<p>Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like <code>gulp</code> and <code>grunt</code> can seem daunting at first. So, I’ve decided to showcase my go-to setup for <code>gulp</code> and explain what the heck it does step-by-step. </p>
<p>Here is the final <code>gulp.js</code> file in all it’s glory:</p>
<pre><code>var gulp = require('gulp');
var shell = require('gulp-shell');
var sass = require('gulp-sass');
/* Build and watch Jekyll (change this task to whatever you need) */
gulp.task('generate', shell.task('jekyll serve'));
/* Compile SCSS files to CSS */
gulp.task('styles', function () {
return gulp.src('_includes/assets/sass/styles.scss')
.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('_includes/assets/css/'));
});
/* Compile the assets */
gulp.task('assets', gulp.parallel(
'styles'
));
/* Build */
gulp.task('build', gulp.series(
'assets',
'generate'
));
</code></pre>
<p>Trust me, it’s not complicated at all.</p>
<h2 id="grabbing-what-we-need">Grabbing what we need</h2>
<p>For our basic build file we are going to need only three modules: <code>gulp</code>, <code>gulp-shell</code> and <code>gulp-sass</code>.</p>
<pre><code>var gulp = require('gulp');
var shell = require('gulp-shell');
var sass = require('gulp-sass');
</code></pre>
<h4 id="gulp">gulp</h4>
<p>This is the streaming build system, without it we can’t do anything else.</p>
<h4 id="gulp-shell">gulp-shell</h4>
<p>A gulp command line interface for us to interact with our terminal.</p>
<h4 id="gulp-sass">gulp-sass</h4>
<p>Required for gulp to compile Sass into vanilla CSS.</p>
<h4 id="bonus-tasks">Bonus tasks</h4>
<h2 id="generating-the-build">Generating the build</h2>
<p>Our first step is to create the default task that will generate our build. In this example we are making the assumption that we’re building a Jekyll website (but you can place any build command here):</p>
<pre><code>gulp.task('generate', shell.task('jekyll serve'));
</code></pre>
<p>Don’t worry if this <code>generate</code> isn’t clear, we come back to that later.</p>
<h2 id="processing-our-pre-processor">Processing our pre-processor</h2>
<p>We will name this next task <code>styles</code> since that’s what it outputs - our styling. We start by telling gulp where our main <code>scss</code> directory is:</p>
<pre><code>/* Change this directory to match yours */
return gulp.src('_includes/assets/sass/styles.scss')
</code></pre>
<p>This next piece tells the plugin to compress our final compiled CSS, log any errors if there are issues with the build and then export it to our destination directory:</p>
<pre><code>.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
/* Change this to your destination directory */
.pipe(gulp.dest('_includes/assets/css/'));
</code></pre>
<h2 id="building-our-assets">Building our assets</h2>
<p>This step isn’t 100% needed, but I like to include it for when more assets need to be added (minifying JavaScript, compressing images, etc)</p>
<pre><code>/*
Compile the assets
*/
gulp.task('assets', gulp.parallel(
'styles'
));
</code></pre>
<h2 id="altogether-now">Altogether now!</h2>
<p>Now we add a task that runs all other tasks in our gulp file (in this case it will run both <code>assets</code> and <code>generate</code>)</p>
<pre><code>/*
Build
*/
gulp.task('build', gulp.series(
'assets',
'generate'
));
</code></pre>
<p>And that’s it - we’re done! A very basic <code>gulp</code> build for compiling Sass.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
