Need help with Gulp Build and 'usemin'. App.js not copying

Hi everyone! I am currently migrating my Weather App project to github, and using gulp build to get my project ready to show on github pages. However, I have been stuck on one thing for hours now, and I can’t figure it out, so any help would be greatly appreciated.

When I run my gulp build task to copy everything into my doc folder, my style.css is copied just fine, but my App.js file doesn’t copy to the doc folder.
In fact, the index.html that is copied into the doc folder has just erased the tag entirely.

here is my repo:

I’ve also posted some relevant code below:

This is what I have in my index.html so ‘usemin’ identifies what to build

     <!-- build:css /assets/styles/styles.css -->
    <link rel="stylesheet" href="temp/styles/styles.css">
    <!-- endbuild -->

//the following disappears in the doc folder
    <!-- build:js /assets/scripts/App.js -->
    <script src="temp/scripts/App.js">
    </script>
    <!-- endbuild -->

by gulp-build task looks like this:

var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
del = require('del'),
usemin = require('gulp-usemin'),
rev = require('gulp-rev'),
cssnano = require('gulp-cssnano'),
uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create();


gulp.task('previewDist', function() {
        browserSync.init({
        notify: false,
        server: {
            baseDir: "docs"
        }
    });
});

gulp.task('deleteDistFolder', function() {
    return del("./docs");
});

gulp.task('copyGeneralFiles', ['deleteDistFolder'], function() {
    var pathsToCopy = [
        './app/**/*',
        '!./app/index.html',
        '!./app/assets/images/**',
        '!./app/assets/styles/**',
        '!./app/assets/scripts/**',
        '!./app/temp',
        '!./app/temp/**'
    ]

    return gulp.src(pathsToCopy)
        .pipe(gulp.dest("./docs"));
});

gulp.task('optimizeImages', ['deleteDistFolder'], function() {

/* '!': will exclude particular folders from being in the build */

    return gulp.src(['./app/assets/images/**/*'])
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            multipass: true,
        }))
        .pipe(gulp.dest("./docs/assets/images"));
});

gulp.task('usemin', ['deleteDistFolder', 'styles', 'scripts'], function() {
    return gulp.src("./app/index.html")
        .pipe(usemin({
            css: [function() {return rev()}, function() {return cssnano()}],
            js: [function() {return rev()}, function(){return uglify()}]
        }))
        .pipe(gulp.dest("./docs"));
});

/* IF YOU ARE ARE UPLOADING TO GITHUB, GET RID OF FORWARD SLASHES*/

gulp.task('build', ['deleteDistFolder', 'copyGeneralFiles', 'optimizeImages', 'usemin']);

Hope you can help!!

Found this SO answer:

Basically, just take out all whitespace in the script tags

<script src="temp/scripts/App.js"> <!-- bad -->
</script>

<script src="temp/scripts/App.js"></script> <!-- good -->

Just one of those things! :trumpet:

1 Like

dear lord…that worked. whiiiiiiite spaaaaaaaaaaaace!!! Thanks so much. I can’t believe that was it :tired_face:. So many hours…gone forever…

1 Like