Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

All About That npm No Bower

DZone's Guide to

All About That npm No Bower

Check out how to quickly convert a web application from using Bower to using npm.

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

One of the many new features of ASP.NET 5—and the "new" Microsoft as some would call it—is the implementation or integration of the open tooling and other package managers in the OSS world. Node, grunt, gulp, and Bower are terms not unbeknownst to web developers using other platforms.

However, with all of this comes more setup, or management of tooling, or "what to use when", etc. And, some of the community feedback within ASP.NET has been around this very topic.

Converting Web Application to Use npm

Here is a quick conversion of the basic web application from using Bower to using npm.

  • delete .bowerrc
  • Since we are not using Bower, there is no need for the file. The purpose of the file, FYI, is to set the installation location of the libraries downloaded and in this case it was set to wwwroot/lib.

  • npm install the items in bower.json
  • npm install bootstrap jquery jquery-validation --save  

    This adds bootstrap, jquery, and jquery-validation to the package.json file in the dependencies node.

    ,
      "dependencies": {
        "bootstrap": "^3.3.6",
        "jquery": "^2.1.4",
        "jquery-validation": "^1.14.0"
      }

    The last JavaScript resource used, is jquery-validation-unobtrusive from the ASP.NET team, but this is not currently available in the npm registry, however there is a pending PR to get this resolved.

    In order to get it added, simply npm install with the url of the git repository.

    npm install https://github.com/aspnet/jquery-validation-unobtrusive --save  

    There are some changes needed for the gulpfile.js setup and tasks. First, setup the configuration for the sources and destinations of the resources.

    var library = {  
      base: "node_modules",
      destination: "lib",
      source: [
        // glob pattern to get the dirname and match only js and min.js file wanted
        path.dirname(require.resolve('ASP.NET/jquery.validate.unobtrusive.js')) + '/*unobtrusive**.js',
        // alternative of declaring each file
        require.resolve('bootstrap/dist/js/bootstrap.js'),
        require.resolve('bootstrap/dist/js/bootstrap.min.js'),
        require.resolve('bootstrap/dist/css/bootstrap.css'),
        // glob pattern to get all files within the directory
        path.dirname(require.resolve('bootstrap/dist/fonts/glyphicons-halflings-regular.woff')) + '/**',
        // declare each file
        require.resolve('jquery/dist/jquery.js'),
        require.resolve('jquery/dist/jquery.min.js'),
        // only one file is distributed
        require.resolve('jquery-validation/dist/jquery.validate.js')
      ]
    }

    Next, we need to add the copy task to get the resources moved to \lib folder.

    gulp.task("lib", function () {  
      return gulp.src(library.source, { base: library.base })
        .pipe(gulp.dest(paths.webroot + library.destination));
    });

    Add a clean:lib task as well to follow the pattern for resetting the \lib folder

    gulp.task("clean:lib", function (cb) {  
      rimraf(library.destination, cb);
    });

    Finally, to put it all together. Add the clean:lib task to the clean task.

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

    Then two additional tasks build and default will round out the gulp file.

    gulp.task("build", ["clean", "min", "lib"]);
    
    gulp.task("default", ["build"]);  

    There are no other changes needed to the project to convert from Bower to npm. By making some minor changes to the gulp file to handle copying the files—it is a very minimal change—now there is a one less repository & config file. If you are using Visual Studio 2015, a pre-build binding to the build gulp task would be recommended as well.

    The before-and-after code is available on github: http://github.com/spboyer/bowertonpm.

    Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

    Topics:
    npm ,bower ,asp.net ,.net

    Published at DZone with permission of Shayne Boyer, DZone MVB. See the original article here.

    Opinions expressed by DZone contributors are their own.

    THE DZONE NEWSLETTER

    Dev Resources & Solutions Straight to Your Inbox

    Thanks for subscribing!

    Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

    X

    {{ parent.title || parent.header.title}}

    {{ parent.tldr }}

    {{ parent.urlSource.name }}