Gulpfile compiling app.js incorrectly with bloated code

Hi I am having problems with compiling my javascript through gulp. All javascript works however the file is bloated with thousands of lines of code and comments and functions like this:

/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};

I am loading through

import './lib/foundation-explicit-pieces';

but the same problem occurs when I just use the default:

require('foundation-sites');

my gulp file looks like this:
‘use strict’;

import plugins       from 'gulp-load-plugins';
import yargs         from 'yargs';
import browser       from 'browser-sync';
import gulp          from 'gulp';
import panini        from 'panini';
import rimraf        from 'rimraf';
import sherpa        from 'style-sherpa';
import yaml          from 'js-yaml';
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';

var rename = require("gulp-rename");

// Load all Gulp plugins into one variable
const $ = plugins();

// Check for --production flag
const PRODUCTION = !!(yargs.argv.production);

// Load settings from settings.yml
const { COMPATIBILITY, PORT, UNCSS_OPTIONS, PATHS } = loadConfig();

function loadConfig() {
    let ymlFile = fs.readFileSync('config.yml', 'utf8');
    return yaml.load(ymlFile);
}

// 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.series(clean, gulp.parallel(pages, javascript, images, copy), sass, sassMinify, styleGuide));

// Build the site, run the server, and watch for file changes
gulp.task('default',
    gulp.series('build', server, watch));

// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
    rimraf(PATHS.dist, done);
}

// Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
    return gulp.src(PATHS.assets)
        .pipe(gulp.dest(PATHS.dist + '/assets'));
}

// Copy page templates into finished HTML files
function pages() {
    return gulp.src('src/pages/**/*.{html,hbs,handlebars}')
        .pipe(panini({
            root: 'src/pages/',
            layouts: 'src/layouts/',
            partials: 'src/partials/',
            data: 'src/data/',
            helpers: 'src/helpers/'
        }))
        .pipe(gulp.dest(PATHS.dist));
}

// Load updated HTML templates and partials into Panini
function resetPages(done) {
    panini.refresh();
    done();
}

// Generate a style guide from the Markdown content and HTML template in styleguide/
function styleGuide(done) {
    sherpa('src/styleguide/index.md', {
        output: PATHS.dist + '/styleguide.html',
        template: 'src/styleguide/template.html'
    }, done);
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {

    const postCssPlugins = [
        // Autoprefixer
        //autoprefixer({ browsers: COMPATIBILITY }),
        autoprefixer(),

        // UnCSS - Uncomment to remove unused styles in production
        // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
    ].filter(Boolean);

    return gulp.src('src/assets/scss/*.scss')

        .pipe($.sourcemaps.init())
        .pipe($.sass({
            includePaths: PATHS.sass,
            outputStyle: 'expanded'
        })
            .on('error', $.sass.logError))
        .pipe($.postcss(postCssPlugins))
        .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie11' })))
        // .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest(PATHS.dist + '/assets/css'))
        .pipe(browser.reload({ stream: true }));
}

function sassMinify() {

    const postCssPlugins = [
        // Autoprefixer
        //autoprefixer({ browsers: COMPATIBILITY }),
        autoprefixer(),


        // UnCSS - Uncomment to remove unused styles in production
        // PRODUCTION && uncss.postcssPlugin(UNCSS_OPTIONS),
    ].filter(Boolean);

    return gulp.src('src/assets/scss/*.scss')

        .pipe($.sourcemaps.init())
        .pipe($.sass({
            includePaths: PATHS.sass,
            outputStyle: 'compressed'
        })

            .on('error', $.sass.logError))
        .pipe($.postcss(postCssPlugins))
        .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie11' })))

        .pipe(rename(function (path) {
            path.dirname += "/";
            path.basename += ".min";
            path.extname = ".css";
        }))
        .pipe(gulp.dest(PATHS.dist + '/assets/css'))
        .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
// In production, the file is minified
function javascript() {
    return gulp.src(PATHS.entries)
        .pipe(named())
        .pipe($.sourcemaps.init())
        .pipe(webpackStream(webpackConfig, webpack2))
        .pipe($.if(PRODUCTION, $.uglify()
            .on('error', e => { console.log(e); })
        ))
        .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
        .pipe(gulp.dest(PATHS.dist + '/assets/js'));
}

// Copy images to the "dist" folder
// In production, the images are compressed
function images() {
    return gulp.src('src/assets/img/**/*')
        .pipe($.if(PRODUCTION, $.imagemin([
            $.imagemin.jpegtran({ progressive: true }),
        ])))
        .pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start a server with BrowserSync to preview the site in
function server(done) {
    browser.init({
        server: PATHS.dist, port: PORT
    }, done);
}

// Reload the browser with BrowserSync
function reload(done) {
    browser.reload();
    done();
}

// Watch for changes to static assets, pages, Sass, and JavaScript
function watch() {
    gulp.watch(PATHS.assets, copy);
    gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload));
    gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
    gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
    gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));
    gulp.watch('src/assets/scss/**/*.scss').on('all', sass);
    gulp.watch('src/assets/scss/**/*.scss').on('all', sassMinify);
    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));
    gulp.watch('src/styleguide/**').on('all', gulp.series(styleGuide, browser.reload));


}

I am using node version 10.19.0 and npm 6.13.4.

What am I doing wrong?
Thanks in advance.

Hi, this is the default behavior of webpack dev config.

Really? Ok great at least it’s the default. What should i do next then because it is 500k for not much functionality? Should I just minify it somehow and them I’m good to go? I would have thought the gulpfile would do that.

There is a prod / build task which should be also in the package.json. Just append --production.

Thanks, it seems the package.json is set to --production, but when I run foundation build, it produces a minified load of errors. Something else is wrong. This is my package.json:

    {
      "name": "foundation-zurb-template",
      "version": "1.0.0",
      "description": "Official ZURB Template for Foundation for Sites.",
      "main": "gulpfile.babel.js",
      "scripts": {
        "start": "gulp",
        "build": "gulp build --production"
      },
      "author": "ZURB <foundation@zurb.com>",
      "license": "MIT",
      "dependencies": {
        "foundation-sites": "^6.5.1",
        "gulp-rename": "^1.4.0",
        "jquery": "^3.2.1",
        "motion-ui": "^2.0.3",
        "slick-carousel": "^1.8.1",
        "what-input": "^5.1.2"
      },
      "devDependencies": {
        "@babel/core": "^7.1.2",
        "@babel/preset-env": "^7.1.0",
        "@babel/register": "^7.0.0",
        "autoprefixer": "^9.1.5",
        "babel-loader": "^8.0.4",
        "browser-sync": "^2.10.0",
        "gulp": "^4.0.0",
        "gulp-babel": "^8.0.0",
        "gulp-clean-css": "^3.3.1",
        "gulp-cli": "^2.0.1",
        "gulp-concat": "^2.5.2",
        "gulp-extname": "^0.2.0",
        "gulp-if": "^2.0.0",
        "gulp-imagemin": "^4.1.0",
        "gulp-load-plugins": "^1.1.0",
        "gulp-postcss": "^8.0.0",
        "gulp-sass": "^4.0.1",
        "gulp-sourcemaps": "^2.6.4",
        "gulp-uglify": "^3.0.1",
        "js-yaml": "^3.4.6",
        "panini": "^1.3.0",
        "rimraf": "^2.4.3",
        "style-sherpa": "^1.0.0",
        "uncss": "^0.16.2",
        "vinyl-named": "^1.1.0",
        "webpack": "^4.20.2",
        "webpack-stream": "^5.1.1",
        "yargs": "^12.0.2"
      },
      "repository": {
        "type": "git",
        "url": LINK
      },
      "bugs": {
        "url": LINK
        "email": LINK
      },
      "private": true
    }

I Changed where it says LINK as the post wouldn’t allow it.

You can use three backticks (codefence) for code blocks.

To reproduce this please proc’vide the exact command that you used. It should be npm run build.

Ah so you use the cli.

Seems this should work.

Can you create a small reproducible testcase as repository?

I was running the wrong command so switched to npm run build however none of the javascript works. I just get the error TypeError: Super expression must either be null or a function in FF console. Sorry I don’t know how to reproduce a test case.

I’m really sorry, where should I apply this?

I meant that the CLI should normally run the correct script.

Can you not share your package.json, webpack configs and gulpfile with the needed basic setup and create a small repo with this?

Please share some details about the stacktrace or where this error is triggered. Also please check the issues on GitHub.

Ok, the error comes from uglifyjs.

Please try the following:

npm install gulp-terser --save-dev

And change $.uglify() to $.terser() in gulpfile.babel.js.

Should be fixed in https://github.com/foundation/foundation-zurb-template/pull/97

1 Like

Brilliant, thank you very much. That worked thank goodness. I would never have resolved that on my own. Thanks very much indeed Daniel.