From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/basic-gulp-build-for-sass/index.html | 123 +++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 build/basic-gulp-build-for-sass/index.html (limited to 'build/basic-gulp-build-for-sass/index.html') diff --git a/build/basic-gulp-build-for-sass/index.html b/build/basic-gulp-build-for-sass/index.html new file mode 100644 index 0000000..3ad00b1 --- /dev/null +++ b/build/basic-gulp-build-for-sass/index.html @@ -0,0 +1,123 @@ + + + + + + + + Basic Gulp Build for Sass + + + + + + + +
+

Basic Gulp Build for Sass

+

2019-01-15

+

Some designers might shy away from build tools when first starting out and I can understand the reasoning - task runners like gulp and grunt can seem daunting at first. So, I’ve decided to showcase my go-to setup for gulp and explain what the heck it does step-by-step.

+

Here is the final gulp.js file in all it’s glory:

+
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'
+));
+
+

Trust me, it’s not complicated at all.

+

Grabbing what we need

+

For our basic build file we are going to need only three modules: gulp, gulp-shell and gulp-sass.

+
var gulp = require('gulp');
+var shell = require('gulp-shell');
+var sass = require('gulp-sass');
+
+

gulp

+

This is the streaming build system, without it we can’t do anything else.

+

gulp-shell

+

A gulp command line interface for us to interact with our terminal.

+

gulp-sass

+

Required for gulp to compile Sass into vanilla CSS.

+

Bonus tasks

+

Generating the build

+

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):

+
gulp.task('generate', shell.task('jekyll serve'));
+
+

Don’t worry if this generate isn’t clear, we come back to that later.

+

Processing our pre-processor

+

We will name this next task styles since that’s what it outputs - our styling. We start by telling gulp where our main scss directory is:

+
/* Change this directory to match yours */
+return gulp.src('_includes/assets/sass/styles.scss')
+
+

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:

+
.pipe(sass({
+    outputStyle: 'compressed'
+}).on('error', sass.logError))
+
+/* Change this to your destination directory */
+.pipe(gulp.dest('_includes/assets/css/'));
+
+

Building our assets

+

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)

+
/*
+Compile the assets
+*/
+gulp.task('assets', gulp.parallel(
+    'styles'
+));
+
+

Altogether now!

+

Now we add a task that runs all other tasks in our gulp file (in this case it will run both assets and generate)

+
/*
+Build
+*/
+gulp.task('build', gulp.series(
+    'assets',
+    'generate'
+));
+
+

And that’s it - we’re done! A very basic gulp build for compiling Sass.

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf