Now we include in the Visual Studio project and replace the 14 separate script includes with a single include to the new script. This will have created an file that contains minified JavaScript from all the js files in the app folder. Now, run gulp from the command line and you should see some output stating that scripts task is completed successfully. Clean task is completed before running the scripts task. This tasks depends on the clean task which means gulp will ensure that the Combine and minify all files from the app folder so gulp knows when the delete is complete It returns a promise, so make sure you return that from this task function del is an async function and not a gulp plugin (just standard nodejs) Include all js files but exclude any min.js files At any time, you or another developer on your team can re-install all the devDependencies by simply running npm install.įinally, create a gulpfile.js file in the same folder. Note, the -save-dev option here is telling node to add these packages to a devDependencies section in the package.json file and install the packages in a node_modules folder in the current folder. Run the following commands from the same folder that you added the package.json file. Next, we will install a few packages that we will use for this project. We can do this by running npm init on the command line or simply creating a file with the following contents: Initializing our project for Gulpįirst, we need to create a package.json file in the root directory of the your project. Let’s see what we can do to fix this using Gulp. Here is a snapshot of the traffic captured using Fiddler. From an application loading performance standpoint however, loading 14 separate JS files is generally not a great idea. From a code maintenance / readability standpoint, it is definitely good to split the code into files like this. The application is written using AngularJS and the code is split across 14 different JS files. I wanted to use this template as an example because it is a perfect candidate for Gulp. First, I will create an new empty web application and then install the HotTowel.Angular nuget package. Rather than create a new sample project here, I’m going to use the Hot Towel SPA template from John Papa. Npm install gulp -g Setting up your Visual Studio project Once node is installed, we need to install gulp using the node package manager (npm). If you are using VS 2015 and ASP.NET 5, Visual Studio will install npm and gulp for you automatically. If you don’t already have it installed, download and install node.js. As it turns out, it is pretty easy to use and is probably best described using an example. The basic idea with Gulp is that you use pipes to stream a set of data (usually files) through some kind of processing. In this case, we are talking about building the client side parts of our applications like JavaScript files, StyleSheets (CSS, SASS or LESS) and HTML files. No, this isn’t a replacement for build systems like msbuild or nant. Gulp calls itself the streaming build system. Updated Aug 30, 2015: Improved sample gulpfile and added sections to answer common questions. Updated Sept 16, 2015: Improved sample gulpfile.
0 Comments
Leave a Reply. |