Report introduction to_npm_gulp_bower

1. Introduction to npm,
Gulp, Bower
Nat
20150206

2. Agenda
• npm
• gulp
• bower

3. npm
• npm: node package manager
• npm init
• npm install

4. package.json
1. {
2. "name": "20150206",
3. "version": "0.0.0",
4. "description": "",
5. "main": "index.js",
6. "scripts": {
7. "test": "echo "Error: no test specified" && exit 1"
8. },
9. "author": "",
10. "license": "ISC"
11. }

5. gulp
• npm install gulp
• npm install -g gulp
• C:Users{User}AppDataRoamingnpmnode_modules
• npm install --save-dev gulp
• npm install --save gulp

6. package.json
• {
• "name": "init-gulp",
• "version": "0.0.0",
• "dependencies": {
• "gulp": "~3.8.10"
• },
• "devDependencies": {},
• }

7. Package Version
• version rule
• "gulp": "3.8.10"
• "gulp": "~3.8.10"
• "gulp": "^3.8.10"
• "gulp": "latest"
=> install “3.8.10”
=> install “3.8.x” and >= 3.8.10
=> install “3.x.x” and >= 3.8.10

8. gulpfile.js
• type null > gulpfile.js
1. var gulp = require('gulp');
2. gulp.task('default', function() {
3. // place code for your default task here
4. console.log('Hello world');
5. });

9. bower
• npm install -g bower
• npm install --save-dev bower
• bower init
• bower install

10. bower.json
1. {
2. "name": "init-bower",
3. "version": "0.0.0",
4. "authors": [
5. "natqiu
<naspenant@gmail.com>"
6. ],
7. "license": "MIT",
8. "ignore": [
9. "**/.*",
10. "node_modules",
11. "bower_components",
12. "test",
13. "tests"
14. ]
15. }

11. Use bower install Client-Side Packages
• bower search bootstrap
• bower install --save bootstrap
• bower_components
• bootstrap
• jquery

12. change default bower_components folder
• .bowerrc
• type null > .bowerrc
1. {
2. "directory": "app/components/",
3. "analytics": false,
4. "timeout": 120000,
5. "registry": {
6. "search": [
7. "http://localhost:8000",
8. "https://bower.herokuapp.com"
9. ]
10. }
11. }

13. Task Runner Explorer
• https://visualstudiogallery.msdn.microsoft.com/8e1b4368-4afb-
467a-bc13-9650572db708

14. VS2015 ASP.NET 5 Project Template

15. Current gulpfile.js

16. References
• https://www.npmjs.com/
• http://gulpjs.com/
• http://bower.io/
• http://www.asp.net/vnext/overview/aspnet-vnext/grunt-and-
bower-in-visual-studio-2015