Gulp - Accessing gulpfile variable from AngularJS service

Question

I have a service where I manage my requests to a webservice and actually I have defined the webservice url on this service:

(function ()
{
    angular.module("MyProject")

    .factory("Webservice", ["$http", function ($http)
    {
        var URLbase = function ()
        {
            //return "http://myproject.link.pt/Service/Service.svc/";
            return "http://localhost/MyProject/Service.svc/";
        }

        var login = function (param) {
            var serviceURL = URLbase() + "ValidateLogin";
            return $http.post(serviceURL, JSON.stringify({ username: param.Username, password: param.Password }));
          }
        var loginResult = function (response) {
            return exists(response) && exists(response.data) && exists(response.data.ValidateLoginResult)
                ? response.data.ValidateLoginResult
                : null;
        }

        return {
            Login: login,
            LoginResult: loginResult
        }
    }])
})();

But when I need to publish my project I frequently forget to comment and uncomment the paths on the URLbase().

There is any way to do this on the gulpfile.js?

On my gulpfile.js I have two different tasks to build for development or for production and I thought that was nice if I could done that management there:

gulp.task('build-development', function (done)
{
    config.minify = false;

    var tasks = ['html', 'resources', 'assets', 'sass', 'js', 'vendors'];
    seq('clean', tasks, done);
});

gulp.task('build-production', function (done)
{
    config.minify = true;

    var tasks = ['html', 'resources', 'assets', 'sass', 'js', 'vendors'];
    seq('clean', tasks, function() {
        notifier.notify({ title: 'Project publishment', message: 'Done' });
    });
});

I already tried to create a variable on my gulpfile.js an access it on a AngularJS file but I got an error saying that variable isn't defined.

Sven Schoenung · Accepted Answer · 2017-01-10 14:59:04Z

1

Use a placeholder in your webservice:

var URLbase = function ()
{
    return "URL_BASE_FOR_WEBSERVICE";
}

Add both URLs to your config object:

gulp.task('build-development', function (done)
{
    config.minify = false;
    config.urlBaseForWebService = "http://localhost/MyProject/Service.svc/";

    var tasks = ['html', 'resources', 'assets', 'sass', 'js', 'vendors'];
    seq('clean', tasks, done);
});

gulp.task('build-production', function (done)
{
    config.minify = true;
    config.urlBaseForWebService = "http://myproject.link.pt/Service/Service.svc/";

    var tasks = ['html', 'resources', 'assets', 'sass', 'js', 'vendors'];
    seq('clean', tasks, function() {
        notifier.notify({ title: 'Project publishment', message: 'Done' });
    });
});

Finally in your js task use gulp-replace to replace the URL_BASE_FOR_WEBSERVICE placeholder with the value of config.urlBaseForWebService:

 var replace = require('gulp-replace');

 gulp.task('js', function() {
   return gulp.src('src/js/**/*.js')
     .pipe(replace(/URL_BASE_FOR_WEBSERVICE/, config.urlBaseForWebService))
     .pipe(gulp.dest('dist/js'));
 });

answered Jan 10, 2017 at 14:59

Sven Schoenung

30.6k8 gold badges67 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ninita Over a year ago

Really nice solution. Works perfectly! Thanks a lot

Collectives™ on Stack Overflow

Gulp - Accessing gulpfile variable from AngularJS service

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related