Changeset View
Changeset View
Standalone View
Standalone View
gulpfile.babel.js
'use strict'; | 'use strict'; | ||||
import plugins from 'gulp-load-plugins'; | import plugins from 'gulp-load-plugins'; | ||||
import yargs from 'yargs'; | import yargs from 'yargs'; | ||||
import browser from 'browser-sync'; | import browser from 'browser-sync'; | ||||
import gulp from 'gulp'; | import gulp from 'gulp'; | ||||
import panini from 'panini'; | import panini from 'panini'; | ||||
import rimraf from 'rimraf'; | import rimraf from 'rimraf'; | ||||
import sherpa from 'style-sherpa'; | |||||
import yaml from 'js-yaml'; | import yaml from 'js-yaml'; | ||||
import fs from 'fs'; | import fs from 'fs'; | ||||
import webpackStream from 'webpack-stream'; | |||||
import webpack2 from 'webpack'; | |||||
import named from 'vinyl-named'; | |||||
import uncss from 'uncss'; | |||||
import autoprefixer from 'autoprefixer'; | |||||
// Load all Gulp plugins into one variable | // Load all Gulp plugins into one variable | ||||
const $ = plugins(); | const $ = plugins(); | ||||
// Check for --production flag | // Check for --production flag | ||||
const PRODUCTION = !!(yargs.argv.production); | const PRODUCTION = !!(yargs.argv.production); | ||||
// Load settings from settings.yml | // Load settings from settings.yml | ||||
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig(); | const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig(); | ||||
function loadConfig() { | function loadConfig() { | ||||
let ymlFile = fs.readFileSync('config.yml', 'utf8'); | let ymlFile = fs.readFileSync('config.yml', 'utf8'); | ||||
return yaml.load(ymlFile); | return yaml.load(ymlFile); | ||||
} | } | ||||
// Build the "dist" folder by running all of the below tasks | // Build the "dist" folder by running all of the below tasks | ||||
// Sass must be run later so UnCSS can search for used classes in the others assets. | |||||
gulp.task('build', | gulp.task('build', | ||||
gulp.series( | gulp.series(clean, gulp.parallel(pages, javascript, images, fonts, copy), sass)); | ||||
clean, | |||||
gulp.parallel(pages, sass, javascript, images, cssfonts, copy) | |||||
) | |||||
); | |||||
// Build the site, run the server, and watch for file changes | // Build the site, run the server, and watch for file changes | ||||
gulp.task('default', | gulp.task('default', | ||||
gulp.series('build', server, watch)); | gulp.series('build', server, watch)); | ||||
// Delete the "dist" folder | // Delete the "dist" folder | ||||
// This happens every time a build starts | // This happens every time a build starts | ||||
function clean(done) { | function clean(done) { | ||||
Show All 24 Lines | |||||
function resetPages(done) { | function resetPages(done) { | ||||
panini.refresh(); | panini.refresh(); | ||||
done(); | done(); | ||||
} | } | ||||
// Compile Sass into CSS | // Compile Sass into CSS | ||||
// In production, the CSS is compressed | // In production, the CSS is compressed | ||||
function sass() { | function sass() { | ||||
const postCssPlugins = [ | |||||
// Autoprefixer | |||||
autoprefixer({ browsers: COMPATIBILITY }), | |||||
// UnCSS - Uncomment to remove unused styles in production | |||||
// PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS), | |||||
].filter(Boolean); | |||||
return gulp.src('src/assets/scss/app.scss') | return gulp.src('src/assets/scss/app.scss') | ||||
.pipe($.sourcemaps.init()) | .pipe($.sourcemaps.init()) | ||||
.pipe($.sass({ | .pipe($.sass({ | ||||
includePaths: PATHS.sass | includePaths: PATHS.sass | ||||
}) | }) | ||||
.on('error', $.sass.logError)) | .on('error', $.sass.logError)) | ||||
.pipe($.autoprefixer({ | .pipe($.postcss(postCssPlugins)) | ||||
browsers: COMPATIBILITY | .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' }))) | ||||
})) | |||||
// Comment in the pipe below to run UnCSS in production | |||||
//.pipe($.if(PRODUCTION, $.uncss(UNCSS_OPTIONS))) | |||||
.pipe($.if(PRODUCTION, $.cssnano())) | |||||
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | .pipe($.if(!PRODUCTION, $.sourcemaps.write())) | ||||
.pipe(gulp.dest(PATHS.dist + '/assets/css')) | .pipe(gulp.dest(PATHS.dist + '/assets/css')) | ||||
.pipe(browser.reload({ stream: true })); | .pipe(browser.reload({ stream: true })); | ||||
} | } | ||||
let webpackConfig = { | |||||
mode: (PRODUCTION ? 'production' : 'development'), | |||||
module: { | |||||
rules: [ | |||||
{ | |||||
test: /\.js$/, | |||||
use: { | |||||
loader: 'babel-loader', | |||||
options: { | |||||
presets: [ "@babel/preset-env" ], | |||||
compact: false | |||||
} | |||||
} | |||||
} | |||||
] | |||||
}, | |||||
devtool: !PRODUCTION && 'source-map' | |||||
} | |||||
// Combine JavaScript into one file | // Combine JavaScript into one file | ||||
// In production, the file is minified | // In production, the file is minified | ||||
function javascript() { | function javascript() { | ||||
return gulp.src(PATHS.javascript) | return gulp.src(PATHS.entries) | ||||
.pipe(named()) | |||||
.pipe($.sourcemaps.init()) | .pipe($.sourcemaps.init()) | ||||
.pipe($.babel()) | .pipe(webpackStream(webpackConfig, webpack2)) | ||||
.pipe($.concat('app.js')) | |||||
.pipe($.if(PRODUCTION, $.uglify() | .pipe($.if(PRODUCTION, $.uglify() | ||||
.on('error', e => { console.log(e); }) | .on('error', e => { console.log(e); }) | ||||
)) | )) | ||||
.pipe($.if(!PRODUCTION, $.sourcemaps.write())) | .pipe($.if(!PRODUCTION, $.sourcemaps.write())) | ||||
.pipe(gulp.dest(PATHS.dist + '/assets/js')); | .pipe(gulp.dest(PATHS.dist + '/assets/js')); | ||||
} | } | ||||
// Copy images to the "dist" folder | // Copy images to the "dist" folder | ||||
// In production, the images are compressed | // In production, the images are compressed | ||||
function images() { | function images() { | ||||
return gulp.src('src/assets/img/**/*') | return gulp.src('src/assets/img/**/*') | ||||
.pipe($.if(PRODUCTION, $.imagemin({ | .pipe($.if(PRODUCTION, $.imagemin([ | ||||
progressive: true | $.imagemin.jpegtran({ progressive: true }), | ||||
}))) | ]))) | ||||
.pipe(gulp.dest(PATHS.dist + '/assets/img')); | .pipe(gulp.dest(PATHS.dist + '/assets/img')); | ||||
} | } | ||||
// Copy fonts used in CSS to the "dist" folder | // Copy fonts used in CSS to the "dist" folder | ||||
function cssfonts() { | function fonts() { | ||||
return gulp.src('./bower_components/foundation-icon-fonts/*.{ttf,woff,eot,svg}') | return gulp.src('./node_modules/foundation-icon-fonts/*.{ttf,woff,eot,svg}') | ||||
.pipe(gulp.dest(PATHS.dist + '/assets/fonts')); | .pipe(gulp.dest(PATHS.dist + '/assets/fonts')); | ||||
} | } | ||||
// Start a server with BrowserSync to preview the site in | // Start a server with BrowserSync to preview the site in | ||||
function server(done) { | function server(done) { | ||||
browser.init({ | browser.init({ | ||||
server: PATHS.dist, port: PORT | server: PATHS.dist, port: PORT | ||||
}); | }, done); | ||||
done(); | |||||
} | } | ||||
// Reload the browser with BrowserSync | // Reload the browser with BrowserSync | ||||
function reload(done) { | function reload(done) { | ||||
browser.reload(); | browser.reload(); | ||||
done(); | done(); | ||||
} | } | ||||
// Watch for changes to static assets, pages, Sass, and JavaScript | // Watch for changes to static assets, pages, Sass, and JavaScript | ||||
function watch() { | function watch() { | ||||
gulp.watch(PATHS.assets, copy); | gulp.watch(PATHS.assets, copy); | ||||
gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, browser.reload)); | gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); | ||||
gulp.watch('src/{layouts,partials}/**/*.html').on('change', gulp.series(resetPages, pages, browser.reload)); | gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); | ||||
gulp.watch('src/assets/scss/**/*.scss', sass); | gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload)); | ||||
gulp.watch('src/assets/js/**/*.js').on('change', gulp.series(javascript, browser.reload)); | gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload)); | ||||
gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload)); | gulp.watch('src/assets/scss/**/*.scss').on('all', sass); | ||||
gulp.watch('src/assets/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); | |||||
gulp.watch('src/assets/img/**/*').on('all', gulp.series(images, browser.reload)); | |||||
} | } |
Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator