diff options
Diffstat (limited to 'build/basic-gulp-build-for-sass/index.html')
| -rw-r--r-- | build/basic-gulp-build-for-sass/index.html | 160 |
1 files changed, 95 insertions, 65 deletions
diff --git a/build/basic-gulp-build-for-sass/index.html b/build/basic-gulp-build-for-sass/index.html index 623dde2..e7f6aad 100644 --- a/build/basic-gulp-build-for-sass/index.html +++ b/build/basic-gulp-build-for-sass/index.html @@ -1,104 +1,134 @@ <!doctype html> -<html lang="en" id="top"> +<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="https://bt.ht/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" /> - <style>*{box-sizing:border-box;}body{font-family:sans-serif;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{overflow:auto;}table{text-align:left;width:100%;}</style> + <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> + <a href="#menu">Menu ↓</a> </nav> <main> -<h1>Basic Gulp Build for Sass</h1> +<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') + +<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/')); + outputStyle: 'compressed' + }).on('error', sass.logError)) + .pipe(gulp.dest('_includes/assets/css/')); }); -/* Compile the assets */ -gulp.task('assets', gulp.parallel( - 'styles' +/* Compile the assets */ +gulp.task('assets', gulp.parallel( + 'styles' )); -/* Build */ -gulp.task('build', gulp.series( - 'assets', - 'generate' +/* Build */ +gulp.task('build', gulp.series( + 'assets', + 'generate' )); </code></pre> -<p>Trust me, it's not complicated at all.</p> -<h2>Grabbing what we need</h2> + +<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'); + +<pre><code>var gulp = require('gulp'); +var shell = require('gulp-shell'); +var sass = require('gulp-sass'); </code></pre> -<h4>gulp</h4> -<p>This is the streaming build system, without it we can't do anything else.</p> -<h4>gulp-shell</h4> + +<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>gulp-sass</h4> + +<h4 id="gulp-sass">gulp-sass</h4> + <p>Required for gulp to compile Sass into vanilla CSS.</p> -<h4>Bonus tasks</h4> -<p><p>You can also toss in <code>gulp-minify</code> to clean-up any JavaScript you might be using, but for this example we're just going to keep things simple and focus on Sass only.</p></p> -<p><p class="no-margin">Maybe I'll write about my <code>js</code> build workflow in a future article.</p></p> -<h2>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')); + +<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>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') + +<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)) -</code></pre> -<pre><code>/* Change this to your destination directory */ -.pipe(gulp.dest('_includes/assets/css/')); + outputStyle: 'compressed' +}).on('error', sass.logError)) + +/* Change this to your destination directory */ +.pipe(gulp.dest('_includes/assets/css/')); </code></pre> -<h2>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>/* + +<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' +*/ +gulp.task('assets', gulp.parallel( + 'styles' )); </code></pre> -<h2>Altogether now!</h2> + +<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>/* + +<pre><code>/* Build -*/ -gulp.task('build', gulp.series( - 'assets', - 'generate' +*/ +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> + +<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"> |