app.js not building?

[evangrim]

I just installed FP for the first time, then made a custom template including some Foundation js containers. The containers weren't responding properly, and app.js doesn't appear to be in the page source.

Please List the Following:

• Windows 10
• DesktopServer (not WAMP)
• Node 6.11.0
• FoundationPress 2.10.2
• Foundation version "foundation-sites": "~6.4.1",

** Here's what NPM echoes after NPM start:
[11:15:46] Requiring external module babel-register
[11:15:49] Using gulpfile c:\xampplite\htdocs\evangrim.dev\wp-content\themes\FoundationPress\gulpfile.babel.js
[11:15:49] Starting 'default'...
[11:15:49] Starting 'build'...
[11:15:49] Starting 'clean'...
[11:15:49] Finished 'clean' after 28 ms
[11:15:49] Starting 'sass'...
[11:15:51] Finished 'sass' after 2.84 s
[11:17:21] Starting 'javascript'...
[11:17:32] Version: webpack 2.7.0
Asset Size Chunks Chunk Names
app.js 673 kB 0 [emitted] [big] app
[11:18:21] Finished 'javascript' after 60 s
[11:18:21] Starting 'images'...
[11:18:21] Finished 'images' after 362 ms
[11:18:21] Starting 'copy'...
[11:18:21] Finished 'copy' after 137 ms
[11:18:21] Finished 'build' after 2.53 min
[11:18:21] Starting 'server'...
[11:18:22] Finished 'server' after 72 ms
[11:18:22] Starting 'watch'...
[Browsersync] Proxying: http://evangrim.dev
[Browsersync] Access URLs:

   Local: http://localhost:3000
External: http://10.0.0.178:3000

---

      UI: http://localhost:80

UI External: http://10.0.0.178:80

**My gulpfile.babel.js (as original except port and url for browser refresh)
'use strict';

import plugins from 'gulp-load-plugins';
import yargs from 'yargs';
import browser from 'browser-sync';
import gulp from 'gulp';
import rimraf from 'rimraf';
import yaml from 'js-yaml';
import fs from 'fs';
import webpackStream from 'webpack-stream';
import webpack2 from 'webpack';
import named from 'vinyl-named';

// 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, PATHS } = loadConfig();

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

// Enter URL of your local server here
// Example: 'http://localhost:8888'
var URL = '';

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, sass, javascript, images, copy));

// 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'));
}

// Compile Sass into CSS
// In production, the CSS is compressed
function sass() {
return gulp.src('src/assets/scss/app.scss')
.pipe($.sourcemaps.init())
.pipe($.sass({
includePaths: PATHS.sass
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: COMPATIBILITY
}))

.pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie9' })))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/css'))
.pipe(browser.reload({ stream: true }));

}

let webpackConfig = {
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
}
// 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({
progressive: true
})))
.pipe(gulp.dest(PATHS.dist + '/assets/img'));
}

// Start BrowserSync to preview the site in
function server(done) {
browser.init({
proxy: 'evangrim.dev',

ui: {
  port: '80'
},

});
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/assets/scss//*.scss').on('all', sass);
gulp.watch('/.php').on('all', browser.reload);
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));
}

[olefredrik]

Did everything work as expected before you made the custom template? I don't know what you mean when you say

... then made a custom template including some Foundation js containers. The containers weren't responding properly, and app.js doesn't appear to be in the page source.

There does not seem to be any errors when you run npm start. Your gulpfile does also seem okay. Please explain what the issue is about.

[evangrim]

The accordion element is working properly on the kitchen sink page, so my apologies, it must be a problem with my template. However, I did notice an issue with the grid; I'll open another issue.