1已卸、如何全局安裝一個(gè) node 應(yīng)用?
npm install -g [name]
2、package.json 有什么作用翠订？
package.json定義了這個(gè)項(xiàng)目所需要的各種模板，以及項(xiàng)目的配置信息遵倦，當(dāng)我們使用npm init命令時(shí)即可以生成package.json.
{
"name": "my_package", //項(xiàng)目名稱尽超，只能一個(gè)單詞且全小寫(xiě)，允許-和_梧躺。發(fā)布的時(shí)候名字和npm官網(wǎng)不重名
"version": "1.0.0", //版本號(hào)似谁。
"main": "index.js", //main字段指定了加載的入口文件傲绣。
"scripts": { //指定了運(yùn)行腳本命令的npm命令行縮寫(xiě)
"test": "echo \"Error: no test specified\" && exit 1" //一般默認(rèn)一個(gè)test的空文件夾、用作寫(xiě)測(cè)試代碼巩踏。
},
"keywords": [], //項(xiàng)目的關(guān)鍵詞秃诵。
"author": "ag_dubs", //作者名稱
"license": "ISC", //協(xié)議
"repository": { // 用來(lái)存放到 版本管理遠(yuǎn)程服務(wù)。
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": { // 正式使用時(shí)塞琼，依賴的包
"my_dep": "^1.0.0"
},
"devDependencies" : {//開(kāi)發(fā)或者測(cè)試時(shí)菠净，依賴的包，用戶使用時(shí)不會(huì)被下載彪杉。
"my_test_framework": "^3.1.0"
}
"bugs": {一個(gè)對(duì)象毅往，包含url網(wǎng)址和郵箱，當(dāng)使用者發(fā)現(xiàn)問(wèn)題時(shí)派近，可以通過(guò)這兩種方式提交問(wèn)題
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package" //項(xiàng)目主頁(yè)
}
3攀唯、npm install --save app 與 npm install --save-dev app有什么區(qū)別?
- npm install --save app：將在當(dāng)前目錄導(dǎo)入npm依賴包，并寫(xiě)入'dependencies'字段渴丸，當(dāng)其他人下載代碼并運(yùn)行npm install時(shí)會(huì)自動(dòng)下載侯嘀。
- npm install --save-dev app：將在當(dāng)前目錄導(dǎo)入npm依賴包，并寫(xiě)入'devDependencies'字段谱轨，當(dāng)其他人下載代碼并運(yùn)行npm install時(shí)不會(huì)自動(dòng)下載残拐。
4、 node_modules的查找路徑是怎樣的?
當(dāng)前目錄下尋找node_modules下的xxx碟嘴，若沒(méi)有溪食，則返回到上一級(jí)目錄的node_modules下尋找xxx，最終會(huì)找到根目錄下node_modules下的xxx娜扇。
5错沃、npm3與 npm2相比有什么改進(jìn)？yarn和 npm 相比有什么優(yōu)勢(shì)? (選做題目)
6雀瓢、webpack是什么枢析？和其他同類型工具比有什么優(yōu)勢(shì)？
- 什么是webpack：Webpack可以看做是模塊打包機(jī)：它做的事情是刃麸，分析你的項(xiàng)目結(jié)構(gòu)醒叁，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（Scss，TypeScript等）泊业，并將其轉(zhuǎn)換和打包為合適的格式供瀏覽器使用把沼。
- Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類似編譯吁伺，組合饮睬，壓縮等任務(wù)的具體步驟，這個(gè)工具可以自動(dòng)替你完成這些任務(wù)篮奄。Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體捆愁，通過(guò)一個(gè)給定的主文件（如：index.js）割去，Webpack將從這個(gè)文件開(kāi)始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們昼丑，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件呻逆。
- webpack的優(yōu)勢(shì)
1、webpack是以commonJS的形式來(lái)書(shū)寫(xiě)腳本菩帝，但對(duì)AMD/CMD的支持也很全面
2咖城、Webpack 有兩種組織模塊依賴的方式，同步和異步胁附。異步依賴作為分割點(diǎn)酒繁，形成一個(gè)新的塊。在優(yōu)化了依賴樹(shù)后控妻，每一個(gè)異步區(qū)塊都作為一個(gè)文件被打包州袒。
3、webpack本身只能處理原生JS模塊弓候，但是loader轉(zhuǎn)換器可以將各種類型的資源轉(zhuǎn)換成JS模塊郎哭。這樣，任何資源都可以成為webpack可以處理的模塊
4菇存、webpack有一個(gè)智能解析器夸研，幾乎可以處理任何第三方庫(kù)，無(wú)論它們的模塊形式是commonJS,AMD還是普通的JS文件依鸥。
5亥至、webpack還有一個(gè)功能豐富的插件系統(tǒng)。大多數(shù)內(nèi)容功能都是基于這個(gè)插件系統(tǒng)運(yùn)行的贱迟，還可以開(kāi)發(fā)和使用開(kāi)源的webpack插件姐扮，來(lái)滿足各種各樣的需求。
6衣吠、webpack使用異步I/O和多級(jí)緩存提高運(yùn)行效率茶敏，使得它能夠快速增量編譯
7、npm script是什么缚俏？如何使用惊搏？
npm 允許在package.json文件里面，使用scripts字段定義腳本命令忧换。這些定義在package.json里面的腳本恬惯，就稱為 npm script。
//package.json
"scripts":{
"start": "mkdir cd",
"bulid":"touch index1.js",
"test":"echo test..."
}
npm start
npm test
npm run bulid
8包雀、使用 webpack 替換 入門-任務(wù)15中模塊化使用的 requriejs
9宿崭、gulp是什么？使用 gulp 實(shí)現(xiàn)圖片壓縮才写、CSS 壓縮合并葡兑、JS 壓縮合并
gulp是前端自動(dòng)化構(gòu)建工作流的利器，自動(dòng)化地完成 javascript/coffee/sass/less 等文件的的測(cè)試赞草、檢查讹堤、合并、壓縮厨疙、格式化洲守、瀏覽器自動(dòng)刷新、部署文件生成沾凄，并監(jiān)聽(tīng)文件在改動(dòng)后重復(fù)指定的這些步驟梗醇。
//gulpfile.js
var gulp = require('gulp'),
minify= require('gulp-minify-css'), //css壓縮
uglify= require('gulp-uglify'), //生成文件
concat=require('gulp-concat'), //合并成一個(gè)文件
rename=require('gulp-rename'), //重命名
clean=require('gulp-clean'), //清空文件夾
minhtml=require('gulp-htmlmin'), //html壓縮
jshint=require('gulp-jshint'), //js代碼規(guī)范性檢查
imagemin=require('gulp-imagemin'); //圖片壓縮
gulp.task('html',function(){
return gulp.src('src/*.html')
.pipe(minhtml({collapseWhitespace:true}))
.pipe(gulp.dest('dist'))
});
gulp.task('css', function(){
gulp.src("src/css/*.css")
.pipe(concat("merge.min.css"))
.pipe(minifycss())
.pipe(gulp.dest("dist/css/"));
});
gulp.task('js', function(){
gulp.src("src/js/*.js")
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(uglify())
.pipe(gulp.dest("dist/js/"));
});
gulp.task('img', function(argument){
gulp.src("src/img/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/imgs/"));
});
gulp.task('clean', function(argument){
gulp.src("dist/*",{read:false})
.pipe(clean());
});
gulp.task('build', ['html','css','js','img' ]);
10、開(kāi)發(fā)一個(gè) node 命令行天氣應(yīng)用用于查詢用戶當(dāng)前所在城市的天氣撒蟀，發(fā)布到 npm 上去叙谨。可以通過(guò)如下方式安裝使用(可使用api.jirengu.com里提供的查詢天氣接口) (選做題目)
暫定
筆記
第一課
1保屯、NPM
- NPM（node package manager）手负，通常稱為node包管理器。
- 主要功能就是管理node包姑尺，包括：安裝竟终、卸載、更新切蟋、查看统捶、搜索、發(fā)布等。（只要在npm官網(wǎng)搜索包名稱，選擇使用量最多的一個(gè)包愕宋，然后根據(jù)使用說(shuō)明安裝包）
- npm是基于couchdb的一個(gè)數(shù)據(jù)庫(kù)形葬，詳細(xì)記錄了每個(gè)包的信息，包括作者板丽、版本、依賴、授權(quán)信息等兑凿。它的一個(gè)很重要的作用就是：將開(kāi)發(fā)者從繁瑣的包管理工作（版本、依賴等）中解放出來(lái)茵瘾，更加專注于功能的開(kāi)發(fā)礼华。
2、命令行
node -v //查看node版本
npm -v //查看npm版本
sudo npm install npm -g //更新npm的版本
3拗秘、node包的安裝
- 本地安裝：package會(huì)被下載到當(dāng)前所在目錄圣絮，也只能在當(dāng)前目錄下使用
//npm install pkg
npm install grunt-cli
//安裝結(jié)束后，當(dāng)前目錄下回多出一個(gè)node_modules目錄雕旨，grunt-cli就安裝在里面扮匠。
運(yùn)行如上命令捧请，就會(huì)在當(dāng)前目錄下安裝grunt-cli（grunt命令行工具）
- 全局安裝：package會(huì)被下載到到特定的系統(tǒng)目錄下，安裝的package能夠在所有目錄下使用
npm install -g grunt-cli //npm uninstall -g grunt-cli刪除全局安裝的包
運(yùn)行如上命令棒搜，就會(huì)在特定的系統(tǒng)目錄下安裝grunt-cli（grunt命令行工具）
- 如果使用npm安裝插件太慢（被墻）疹蛉，可執(zhí)行
npm install -g cnpm --registry=https://registry.npm.taobao.org //先安裝cnpm, 之后再安裝插件時(shí)用cnpm安裝cnpm install pkg
4、node包下載后代碼的使用
//這是目錄表
www/
demo1/
--demo2/
----node_modules/
-----marked.js
----index.js
//index.js
var marked=require("marked");
//代碼會(huì)在當(dāng)前目錄下的node_modules文件下找marked.js,若沒(méi)有力麸，則在上一級(jí)的demo1的文件夾下的node_modules文件下找marked.js可款，直到找到為止
第二課
1、新建node包
- 在bash里新建一個(gè)新的文件夾
- 在新建目錄下執(zhí)行
npm init //會(huì)出現(xiàn)一段需要輸入的文字
- 根據(jù)需求輸入node包信息
name:demo1 //命名必須是唯一的克蚂，不能和npm官網(wǎng)的node包重名
version:(1.0.0) //默認(rèn)
description:這是測(cè)試
enter point:(main.js) //輸入入口闺鲸，當(dāng)調(diào)用這個(gè)包時(shí)就執(zhí)行這個(gè)腳本
test command:
git reposotory:http://github.com/Ethan66/demo1 //輸入上傳到github的網(wǎng)址
keywords:this is test
author: Ethan
輸入 yes完成node初始化，當(dāng)前目錄下出現(xiàn)了package.json埃叭，里面有輸入的信息
- 新建readme.md摸恍，相當(dāng)于使用指南
- 新建main.js，輸入其他依賴的包
//main.js
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;
- 下載需要的包
npm install --save marked //在npm 官網(wǎng)下載包
//因?yàn)楫?dāng)前目錄沒(méi)有依賴的marked包游盲，所以只有下載下來(lái)才不會(huì)報(bào)錯(cuò)
//同時(shí)误墓，在package.json文件中新增了dependencise屬性
- 下載自己開(kāi)發(fā)測(cè)試需要的包
npm install --save-dev easytal //在npm官網(wǎng)下載包
//區(qū)別于6，現(xiàn)在下載的包是用于自己測(cè)試自己開(kāi)發(fā)的包所需要的依賴益缎，并不是自己開(kāi)發(fā)的包的依賴
//package.json文件中增加的devDependencise屬性谜慌，別人下載我的包的時(shí)候不會(huì)同時(shí)下載這個(gè)依賴的包
2、上傳包
- 登錄npm
npm login
//在出現(xiàn)的提示中輸入name和password
- 上傳自己開(kāi)發(fā)好的包
npm publish
- 確認(rèn)是否發(fā)送成功
在npm官網(wǎng)搜索包的名字
3莺奔、新建包用于全局安裝
- 作用：不需要指定文件夾欣范，在任何文件夾下都可以執(zhí)行包
- 執(zhí)行新建node包中的1-7步驟
- 在main.js,增加語(yǔ)句
//main.js
#!/usr/bin/env node //一定要寫(xiě)這句話，表示用node執(zhí)行當(dāng)前的文件令哟，在命令行中不用在開(kāi)頭寫(xiě)node
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;
- 在package.json中增加語(yǔ)句
"bin":{
"example":"./main.js" //表示當(dāng)在命令行中輸入example,就會(huì)執(zhí)行main.js的這個(gè)腳本
}
- 上傳包（跟2.上傳包步驟一樣）
- 安裝包恼琼，看是否可以全局
npm install -g demo1 //demo1為package.json的name值
npm list -g --depth 0 //查看全局安裝過(guò)的包
//C:\Users\Administrator\AppData\Roaming\npm（測(cè)過(guò)：windows所有全局安裝的node包都在這個(gè)路徑下）
//顯示路徑/usr/local/lib/node_modules/為所有全局安裝的node包都在這個(gè)路徑下
4、 獲取命令行輸入的參數(shù)
node main.js 杭州 //如何在代碼中獲取杭州
//main.js
console.log(process.argv[2]) //process.argv是一個(gè)數(shù)組屏富，第三個(gè)就是命令行輸入的參數(shù)
5晴竞、 模塊
//和jq中ajax發(fā)請(qǐng)求類似的模塊
axios或request //向一個(gè)地址發(fā)送請(qǐng)求，獲取數(shù)組
6狠半、 package.json其他參數(shù)
- 在命令行輸入npm run,然后再輸入scripts的屬性名（start,bulid,test）,執(zhí)行相對(duì)于的語(yǔ)句噩死，注意：只有start和test前面寫(xiě)省略run,其他全部要加run
"scripts":{
"start": "mkdir cd",
"bulid":"touch index1.js",
"test":"echo test..."
}
npm start
npm test
npm run bulid
第三課
1、gulp簡(jiǎn)介
- 地址 http://gulpjs.com/
- 作用：打造前端工作流的利器神年，打包已维、壓縮、合并已日、git垛耳、遠(yuǎn)程操作...
- 提高編譯效率：采用node.js數(shù)據(jù)流的機(jī)制。
（非數(shù)據(jù)流：打開(kāi)一文件，修改文件堂鲜，保存文件栈雳，再打開(kāi)，再修改后保存...泡嘴。數(shù)據(jù)流：修改文件不保存甫恩，等下次操作直接進(jìn)行操作數(shù)據(jù)流逆济，等全部操作完成再輸出）
2酌予、gulp安裝
- 全局安裝gulp
npm install gulp-cli -g
- 執(zhí)行第二課"新建node包"中的1-4步驟
- 在命令行中新建gulpfile.js
- 打開(kāi)gulpfile.js文件，輸入固定代碼
var gulp = require('gulp'); //需要安裝gulp包
var pug = require('gulp-pug'); //把一個(gè)模板生成html
var less = require('gulp-less'); //把一個(gè)less文件生成css
var minifyCSS = require('gulp-csso'); //把css文件壓縮
//給gulp創(chuàng)建了一個(gè)html的任務(wù)奖慌，把src里面的路徑文件變成數(shù)據(jù)流傳給pipe抛虫，再傳給pug進(jìn)行處理，最后輸出為html简僧。在命令行中執(zhí)行g(shù)ulp html就會(huì)執(zhí)行這條任務(wù)
gulp.task('html', function(){
return gulp.src('client/templates/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('client/templates/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
//這條語(yǔ)句表示在命令行中輸入gulp,就會(huì)默認(rèn)執(zhí)行html和css兩個(gè)任務(wù)
gulp.task('default', [ 'html', 'css' ]);
- 根據(jù)gulpfile.js代碼中第一行需求要安裝依賴
npm install gulp --save-dev --registry=https://registry.npm.taobao.org //通過(guò)淘寶鏡像安裝建椰，不然太慢了
- 命令行輸入gulp(若提示沒(méi)有找到，說(shuō)明gulp沒(méi)有全局安裝)
顯示提示：
Cannot find module 'gulp-cssnano' //根據(jù)提示安裝依賴
- 安裝gulp-cssnano依賴
npm install --save-dev gulp-cssnano
第四課
1岛马、實(shí)戰(zhàn)
- 案例：css壓縮
//gulpfile.js
var gulp = require('gulp');
var cssnano = require('gulp-cssnano'); //css壓縮
var concat= require('gulp-concat'); //生成文件
gulp.task('build:css', function(){
gulp.src("./src/css/*.css") //想要個(gè)別文件：src(['client/templates/1.less','client/templates/3.less'])
.pipe(concat("index-merge.css"))
.pipe(cssnano())
.pipe(gulp.dest("dist/css/"));
});
gulp.task('default', [ 'build:css' ]);
- 案例：修改文件后重啟服務(wù)器
//gulpfile.js
var gulp = require('gulp');
var browserSync= require('browser-sync').create(); //css壓縮
var fs= require('fs'); //生成文件
gulp.task('reload', function(){
browserSync.reload();
});
gulp.task('server', function(){ //當(dāng)運(yùn)行g(shù)ulp server時(shí)棉姐，本地開(kāi)啟服務(wù)器，瀏覽器會(huì)看到這個(gè)頁(yè)面
browserSync.init({
server:{
baseDir:"./src"
}
})
});
gulp.watch(['**/*.css','**/*.html','**/*.js'],['reload']); //當(dāng)文件發(fā)生改動(dòng)啦逆，啟動(dòng)reload
- 案例：修改后有版本號(hào)
//gulpfile.js
var gulp=require('gulp'),
rev=require('gulp-rev'), //添加版本號(hào)
revReplace=require('gulp-rev-replace'), //版本號(hào)替換
useref=require('gulp-useref'), //解析html資源定位
gulpif=require('gulp-if'),
filter=require('gulp-filter'),
uglify=require('gulp-uglify'),
csso=require('gulp-csso'), //css優(yōu)化壓縮
clean=require('gulp-clean'),
imagemin=require('gulp-imagemin'),
concat=require('gulp-concat'),
less=require('gulp-less'),
autoprefixer=require('gulp-autoprefixer'), //css自動(dòng)加前綴伞矩，css后編譯，兼容其他的瀏覽器
connect=require('gulp-connect');
gulp.task('img',function(){
gulp.src('src/imgs/*').pipe(imagemin())
.pipe(gulp.dest('dist/imgs'))
});
gulp.task(dist:'css',function(){
gulp.src('dist/css/*').pipe(clean());
return gulp.src('src/css/*.less')
.pipe(less()).pipe(csso())
.pipe(concat('merge.css'))
.pipe(autoprefixer(){
browsers:['last 2 versions'], //考慮瀏覽器最新的2個(gè)版本
cascade:false
})
.pipe(gulp.dest('dist/css'))
});
gulp.task('src:css',function(){
gulp.src('src/css/*').pipe(clean());
return gulp.src('src/css/*.less')
.pipe(less()) .pipe(concat('merge.css'))
.pipe(autoprefixer(){
browsers:['last 2 versions'],
cascade:false
})
.pipe(gulp.dest('src/css'))
});
gulp.task('js',function(){
gulp.src('src/js/*').pipe(clean());
return gulp.src('src/js/*.js').pipe(uglify())
.pipe(concat('merge.js'))
.pipe(gulp.dest('dist/js'))
});
gulp.task('revision',['dist:css','js'],function(){
return gulp.src(['dist/js/*.js','dist/css/*'])
.pipe(rev()) .pipe(gulp.dest('dist'))
.pipe(rev.manifest()) //會(huì)生成rev-manifest.json文件夏志，記錄版本及對(duì)應(yīng)文件名
.pipe(gulp.dest('dist'))
});
gulp.task('index',['revision'],function(){
var mainifest=gulp.src('./dist/rev-mainifest.json'); //得到記錄版本號(hào)的文件
return gulp.src('src/index.html')
.pipe(revReplace( //對(duì)index.html進(jìn)行各替換乃坤，需要在index.html內(nèi)寫(xiě)上注釋（視頻39分處）
manifest:manifest
))
.pipe(useref())
.pipe(gulp.dest('dist'))
});
gulp.task('watch',function(){
gulp.watch('src/**/*.less',['src:css'])
})
gulp.task('connect',function(){ //作用：創(chuàng)建個(gè)服務(wù)器，當(dāng)你保存的時(shí)候會(huì)自動(dòng)刷新
connect.server({
root:'src',
livereload:true
})
})
gulp.task('reload',function(){
gulp.src('src/*.html').pipe(connect.reload())
})
gulp.task('change',function(){
gulp.wathc(['src/**/*'],['src:css','reload'])
})
gulp.task('server',['connect','change'])
