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