Gulp overview
Transcript of Gulp overview
![Page 1: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/1.jpg)
Gulp
![Page 2: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/2.jpg)
Frontend Ecosystem overview
![Page 3: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/3.jpg)
Frontend Ecosystem overview
![Page 4: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/4.jpg)
Gulp basics
• Gulp is a tool for developers
• Write code, not configuration
• Concentrates on giving you little helpers called plugins supposed to do one and only one thing.
• There’s no “advanced” of gulp
• Gulp stays lean and provides very minimum to accomplish the task.
![Page 5: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/5.jpg)
Gulpfile
• gulpfile.js is an entry point that will be reach when executing gulp commandName
![Page 6: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/6.jpg)
streams
var fs = require("fs");
var readStream = fs.createReadStream("./file1.txt");
var writeStream = fs.createWriteStream("./output.txt")
readStream.pipe(writeStream);
readStream.pipe(process.stdout);
![Page 7: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/7.jpg)
Gulp Resources
• Gulp official site
• Getting started
• Documentation
![Page 8: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/8.jpg)
Visual Studio
• Task runner http://webtooling.visualstudio.com/task-runners/gulp/
• Web Essentials http://vswebessentials.com/
• Node JS tools https://www.visualstudio.com/en-us/features/node-js-vs.aspx
![Page 9: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/9.jpg)
Node JS tools (extensions and updates)
![Page 10: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/10.jpg)
NPM Scripts Task Runner
![Page 11: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/11.jpg)
Npm/bower vs nugget
• Nuget is not designed for frontend packages.
• Npm and bower contains more packages.
![Page 12: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/12.jpg)
ASP.NET trends
• The .NET ecosystem is migrating to the existing toolchains, instead of trying to roll their own.
• New versions of .NET are changing their task runners to use Gulp, and they are also switching to JSON-based configuration.
• .NET is aiming to become more portable. Using the tools provided by the frontend ecosystem (which is by nature platform-agnostic) makes sense in this regard.
• These tools are usable outside of the confines of .NET (as JS in the browser, again, has become its own system).
• You'll simply have more options in the long run (and, arguably, earlier).
![Page 13: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/13.jpg)
Frontend in ASP.NET world
• ASP.NET bundles and minification is going to be deprecated
• Frontend development is no longer a subset of backend development
• Frontend is moving faster - much faster - than the equivalent tools in Visual Studio
![Page 14: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/14.jpg)
Handling legacy
• Separate backend from frontend. Move to SPA app.
• Do not rely on platform features such as ASP.NET MVC bundles.
• Make your app backend agnostic.
![Page 15: Gulp overview](https://reader031.fdocuments.us/reader031/viewer/2022021923/58f2f50b1a28abf27c8b461d/html5/thumbnails/15.jpg)
Interesting info
• Introduction to ASP.NET 5 https://channel9.msdn.com/Events/Visual-Studio/Connect-event-2015/100
• https://github.com/aspnet/benchmarks