Publish MVC project missing files #4241

[email protected] created 6 years ago

After building and testing the project on my local machine I tried to publish to AZURE

I am getting very strange UI behaviors

The flags are missing on register user Fonts are not correct The menu on the portal does not work When I sign in the browser shows the result in text view , does not redirect to the dashboard Customize the UI hides the menu

All this is perfect on local VS run

Is there some extra step I need to do deploy the project

thanks

9 Answer(s)

0

mdonogma created 6 years ago

Running into similar issues with published version in release mode.

None of the key nav menus respond to clicks in chrome browser
0

bbakermmc created 6 years ago

Are you publishing from VS?

I ran into some issues with the gulpfile see GitHub issues about it.

But I can now build via VSTS and it publishes fine. You need to restore nugget packages restore/install npm packages build project run guilpfile to bundle/min js files (I had to make a new task to remove watch from the default build otherwise the build hung since watch keeps running.) then you can publish
0

ismcagdas created 6 years ago
Support Team

Hi,

Thanks @BBakerMMC. You also need to run gulp with --dev parameter to minify your bundled script & css files. It is not done by default in development to be able to debug javascript codes.
0

[email protected] created 6 years ago

Thanks @BBakerMMC Is it possible for you to share your VSTS Config. The differences from the default and also how to setup the GULP step

thanks heapsJulian
0

ismcagdas created 6 years ago
Support Team

Hi @[email protected],

If you are still facing this problem, please contanct with <a href="mailto:[email protected]">[email protected]</a> and we will try to help you remotely.

bbakermmc created 6 years ago

My steps are: Dotnet restore - Path to MVC Project NPM Install - Path to MVC Project Root folder (IE src/*.Web.MVC) Dotnet build - Path to MVC Project Gulp - Path to GulpFile.js in MVC Project (Using my vstsbuild gulp task) DotNet Publish - Path to MVC project (Zip, add name checked) Publish Artifact - Path to generated artifact

My Modified GulpFile.

/// <binding Clean='clean' />
"use strict";

var gulp = require("gulp"),
    async = require('async'),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    merge = require("merge-stream"),
    rimraf = require("rimraf"),
    gutil = require('gulp-util'),
    cleanCSS = require('gulp-clean-css'),
    runSequence = require('run-sequence'),
    bundleconfig = require("./bundle.config.js");

var regex = {
    css: /\.css$/,
    js: /\.js$/
};

gulp.task("min", ["min:js", "min:css"]);

gulp.task("min:js", function () {
    var tasks = getBundles(regex.js).map(function (bundle) {
        var outputFileName = getOutputFileName(bundle.outputFileName);
        var outputFolder = getOutputFolder(bundle.outputFileName);
        console.log(outputFolder + " -- " + outputFileName);
        return gulp.src(bundle.inputFiles)
            .pipe(concat(outputFileName))
            .pipe(gulp.dest(outputFolder));
    });

    //if (gutil.env.prod) {
        var minifyTasks = getBundles(regex.js).map(function (bundle) {
            var outputFileName = getOutputFileName(bundle.outputFileName);
            var outputFolder = getOutputFolder(bundle.outputFileName);

            if (bundle.createMinified === false || outputFileName.endsWith('.min.js')) {
                return null;
            }
            console.log(outputFolder + " -- " + outputFileName);
            var minifiedJsOutputFile = outputFileName.substr(0, outputFileName.lastIndexOf(".")) + ".min.js";
            return gulp.src(bundle.inputFiles)
                .pipe(concat(minifiedJsOutputFile))
                .pipe(uglify()).on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
                .pipe(gulp.dest(outputFolder));
        });

        for (var i = 0; i < minifyTasks.length; i++) {
            if (minifyTasks[i] == null) {
                continue;
            }
            tasks.push(minifyTasks[i]);
        }
    //}

    return merge(tasks);
});

gulp.task("min:css", function () {
    var tasks = getBundles(regex.css).map(function (bundle) {
        var outputFolder = getOutputFolder(bundle.outputFileName);
        var outputFileName = getOutputFileName(bundle.outputFileName);

        return gulp.src(bundle.inputFiles)
            .pipe(cleanCSS({
                level: 0, // no optimization on css file
                rebaseTo: outputFolder
            }))
            .pipe(concat(outputFileName))
            .pipe(gulp.dest(outputFolder));
    });

    //if (gutil.env.prod) {
        var minifyTasks = getBundles(regex.css).map(function (bundle) {
            var outputFolder = getOutputFolder(bundle.outputFileName);
            var outputFileName = getOutputFileName(bundle.outputFileName);

            if (bundle.createMinified === false || outputFileName.endsWith('.min.css')) {
                return null;
            }

            var minifiedCssOutputFile = outputFileName.substr(0, outputFileName.lastIndexOf(".")) + ".min.css";
            return gulp.src(bundle.inputFiles)
                .pipe(cleanCSS({
                    rebaseTo: outputFolder,
                    level: 1 // default optimization on css file
                }))
                .pipe(concat(minifiedCssOutputFile))
                .pipe(gulp.dest(outputFolder));
        });

        for (var i = 0; i < minifyTasks.length; i++) {
            if (minifyTasks[i] == null) {
                continue;
            }

            tasks.push(minifyTasks[i]);
        }
    //}

    return merge(tasks);
});

gulp.task("clean_bundles", function (cb) {
    async.parallel(bundleconfig.bundles.map(function (bundle) {
        return function (done) {
            if (bundle.outputFileName.match(/[^/]+(css|js)$/)) {
                rimraf(bundle.outputFileName, done);
            } else {
                rimraf(bundle.outputFileName + '/*', done);
            }
        }
    }), cb);
});

gulp.task("watch", function () {
    getBundles(regex.js).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:js"]);
    });

    getBundles(regex.css).forEach(function (bundle) {
        gulp.watch(bundle.inputFiles, ["min:css"]);
    });

    gulp.watch('./bundle.config.js', function () {
        runSequence(['min:css', 'min:js']);
    });
});

gulp.task('copy:node_modules', function () {
    rimraf.sync(bundleconfig.libsFolder + '/**/*', { force: true });
    var tasks = [];

    for (var mapping in bundleconfig.mappings) {
        if (bundleconfig.mappings.hasOwnProperty(mapping)) {
            var destination = bundleconfig.libsFolder + '/' + bundleconfig.mappings[mapping];
            if (mapping.match(/[^/]+(css|js)$/)) {
                tasks.push(
                    gulp.src(mapping).pipe(gulp.dest(destination))
                );
            } else {
                tasks.push(
                    gulp.src(mapping + '/**/*').pipe(gulp.dest(destination))
                );
            }
        }
    }

    return merge(tasks);
});

gulp.task('default', ['copy:node_modules'], function () {
    runSequence('watch', ['min:css', 'min:js']);
});

function getBundles(regexPattern) {
    return bundleconfig.bundles.filter(function (bundle) {
        return regexPattern.test(bundle.outputFileName);
    });
}

function getOutputFileName(fullFilePath) {
    var lastIndexOfSlash = fullFilePath.lastIndexOf('/');
    return fullFilePath.substr(lastIndexOfSlash, fullFilePath.length - lastIndexOfSlash);
}

function getOutputFolder(fullFilePath) {
    var lastIndexOfSlash = fullFilePath.lastIndexOf('/');
    return fullFilePath.substr(0, lastIndexOfSlash);
}

0

[email protected] created 6 years ago

@BBakerMMC

thanks but I still can't get all the files bundled - everything else is working in the CI build...

can you please share the "Using my vstsbuild gulp task" or are you calling the default task?
0
bbakermmc created 6 years ago
I must of grabbed an old gulpfile.

Just add this. Also in my previous post I commented out the "//if (gutil.env.prod) {" if you dont do this you need to pass "prod" as an additional param in the VSTS gulp config. (I personally like having the min files every time this run and I didnt know of a way for the built in task runner to run with it so I just commented it out)

gulp.task('vstsbuild', ['copy:node_modules'], function () { runSequence(['min:css', 'min:js']); });
0

[email protected] created 6 years ago

@BBakerMMC

Working perfectly - thanks for all your help!

cheers

Julian

Have an answer to this question? Log in and write your answer.