1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
|
import gulp from 'gulp'; import plugins from 'gulp-load-plugins'; import yargs from 'yargs'; import browser from 'browser-sync'; import named from 'vinyl-named'; import webpackStream from 'webpack-stream'; import webpack from 'webpack'
const $ = plugins({ rename: { 'gulp-rev-append': 'rev', 'gulp-file-include': 'fileinclude' } });
const PORT = 8000;
const PRODUCTION = !!(yargs.argv.production);
const PATHS = { pages: { src: 'src/*.html', dist: 'dist/' }, styles: { vendor: ['node_modules/foundation-sites/scss', 'node_modules/bootstrap/scss/'], src: 'src/sass/**/*.scss', dist: 'dist/css/' }, scripts: { src: 'src/js/**/*.js', dist: 'dist/js/' }, images: { src: 'src/img/**/*.{jpg,jpeg,png}', dist: 'dist/img/' } };
const WPCONFIG = { mode: PRODUCTION ? 'production' : 'development', module: { rules: [{ test: /.js$/, use: [{ loader: 'babel-loader' }] }] }, devtool: '#source-map' };
gulp.task('build', gulp.series(clean, gulp.parallel(html, image, sass, javascript)));
gulp.task('default', gulp.series('build', server, watch));
gulp.task('watch', gulp.series(server, watch));
function html() { return gulp.src(PATHS.pages.src) .pipe($.fileinclude()) .pipe($.cached('html')) .pipe($.rev()) .pipe(gulp.dest(PATHS.pages.dist)); }
function image() { return gulp.src(PATHS.images.src) .pipe($.cached('image')) .pipe($.if(PRODUCTION, $.imagemin({progressive: true}))) .pipe(gulp.dest(PATHS.images.dist)); }
function sass() { return gulp.src(PATHS.styles.src) .pipe($.plumber({errorHandler: $.notify.onError('Error: <%= error.message %>')})) .pipe($.sourcemaps.init()) .pipe($.sass({includePaths: PATHS.styles.vendor})) .pipe($.cached('sass')) .pipe($.autoprefixer('last 2 version')) .pipe($.if(PRODUCTION, $.cssnano())) .pipe($.if(PRODUCTION, $.rename({suffix: '.min'}))) .pipe($.sourcemaps.write('')) .pipe(gulp.dest(PATHS.styles.dist)) .pipe(browser.reload({ stream: true })); }
function javascript() { return gulp.src(PATHS.scripts.src) .pipe(named()) .pipe($.cached('script')) .pipe(webpackStream(WPCONFIG, webpack)) .pipe($.if(PRODUCTION, $.rename({suffix: '.min'}))) .pipe(gulp.dest(PATHS.scripts.dist)); }
function clean() { return gulp.src(`${PATHS.pages.dist}/*`) .pipe($.clean()); }
function server(done) { browser.init({ server: PATHS.pages.dist, port: PORT }); done(); }
function watch() { gulp.watch('src/**/*.html').on('all', gulp.series(html, browser.reload)); gulp.watch('src/img/**/*.{jpg,jpeg,png}').on('all', gulp.series(image, browser.reload)); gulp.watch('src/sass/**/*.scss').on('all', sass); gulp.watch('src/js/**/*.js').on('all', gulp.series(javascript, browser.reload)); }
|