/** * Settings * Turn on/off build features */ var settings = { clean: true, styles: true, copy: true, reload: true }; /** * Paths to project folders */ var paths = { input: 'src/', output: 'dist/', styles: { input: 'src/scss/*.scss', output: 'dist/css/' }, copy: { input: [ 'src/*.html', // 'src/.htaccess', 'src/{img,font}/**/*', 'node_modules/@fortawesome/fontawesome-free/*fonts/**/*' ], output: 'dist/' }, reload: './dist/' }; /** * Template for banner to add to file headers */ var banner = { main: '/*!' + ' <%= package.name %> v<%= package.version %>' + ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' + ' | <%= package.license %> License' + ' | <%= package.repository.url %>' + ' */\n' }; /** * Gulp Packages */ // General var {src, dest, watch, series, parallel} = require('gulp'); var del = require('del'); var rename = require('gulp-rename'); var header = require('gulp-header'); var package = require('./package.json'); // Styles var sass = require('gulp-sass')(require('sass')); var postcss = require('gulp-postcss'); var prefix = require('autoprefixer'); var minify = require('cssnano'); var tildeImporter = require('node-sass-tilde-importer'); // BrowserSync var browserSync = require('browser-sync'); /** * Gulp Tasks */ // Remove pre-existing content from output folders var cleanDist = function (done) { // Make sure this feature is activated before running if (!settings.clean) return done(); // Clean the dist folder del.sync([ paths.output ]); // Signal completion return done(); }; // Process, and minify Sass files var buildStyles = function (done) { // Make sure this feature is activated before running if (!settings.styles) return done(); // Run tasks on all Sass files return src(paths.styles.input) .pipe(sass({ importer: tildeImporter, outputStyle: 'expanded', sourceComments: true })) .pipe(postcss([ prefix({ cascade: true, remove: true }) ])) .pipe(header(banner.main, {package: package})) .pipe(dest(paths.styles.output)) .pipe(rename({suffix: '.min'})) .pipe(postcss([ minify({ discardComments: { removeAll: true } }) ])) .pipe(dest(paths.styles.output)); }; // Copy static files into output folder var copyFiles = function (done) { // Make sure this feature is activated before running if (!settings.copy) return done(); // Copy static files return src(paths.copy.input) .pipe(dest(paths.copy.output)); }; // Watch for changes to the src directory var startServer = function (done) { // Make sure this feature is activated before running if (!settings.reload) return done(); // Initialize BrowserSync browserSync.init({ server: { baseDir: paths.reload } }); // Signal completion done(); }; // Reload the browser when files change var reloadBrowser = function (done) { if (!settings.reload) return done(); browserSync.reload(); done(); }; // Watch for changes var watchSource = function (done) { watch(paths.input, series(exports.default, reloadBrowser)); done(); }; /** * Export Tasks */ // Default task // gulp exports.default = series( cleanDist, parallel( buildStyles, copyFiles ) ); // Watch and reload // gulp watch exports.watch = series( exports.default, startServer, watchSource );