|
| 1 | +'use strict'; |
| 2 | + |
| 3 | +import plugins from 'gulp-load-plugins'; |
| 4 | +import yargs from 'yargs'; |
| 5 | +import browser from 'browser-sync'; |
| 6 | +import gulp from 'gulp'; |
| 7 | +import panini from 'panini'; |
| 8 | +import rimraf from 'rimraf'; |
| 9 | +import sherpa from 'style-sherpa'; |
| 10 | +import yaml from 'js-yaml'; |
| 11 | +import fs from 'fs'; |
| 12 | + |
| 13 | +// Load all Gulp plugins into one variable |
| 14 | +const $ = plugins(); |
| 15 | + |
| 16 | +// Check for --production flag |
| 17 | +const PRODUCTION = !!(yargs.argv.production); |
| 18 | + |
| 19 | +// Load settings from settings.yml |
| 20 | +const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig(); |
| 21 | + |
| 22 | +function loadConfig() { |
| 23 | + let ymlFile = fs.readFileSync('config.yml', 'utf8'); |
| 24 | + return yaml.load(ymlFile); |
| 25 | +} |
| 26 | + |
| 27 | +// Build the "dist" folder by running all of the below tasks |
| 28 | +gulp.task('build', |
| 29 | + gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide)); |
| 30 | + |
| 31 | +// Build the site, run the server, and watch for file changes |
| 32 | +gulp.task('default', |
| 33 | + gulp.series('build', server, watch)); |
| 34 | + |
| 35 | +// Delete the "dist" folder |
| 36 | +// This happens every time a build starts |
| 37 | +function clean(done) { |
| 38 | + rimraf(PATHS.dist, done); |
| 39 | +} |
| 40 | + |
| 41 | +// Copy files out of the assets folder |
| 42 | +// This task skips over the "img", "js", and "scss" folders, which are parsed separately |
| 43 | +function copy() { |
| 44 | + return gulp.src(PATHS.assets) |
| 45 | + .pipe(gulp.dest(PATHS.dist + '/assets')); |
| 46 | +} |
| 47 | + |
| 48 | +// Copy page templates into finished HTML files |
| 49 | +function pages() { |
| 50 | + return gulp.src('src/pages/**/*.{html,hbs,handlebars}') |
| 51 | + .pipe(panini({ |
| 52 | + root: 'src/pages/', |
| 53 | + layouts: 'src/layouts/', |
| 54 | + partials: 'src/partials/', |
| 55 | + data: 'src/data/', |
| 56 | + helpers: 'src/helpers/' |
| 57 | + })) |
| 58 | + .pipe(gulp.dest(PATHS.dist)); |
| 59 | +} |
| 60 | + |
| 61 | +// Load updated HTML templates and partials into Panini |
| 62 | +function resetPages(done) { |
| 63 | + panini.refresh(); |
| 64 | + done(); |
| 65 | +} |
| 66 | + |
| 67 | +// Generate a style guide from the Markdown content and HTML template in styleguide/ |
| 68 | +function styleGuide(done) { |
| 69 | + sherpa('src/styleguide/index.md', { |
| 70 | + output: PATHS.dist + '/styleguide.html', |
| 71 | + template: 'src/styleguide/template.html' |
| 72 | + }, done); |
| 73 | +} |
| 74 | + |
| 75 | +// Compile Sass into CSS |
| 76 | +// In production, the CSS is compressed |
| 77 | +function sass() { |
| 78 | + return gulp.src('src/assets/scss/app.scss') |
| 79 | + .pipe($.sourcemaps.init()) |
| 80 | + .pipe($.sass({ |
| 81 | + includePaths: PATHS.sass |
| 82 | + }) |
| 83 | + .on('error', $.sass.logError)) |
| 84 | + .pipe($.autoprefixer({ |
| 85 | + browsers: COMPATIBILITY |
| 86 | + })) |
| 87 | + // Comment in the pipe below to run UnCSS in production |
| 88 | + //.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS))) |
| 89 | + .pipe($.if(PRODUCTION, $.cssnano())) |
| 90 | + .pipe($.if(!PRODUCTION, $.sourcemaps.write())) |
| 91 | + .pipe(gulp.dest(PATHS.dist + '/assets/css')) |
| 92 | + .pipe(browser.reload({ stream: true })); |
| 93 | +} |
| 94 | + |
| 95 | +// Combine JavaScript into one file |
| 96 | +// In production, the file is minified |
| 97 | +function javascript() { |
| 98 | + return gulp.src(PATHS.javascript) |
| 99 | + .pipe($.sourcemaps.init()) |
| 100 | + .pipe($.babel({ignore: ['what-input.js']})) |
| 101 | + .pipe($.concat('app.js')) |
| 102 | + .pipe($.if(PRODUCTION, $.uglify() |
| 103 | + .on('error', e => { console.log(e); }) |
| 104 | + )) |
| 105 | + .pipe($.if(!PRODUCTION, $.sourcemaps.write())) |
| 106 | + .pipe(gulp.dest(PATHS.dist + '/assets/js')); |
| 107 | +} |
| 108 | + |
| 109 | +// Copy images to the "dist" folder |
| 110 | +// In production, the images are compressed |
| 111 | +function images() { |
| 112 | + return gulp.src('src/assets/img/**/*') |
| 113 | + .pipe($.if(PRODUCTION, $.imagemin({ |
| 114 | + progressive: true |
| 115 | + }))) |
| 116 | + .pipe(gulp.dest(PATHS.dist + '/assets/img')); |
| 117 | +} |
| 118 | + |
| 119 | +// Start a server with BrowserSync to preview the site in |
| 120 | +function server(done) { |
| 121 | + browser.init({ |
| 122 | + server: PATHS.dist, port: PORT |
| 123 | + }); |
| 124 | + done(); |
| 125 | +} |
| 126 | + |
| 127 | +// Reload the browser with BrowserSync |
| 128 | +function reload(done) { |
| 129 | + browser.reload(); |
| 130 | + done(); |
| 131 | +} |
| 132 | + |
| 133 | +// Watch for changes to static assets, pages, Sass, and JavaScript |
| 134 | +function watch() { |
| 135 | + gulp.watch(PATHS.assets, copy); |
| 136 | + gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); |
| 137 | + gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); |
| 138 | + gulp.watch('src/assets/scss/**/*.scss').on('all', sass); |
| 139 | + gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); |
| 140 | + gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); |
| 141 | + gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload)); |
| 142 | +} |
0 commit comments