Skip to content

Instantly share code, notes, and snippets.

@chriscoyier

chriscoyier/gulpfile.js

Created December 17, 2019 15:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chriscoyier/822dae83e2ed8e16129bc3c0866327b9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chriscoyier/822dae83e2ed8e16129bc3c0866327b9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chriscoyier created this gist Dec 17, 2019.
    85 changes: 85 additions & 0 deletions gulpfile.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,85 @@
    // gulpfile.js
    // Initialize modules
    const gulp = require('gulp');
    // Importing all the Gulp-related packages we want to use
    const concat = require('gulp-concat');
    const sourcemaps = require('gulp-sourcemaps');
    const sass = require('gulp-sass');
    //const browserSync = require('browser-sync');
    //const server = browserSync.create();
    const child = require('child_process');
    const gutil = require('gulp-util');
    const sassGlob = require('gulp-sass-glob');
    const webpack = require('webpack-stream');
    // File paths
    const files = {
    scssPath: '_includes/beatrice/**/*.scss',
    jsPath: '_includes/beatrice/**/*.js'
    }
    // Sass task: compiles the style.scss file into style.css
    function scssTask(){
    return gulp.src(files.scssPath)
    .pipe(sourcemaps.init()) // initialize sourcemaps first
    .pipe(sassGlob())
    .pipe(sass({
    includePaths: ['node_modules'],
    outputStyle: 'compressed'
    }))
    .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
    .pipe(gulp.dest('assets/css')); // put final CSS in dist folder
    }
    // JS task: compiles JS files into main.js
    function jsTask(){
    return gulp.src(files.jsPath)
    .pipe(webpack())
    .pipe(concat('main.js'))
    .pipe(gulp.dest('assets/js')); // put final JS in dist folder
    }
    // Watch task: watch SCSS and JS files for changes
    // If any change, run scss and js tasks simultaneously
    function watchTask(){
    gulp.watch([files.scssPath, files.jsPath], gulp.series(scssTask, jsTask, jekyllBuild));
    gulp.watch(
    [
    './_layouts/**/*',
    './_pages/**/*',
    './_posts/**/*'
    ], gulp.series(jekyllBuild))
    }
    function jekyll(done) {
    const jekyll = child.spawn('bundle', ['exec',
    'jekyll',
    'serve'
    ]);
    const jekyllLogger = (buffer) => {
    buffer.toString()
    .split(/\n/)
    .forEach((message) => gutil.log('Jekyll: ' + message));
    };
    jekyll.stdout.on('data', jekyllLogger);
    jekyll.stderr.on('data', jekyllLogger);
    done();
    };
    function jekyllBuild(done) {
    const jekyll = child.spawn('bundle', ['exec',
    'jekyll',
    'build'
    ]);
    const jekyllLogger = (buffer) => {
    buffer.toString()
    .split(/\n/)
    .forEach((message) => gutil.log('Jekyll: ' + message));
    };
    jekyll.stdout.on('data', jekyllLogger);
    jekyll.stderr.on('data', jekyllLogger);
    done();
    };
    // Export the default Gulp task so it can be run
    // Runs the scss and js tasks simultaneously
    // then runs cacheBust, then watch task
    exports.default = gulp.series(
    scssTask,
    jsTask,
    jekyll,
    watchTask
    );