1、如何全局安装一个 node 应用?
npm install -g [name]
2、package.json 有什么作用?
package.json定义了这个项目所需要的各种模板,以及项目的配置信息,当我们使用npm init命令时即可以生成package.json.
{
"name": "my_package", //项目名称,只能一个单词且全小写,允许-和_。发布的时候名字和npm官网不重名
"version": "1.0.0", //版本号。
"main": "index.js", //main字段指定了加载的入口文件。
"scripts": { //指定了运行脚本命令的npm命令行缩写
"test": "echo \"Error: no test specified\" && exit 1" //一般默认一个test的空文件夹、用作写测试代码。
},
"keywords": [], //项目的关键词。
"author": "ag_dubs", //作者名称
"license": "ISC", //协议
"repository": { // 用来存放到 版本管理远程服务。
"type": "git",
"url": "https://github.com/ashleygwilliams/my_package.git"
},
"dependencies": { // 正式使用时,依赖的包
"my_dep": "^1.0.0"
},
"devDependencies" : {//开发或者测试时,依赖的包,用户使用时不会被下载。
"my_test_framework": "^3.1.0"
}
"bugs": {一个对象,包含url网址和邮箱,当使用者发现问题时,可以通过这两种方式提交问题
"url": "https://github.com/ashleygwilliams/my_package/issues"
},
"homepage": "https://github.com/ashleygwilliams/my_package" //项目主页
}
3、npm install --save app 与 npm install --save-dev app有什么区别?
- npm install --save app:将在当前目录导入npm依赖包,并写入'dependencies'字段,当其他人下载代码并运行npm install时会自动下载。
- npm install --save-dev app:将在当前目录导入npm依赖包,并写入'devDependencies'字段,当其他人下载代码并运行npm install时不会自动下载。
4、 node_modules的查找路径是怎样的?
当前目录下寻找node_modules下的xxx,若没有,则返回到上一级目录的node_modules下寻找xxx,最终会找到根目录下node_modules下的xxx。
5、npm3与 npm2相比有什么改进?yarn和 npm 相比有什么优势? (选做题目)
6、webpack是什么?和其他同类型工具比有什么优势?
- 什么是webpack:Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。
- Gulp的工作方式是:在一个配置文件中,指明对某些文件进行类似编译,组合,压缩等任务的具体步骤,这个工具可以自动替你完成这些任务。Webpack的工作方式是:把你的项目当做一个整体,通过一个给定的主文件(如:index.js),Webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个浏览器可识别的JavaScript文件。
- webpack的优势
1、webpack是以commonJS的形式来书写脚本,但对AMD/CMD的支持也很全面
2、Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。
3、webpack本身只能处理原生JS模块,但是loader转换器可以将各种类型的资源转换成JS模块。这样,任何资源都可以成为webpack可以处理的模块
4、webpack有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是commonJS,AMD还是普通的JS文件。
5、webpack还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的webpack插件,来满足各种各样的需求。
6、webpack使用异步I/O和多级缓存提高运行效率,使得它能够快速增量编译
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 替换 入门-任务15中模块化使用的 requriejs
9、gulp是什么?使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp是前端自动化构建工作流的利器,自动化地完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。
//gulpfile.js
var gulp = require('gulp'),
minify= require('gulp-minify-css'), //css压缩
uglify= require('gulp-uglify'), //生成文件
concat=require('gulp-concat'), //合并成一个文件
rename=require('gulp-rename'), //重命名
clean=require('gulp-clean'), //清空文件夹
minhtml=require('gulp-htmlmin'), //html压缩
jshint=require('gulp-jshint'), //js代码规范性检查
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、开发一个 node 命令行天气应用用于查询用户当前所在城市的天气,发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)
暂定
笔记
第一课
1、NPM
- NPM(node package manager),通常称为node包管理器。
- 主要功能就是管理node包,包括:安装、卸载、更新、查看、搜索、发布等。(只要在npm官网搜索包名称,选择使用量最多的一个包,然后根据使用说明安装包)
- npm是基于couchdb的一个数据库,详细记录了每个包的信息,包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是:将开发者从繁琐的包管理工作(版本、依赖等)中解放出来,更加专注于功能的开发。
2、命令行
node -v //查看node版本
npm -v //查看npm版本
sudo npm install npm -g //更新npm的版本
3、node包的安装
- 本地安装:package会被下载到当前所在目录,也只能在当前目录下使用
//npm install pkg
npm install grunt-cli
//安装结束后,当前目录下回多出一个node_modules目录,grunt-cli就安装在里面。
运行如上命令,就会在当前目录下安装grunt-cli(grunt命令行工具)
- 全局安装:package会被下载到到特定的系统目录下,安装的package能够在所有目录下使用
npm install -g grunt-cli //npm uninstall -g grunt-cli删除全局安装的包
运行如上命令,就会在特定的系统目录下安装grunt-cli(grunt命令行工具)
- 如果使用npm安装插件太慢(被墙),可执行
npm install -g cnpm --registry=https://registry.npm.taobao.org //先安装cnpm, 之后再安装插件时用cnpm安装cnpm install pkg
4、node包下载后代码的使用
//这是目录表
www/
demo1/
--demo2/
----node_modules/
-----marked.js
----index.js
//index.js
var marked=require("marked");
//代码会在当前目录下的node_modules文件下找marked.js,若没有,则在上一级的demo1的文件夹下的node_modules文件下找marked.js,直到找到为止
第二课
1、新建node包
- 在bash里新建一个新的文件夹
- 在新建目录下执行
npm init //会出现一段需要输入的文字
- 根据需求输入node包信息
name:demo1 //命名必须是唯一的,不能和npm官网的node包重名
version:(1.0.0) //默认
description:这是测试
enter point:(main.js) //输入入口,当调用这个包时就执行这个脚本
test command:
git reposotory:http://github.com/Ethan66/demo1 //输入上传到github的网址
keywords:this is test
author: Ethan
输入 yes完成node初始化,当前目录下出现了package.json,里面有输入的信息
- 新建readme.md,相当于使用指南
- 新建main.js,输入其他依赖的包
//main.js
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;
- 下载需要的包
npm install --save marked //在npm 官网下载包
//因为当前目录没有依赖的marked包,所以只有下载下来才不会报错
//同时,在package.json文件中新增了dependencise属性
- 下载自己开发测试需要的包
npm install --save-dev easytal //在npm官网下载包
//区别于6,现在下载的包是用于自己测试自己开发的包所需要的依赖,并不是自己开发的包的依赖
//package.json文件中增加的devDependencise属性,别人下载我的包的时候不会同时下载这个依赖的包
2、上传包
- 登录npm
npm login
//在出现的提示中输入name和password
- 上传自己开发好的包
npm publish
- 确认是否发送成功
在npm官网搜索包的名字
3、新建包用于全局安装
- 作用:不需要指定文件夹,在任何文件夹下都可以执行包
- 执行新建node包中的1-7步骤
- 在main.js,增加语句
//main.js
#!/usr/bin/env node //一定要写这句话,表示用node执行当前的文件,在命令行中不用在开头写node
var marked=require("marked");
var str=marked(# hello world);
modul.exports=str;
- 在package.json中增加语句
"bin":{
"example":"./main.js" //表示当在命令行中输入example,就会执行main.js的这个脚本
}
- 上传包(跟2.上传包步骤一样)
- 安装包,看是否可以全局
npm install -g demo1 //demo1为package.json的name值
npm list -g --depth 0 //查看全局安装过的包
//C:\Users\Administrator\AppData\Roaming\npm(测过:windows所有全局安装的node包都在这个路径下)
//显示路径/usr/local/lib/node_modules/为所有全局安装的node包都在这个路径下
4、 获取命令行输入的参数
node main.js 杭州 //如何在代码中获取杭州
//main.js
console.log(process.argv[2]) //process.argv是一个数组,第三个就是命令行输入的参数
5、 模块
//和jq中ajax发请求类似的模块
axios或request //向一个地址发送请求,获取数组
6、 package.json其他参数
- 在命令行输入npm run,然后再输入scripts的属性名(start,bulid,test),执行相对于的语句,注意:只有start和test前面写省略run,其他全部要加run
"scripts":{
"start": "mkdir cd",
"bulid":"touch index1.js",
"test":"echo test..."
}
npm start
npm test
npm run bulid
第三课
1、gulp简介
- 地址 http://gulpjs.com/
- 作用:打造前端工作流的利器,打包、压缩、合并、git、远程操作...
- 提高编译效率:采用node.js数据流的机制。
(非数据流:打开一文件,修改文件,保存文件,再打开,再修改后保存...。数据流:修改文件不保存,等下次操作直接进行操作数据流,等全部操作完成再输出)
2、gulp安装
- 全局安装gulp
npm install gulp-cli -g
- 执行第二课"新建node包"中的1-4步骤
- 在命令行中新建gulpfile.js
- 打开gulpfile.js文件,输入固定代码
var gulp = require('gulp'); //需要安装gulp包
var pug = require('gulp-pug'); //把一个模板生成html
var less = require('gulp-less'); //把一个less文件生成css
var minifyCSS = require('gulp-csso'); //把css文件压缩
//给gulp创建了一个html的任务,把src里面的路径文件变成数据流传给pipe,再传给pug进行处理,最后输出为html。在命令行中执行gulp html就会执行这条任务
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'))
});
//这条语句表示在命令行中输入gulp,就会默认执行html和css两个任务
gulp.task('default', [ 'html', 'css' ]);
- 根据gulpfile.js代码中第一行需求要安装依赖
npm install gulp --save-dev --registry=https://registry.npm.taobao.org //通过淘宝镜像安装,不然太慢了
- 命令行输入gulp(若提示没有找到,说明gulp没有全局安装)
显示提示:
Cannot find module 'gulp-cssnano' //根据提示安装依赖
- 安装gulp-cssnano依赖
npm install --save-dev gulp-cssnano
第四课
1、实战
- 案例: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") //想要个别文件: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' ]);
- 案例:修改文件后重启服务器
//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(){ //当运行gulp server时,本地开启服务器,浏览器会看到这个页面
browserSync.init({
server:{
baseDir:"./src"
}
})
});
gulp.watch(['**/*.css','**/*.html','**/*.js'],['reload']); //当文件发生改动,启动reload
- 案例:修改后有版本号
//gulpfile.js
var gulp=require('gulp'),
rev=require('gulp-rev'), //添加版本号
revReplace=require('gulp-rev-replace'), //版本号替换
useref=require('gulp-useref'), //解析html资源定位
gulpif=require('gulp-if'),
filter=require('gulp-filter'),
uglify=require('gulp-uglify'),
csso=require('gulp-csso'), //css优化压缩
clean=require('gulp-clean'),
imagemin=require('gulp-imagemin'),
concat=require('gulp-concat'),
less=require('gulp-less'),
autoprefixer=require('gulp-autoprefixer'), //css自动加前缀,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个版本
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()) //会生成rev-manifest.json文件,记录版本及对应文件名
.pipe(gulp.dest('dist'))
});
gulp.task('index',['revision'],function(){
var mainifest=gulp.src('./dist/rev-mainifest.json'); //得到记录版本号的文件
return gulp.src('src/index.html')
.pipe(revReplace( //对index.html进行各替换,需要在index.html内写上注释(视频39分处)
manifest:manifest
))
.pipe(useref())
.pipe(gulp.dest('dist'))
});
gulp.task('watch',function(){
gulp.watch('src/**/*.less',['src:css'])
})
gulp.task('connect',function(){ //作用:创建个服务器,当你保存的时候会自动刷新
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'])