Installing on Django Cookiecutter via NPM

I am using Django Cookiecutter via npm to install foundation-sites instead of their bootstrap code.

Using their gulpfile.js all works well until I try to add foundation.

${vendorsRoot}/foundation-sites/dist/js/foundation.js

Once I add foundation or what-input in get these errors on my pages.

it is looking for foundation.js.map when the page loads.

I am not a coder and gulp has always been a bit confusing.

Thank you.

////////////////////////////////
// Setup
////////////////////////////////

// Gulp and package
const {src, dest, parallel, series, watch} = require(‘gulp’)
const pjson = require(’./package.json’)

// Plugins
const autoprefixer = require(‘autoprefixer’)
const browserSync = require(‘browser-sync’).create()
const concat = require(‘gulp-concat’)
const cssnano = require(‘cssnano’)
const imagemin = require(‘gulp-imagemin’)
const pixrem = require(‘pixrem’)
const plumber = require(‘gulp-plumber’)
const postcss = require(‘gulp-postcss’)
const reload = browserSync.reload
const rename = require(‘gulp-rename’)
const sass = require(‘gulp-sass’)
const spawn = require(‘child_process’).spawn
const uglify = require(‘gulp-uglify-es’).default

// Relative paths function
function pathsConfig(appName) {
this.app = ./${pjson.name}
const vendorsRoot = ‘node_modules’

return {
    foundationSass: `${vendorsRoot}/foundation-sites/scss`,
    motionSass: `${vendorsRoot}/motion-ui/src'`,
    vendorsJs: [
        `${vendorsRoot}/jquery/dist/jquery.js`,
        `${vendorsRoot}/motion-ui/dist/motion-ui.js`,
        `${vendorsRoot}/zingchart/zingchart.min.js`,
    ],
    app: this.app,
    templates: `${this.app}/templates`,
    css: `${this.app}/static/css`,
    sass: `${this.app}/static/sass`,
    fonts: `${this.app}/static/fonts`,
    images: `${this.app}/static/images`,
    js: `${this.app}/static/js`,
}

}

var paths = pathsConfig()

////////////////////////////////
// Tasks
////////////////////////////////

// Styles autoprefixing and minification
function styles() {
var processCss = [
autoprefixer(), // adds vendor prefixes
pixrem(), // add fallbacks for rem units
]

var minifyCss = [
    cssnano({preset: 'default'})   // minify result
]

return src(`${paths.sass}/app.scss`)
    .pipe(sass({
        includePaths: [
            paths.foundationSass,
            paths.motionSass,
            paths.sass
        ]
    }).on('error', sass.logError))
    .pipe(plumber()) // Checks for errors
    .pipe(postcss(processCss))
    .pipe(dest(paths.css))
    .pipe(rename({suffix: '.min'}))
    .pipe(postcss(minifyCss)) // Minifies the result
    .pipe(dest(paths.css))

}

// Javascript minification
function scripts() {
return src(${paths.js}/project.js)
.pipe(plumber()) // Checks for errors
.pipe(uglify()) // Minifies the js
.pipe(rename({suffix: ‘.min’}))
.pipe(dest(paths.js))
}

// Vendor Javascript minification
function vendorScripts() {
return src(paths.vendorsJs)
.pipe(concat(‘vendors.js’))
.pipe(dest(paths.js))
.pipe(plumber()) // Checks for errors
.pipe(uglify()) // Minifies the js
.pipe(rename({suffix: ‘.min’}))
.pipe(dest(paths.js))
}

// Image compression
function imgCompression() {
return src(${paths.images}/*)
.pipe(imagemin()) // Compresses PNG, JPEG, GIF and SVG images
.pipe(dest(paths.images))
}

// Run django server
function runServer(cb) {
var cmd = spawn(‘python’, [‘manage.py’, ‘runserver’], {stdio: ‘inherit’})
cmd.on(‘close’, function (code) {
console.log('runServer exited with code ’ + code)
cb(code)
})
}

// Browser sync server for live reload
function initBrowserSync() {
browserSync.init(
[
${paths.css}/*.css,
${paths.js}/*.js,
${paths.templates}/*.html
], {
// Browsersync options
proxy: ‘localhost:8000’
}
)
}

// Watch
function watchPaths() {
watch(${paths.sass}/*.scss, styles)
watch(${paths.templates}/**/*.html).on(“change”, reload)
watch([${paths.js}/*.js, !${paths.js}/*.min.js], scripts).on(“change”, reload)
}

// Generate all assets
const generateAssets = parallel(
styles,
scripts, vendorScripts,
imgCompression
)

// Set up dev environment
const dev = parallel(
runServer,
initBrowserSync,
watchPaths
)

exports.default = series(generateAssets, dev)
exports[“generate-assets”] = generateAssets
exports[“dev”] = dev

Missing sourcemap files are not a problem and can be ignored. These are only loaded when the devtools are opened.