Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/jpachecox/setup-gulp/llms.txt

Use this file to discover all available pages before exploring further.

Setup Gulp uses a two-stage approach to stylesheet processing. SCSS source files are compiled to plain CSS and written to src/css/, and a separate minification task then picks those files up, compresses them, and outputs them to assets/. This separation means each stage can run independently and BrowserSync can stream CSS updates without a full page reload.

​
sass Task

The sass task handles root-level SCSS files at ./src/scss/*.scss. Before compiling, it uses merge-stream to combine normalize.css from node_modules/ with the SCSS source stream, and gulp-concat to concatenate them into a single styles.css in the pipeline. The result is then passed to compileSass.
The compileSass helper opens a fresh gulp.src(srcPath) stream internally, so it re-reads from paths.sass directly rather than receiving the concatenated stream as input. In practice this means the normalize.css merge and concat steps in the sass task do not flow through to the Sass compiler — only the SCSS files at ./src/scss/*.scss are compiled. This is a known quirk of the current gulpfile implementation.
Source glob: ./src/scss/*.scss 
gulp.task('sass', () => {
  const reset = gulp.src('node_modules/normalize.css/normalize.css')
  const scss  = gulp.src(paths.sass)

  return merge(reset, scss)
    .pipe(plumber({ errorHandler: handleErrors }))
    .pipe(concat('styles.css'))
    .pipe(compileSass(paths.sass, ''))
})
The compileSass helper that powers this (and the component/section tasks) is: 
const compileSass = (srcPath, prefix) => {
  return gulp.src(srcPath)
    .pipe(plumber({ errorHandler: handleErrors }))
    .pipe(
      sassCompiler({
        includePaths: [].concat(bourbonPaths, neatPaths),
        errLogToConsole: true
      })
    )
    .pipe(postcss([autoprefixer()]))
    .pipe(size({ gzip: true, showFiles: true }))
    .pipe(rename({ prefix, suffix: '', dirname: '' }))
    .pipe(gulp.dest('./src/css'))
    .pipe(browserSync.stream())
}
The include paths for both Bourbon and Bourbon Neat are passed directly to the Sass compiler, so you can use Bourbon mixins and the Neat grid system anywhere in your SCSS without explicit @import path configuration.

​
sassComponents Task

The sassComponents task compiles every SCSS file found in ./src/scss/components/ and adds a component- prefix to the output filename so compiled component styles are clearly namespaced in src/css/. Source glob: ./src/scss/components/*.scss 
gulp.task('sassComponents', () => compileSass(paths.sassComponents, 'component-'))
Example rename:
SourceOutput
src/scss/components/loading-spinner.scsssrc/css/component-loading-spinner.css
src/scss/components/modal.scsssrc/css/component-modal.css

​
sassSections Task

The sassSections task compiles every SCSS file in ./src/scss/sections/ and adds a section- prefix to output filenames, matching the naming convention used by Shopify theme sections. Source glob: ./src/scss/sections/*.scss 
gulp.task('sassSections', () => compileSass(paths.sassSections, 'section-'))
Example rename:
SourceOutput
src/scss/sections/hero.scsssrc/css/section-hero.css
src/scss/sections/product.scsssrc/css/section-product.css

​
lintScss Task

The lintScss task runs all root-level SCSS files through gulp-sass-lint, prints a formatted report to the console, and fails the process if any linting errors are found. It uses plumber for error handling during the piping stage. Source glob: ./src/scss/*.scss 
gulp.task('lintScss', () =>
  gulp
    .src(paths.sass)
    .pipe(plumber({ errorHandler: handleErrors }))
    .pipe(sasslint())
    .pipe(sasslint.format())
    .pipe(sasslint.failOnError())
)
Run it directly with: 
gulp lintScss

​
minifyCss Task

The minifyCss task reads every CSS file produced by the SCSS compilation tasks from ./src/css/, runs them through gulp-clean-css for minification, attaches inline source maps, appends a .min suffix to each filename, and writes the final files to ./assets/. Source glob: ./src/css/*.css 
gulp.task('minifyCss', () =>
  gulp
    .src(paths.css)
    .pipe(sourcemaps.init())
    .pipe(cleanCSS())
    .pipe(sourcemaps.write())
    .pipe(size({ gzip: true, showFiles: true }))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(paths.dest))
    .pipe(browserSync.stream())
)
Example rename:
Input (src/css/)Output (assets/)
app.cssapp.min.css
component-modal.csscomponent-modal.min.css
section-hero.csssection-hero.min.css
Run it directly with: 
gulp minifyCss
The CSS compilation pipeline is intentionally two-stage. The sass, sassComponents, and sassSections tasks write plain, uncompressed CSS to src/css/ — a staging area you can inspect during development. Once those files are ready, minifyCss reads from src/css/ and outputs production-ready .min.css files to assets/. The watch task links these stages: changes to src/scss/ trigger sass* tasks, which write to src/css/, which in turn triggers minifyCss automatically.
Both the SCSS compilation tasks and minifyCss pipe through browserSync.stream(). This pushes CSS changes directly into the browser over a WebSocket connection without triggering a full page reload, giving you near-instant style feedback during development.

Build docs developers (and LLMs) love

Get started for freeTalk to us