SlideShare a Scribd company logo
1 of 8
NPM, Bower and Gulp Kickstart
in Visual Studio 2015
Ivan Varga
Visual Studio 2015
Built in support for tools like Grunt, Bower, Gulp and NPM
NPM
Package manager for the JavaScript runtime environment Node.js.
package.json
Node packages: bower, gulp, grunt
Bower
Bower is a package management system for client-side
programming. It depends on Node.js and npm. It works with git and
GitHub repositories.
.bower.json
.bowerrc
Gulp vs Grunt
Node based automated task runners
compiling sass, linting css, concatenating files, minifying files,
auto-generating image sprites and compressing images
Grunt config file vs Gulp code
Gulp tasks
gulpfile.js
“gulp-load-plugins“, “gulp-bower“, “gulp-config“, “gulp-concat”,
“gulp-uglify“, “gulp-filter“, “gulp-util“, “gulp-useref”, “gulp-minify-css”,
“main-bower-files”, “gulp-angular-templatecache”
Task runner explorer
Execute Grunt/Gulp tasks
Bind Grunt/Gulp task to a Visual Studio event(Build and Solution
Open).
Demo
https://github.com/ivanvarga/Gulp-tasks

More Related Content

What's hot

Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasImproving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasPreston McCauley
 
Automate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.jsAutomate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.jsJosh Lee
 
Dial up your flow
Dial up your flowDial up your flow
Dial up your flowWes Eklund
 
Polyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and PlayPolyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and PlayEvgeny Goldin
 
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기Jay Park
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Develcz
 
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!Chang W. Doh
 
S&T What I know about Node 110817
S&T What I know about Node 110817S&T What I know about Node 110817
S&T What I know about Node 110817Dan Dineen
 
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)Ricardo Castelhano
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDevelcz
 
GradleのREPLプラグイン紹介 #jggug
GradleのREPLプラグイン紹介 #jggugGradleのREPLプラグイン紹介 #jggug
GradleのREPLプラグイン紹介 #jggugkyon mm
 
Building the Front End with AngularJS
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJSJohn Ennew
 
Puppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIPuppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIWilson Su
 
Ansible
AnsibleAnsible
Ansiblegnosek
 
JSCS - How to Style your JavaScript Code
JSCS - How to Style your JavaScript CodeJSCS - How to Style your JavaScript Code
JSCS - How to Style your JavaScript CodeArvind Bhardwaj
 

What's hot (20)

Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas TexasImproving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
 
Automate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.jsAutomate your WordPress Workflow with Grunt.js
Automate your WordPress Workflow with Grunt.js
 
Dial up your flow
Dial up your flowDial up your flow
Dial up your flow
 
Using GruntJS
Using GruntJSUsing GruntJS
Using GruntJS
 
Grunt All Day
Grunt All DayGrunt All Day
Grunt All Day
 
Polyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and PlayPolyglot Gradle with Node.js and Play
Polyglot Gradle with Node.js and Play
 
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
[5분 따라하기] 비주얼 스튜디오 C++에서 JSON 파서 설치하기
 
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
Daniel Steigerwald: EsteJS - javascriptové aplikace robusně, modulárně a komf...
 
ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!ServiceWorker: New game changer is coming!
ServiceWorker: New game changer is coming!
 
S&T What I know about Node 110817
S&T What I know about Node 110817S&T What I know about Node 110817
S&T What I know about Node 110817
 
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
When a Sassquatch and a Board get together (or how to use Grunt to chew Sass)
 
Daniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého SchizmaDaniel Steigerwald - Este.js - konec velkého Schizma
Daniel Steigerwald - Este.js - konec velkého Schizma
 
WebGL Awesomeness
WebGL AwesomenessWebGL Awesomeness
WebGL Awesomeness
 
GradleのREPLプラグイン紹介 #jggug
GradleのREPLプラグイン紹介 #jggugGradleのREPLプラグイン紹介 #jggug
GradleのREPLプラグイン紹介 #jggug
 
Building the Front End with AngularJS
Building the Front End with AngularJSBuilding the Front End with AngularJS
Building the Front End with AngularJS
 
Juju + KubernetesでGPU の活用
Juju + KubernetesでGPU の活用Juju + KubernetesでGPU の活用
Juju + KubernetesでGPU の活用
 
Puppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node APIPuppeteer - Headless Chrome Node API
Puppeteer - Headless Chrome Node API
 
Ansible
AnsibleAnsible
Ansible
 
Speed Loading
Speed LoadingSpeed Loading
Speed Loading
 
JSCS - How to Style your JavaScript Code
JSCS - How to Style your JavaScript CodeJSCS - How to Style your JavaScript Code
JSCS - How to Style your JavaScript Code
 

Similar to GulpGruntNPM

Automated Development Workflow with Gulp
Automated Development Workflow with GulpAutomated Development Workflow with Gulp
Automated Development Workflow with Gulpplewicki
 
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Philipp Burgmer
 
Gulp and bower Implementation
Gulp and bower Implementation Gulp and bower Implementation
Gulp and bower Implementation Prashant Shrestha
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end WorkflowPagepro
 
Gulp - the streaming build system
Gulp - the streaming build systemGulp - the streaming build system
Gulp - the streaming build systemSergey Romaneko
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend
 
Getting started with gulpjs
Getting started with gulpjsGetting started with gulpjs
Getting started with gulpjsunmesh dusane
 
Automating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with GulpAutomating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with GulpMike Hale
 
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.jsGDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.jsDominik Prokop
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...Evan Mullins
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflowRiccardo Coppola
 
Improving your workflow with gulp
Improving your workflow with gulpImproving your workflow with gulp
Improving your workflow with gulpfrontendne
 

Similar to GulpGruntNPM (20)

Automated Development Workflow with Gulp
Automated Development Workflow with GulpAutomated Development Workflow with Gulp
Automated Development Workflow with Gulp
 
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
Grunt, Gulp & fabs: Build Systems and Development-Workflow for Modern Web-App...
 
Gulp and bower Implementation
Gulp and bower Implementation Gulp and bower Implementation
Gulp and bower Implementation
 
Gulp overview
Gulp overviewGulp overview
Gulp overview
 
Grunt
GruntGrunt
Grunt
 
Grunt & Front-end Workflow
Grunt & Front-end WorkflowGrunt & Front-end Workflow
Grunt & Front-end Workflow
 
Gulp - the streaming build system
Gulp - the streaming build systemGulp - the streaming build system
Gulp - the streaming build system
 
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationGrunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous Integration
 
Groovy Maven Builds
Groovy Maven BuildsGroovy Maven Builds
Groovy Maven Builds
 
Getting started with gulpjs
Getting started with gulpjsGetting started with gulpjs
Getting started with gulpjs
 
Automating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with GulpAutomating WordPress Plugin Development with Gulp
Automating WordPress Plugin Development with Gulp
 
Grunt and Bower
Grunt and BowerGrunt and Bower
Grunt and Bower
 
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.jsGDG Kraków - Intro to front-end automation using bower.js & grunt.js
GDG Kraków - Intro to front-end automation using bower.js & grunt.js
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...WordCamp Atlanta -  April 15 2018 - dev team workflow and processes with word...
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
 
Bower & Grunt - A practical workflow
Bower & Grunt - A practical workflowBower & Grunt - A practical workflow
Bower & Grunt - A practical workflow
 
Grunt
GruntGrunt
Grunt
 
Building JavaScript
Building JavaScriptBuilding JavaScript
Building JavaScript
 
Gulp: Task Runner
Gulp: Task RunnerGulp: Task Runner
Gulp: Task Runner
 
Improving your workflow with gulp
Improving your workflow with gulpImproving your workflow with gulp
Improving your workflow with gulp
 
Frontend Build Tools - CC FE & UX
Frontend Build Tools - CC FE & UXFrontend Build Tools - CC FE & UX
Frontend Build Tools - CC FE & UX
 

GulpGruntNPM