- 如何全局安装一个 node 应用?
//packageName是包名
//install 可以用 i 代替
//-g 表示全局安装
npm install -g packageName
2、 package.json 有什么作用？
{
"name": "hello cgq",
"version": "1.0.0", //name和version 形成了npm模块的唯一标识符
"description": "",//描述信息，会显示在npm搜索中，有助于别人发现
"keywords":"", //关键词信息 是一个字符串数组，同上显示在npm搜索中
"homepage":"",//主页地址
"bugs":"",//填写一个bug提交地址或者一个邮箱，有助于收集问题bugs改善
"files":"",//包所包含的所有文件，可以取值为文件夹。通常我们还是用 .npmignore 来去除不想包含到包里的文件。
"main": "index.js",//入口文件
"bin":"",//可执行文件，通过设置这个字段可以将它们包含到系统的 PATH 中，这样直接就可以运行
"repository":"",//包的代码存放仓库地址
"config":"",//用于向环境变量输出值
"man":"",//制定一个或通过数组制定一些文件来让linux下的man命令查找文档地址。
"dependencies":"",//项目运行时所依赖的模块
"devDependencies":"",//项目开发时所依赖的模块
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},//设置这个可以使 NPM 调用一些命令脚本，封装一些功能
"author": "", //作者
"license": "ISC" //开源协议许可证版本
}
题目3： npm install --save app 与 npm install --save-dev app有什么区别?
npm install --save app 是包实现功能所需的依赖,保存在package.json中的dependencies
npm install --save-dev app 是开发包时所需的依赖，适用于开发阶段，对用户不需要,用户安装时会忽略devDependencies的依赖,保存在devDependencies
题目4： node_modules的查找路径是怎样的?
先从当前目录下查找node_modules文件夹，如果没有，则到父级文件夹查找node_modules文件夹，直至查找到根目录。
查找路径伪代码:
/e/饥人谷/senior/s5/webpack2-tutorial/node_modules
/e/饥人谷/senior/s5/node_modules
/e/饥人谷/senior/node_modules
/e/饥人谷/node_modules
/e/node_modules
/node_modules
题目5： npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)
npm2 把每个依赖的包放在自己的子目录里
优点：目录结构清楚
缺点：可能会有重复冗余的依赖包：如下面示意里 a1 ，重复下载了。
|- a //包
|- |- a1 //依赖
|- |- a2 //依赖
|
|- b //包
|- |- a1 //依赖
|- |- b2 //依赖
npm3 把每个依赖的包放同级目录下，这样就可以减少包的重复下载
|— a //包
|- a1 //依赖
|- a2 //依赖
|— b //包
|- b2 //依赖
yarn和npm比较
npm安装不够快，不够稳定；npm安装时运行代码，存在安全问题。
yarn使用yarn.lock(每当有模块被安装都一定会更新)来保证，不同机子安装程序时的版本一致。
yarn安装速度比npm快。
- webpack是什么？和其他同类型工具比有什么优势？
WebPack是模块打包工具：它可以分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其编译转换，给供浏览器使用。找到css, 图片， 字体等资源，进行压缩，混淆等操作后，输出为处理后的资源，并实现依赖加载等操作
Grunt和Gulp的工作方式：
image.png
可以在一个配置文件中配置对某些文件进行类似编译，组合，压缩等任务的具体步骤，然后使用grunt或gulp自动替你完成这些任务
Webpack的工作方式：
image.png
把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，通过各种loaders处理后，最后打包为一个浏览器可识别的JavaScript文件。
对比：
webpack 是以commonJS的形式来书写脚本，对 AMD/CMD 的支持也很全面，方便其它模块也兼容使用
扩展性强，插件机制完善，能被模块化处理的资源多，例JS/CSS/IMG等
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- npm script是什么？如何使用？
npm 允许在package.json文件里面，使用scripts字段定义脚本命令。
上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。命令行下使用npm run命令，就可以执行这段脚本。
例子：
// package.json
{
// ...
"scripts": {
"upload": "git add .; git commit -m \"modify\"; git push"
}
}
// commond window
npm run upload
题目9：gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并
gulp能自动化地完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。可以大大提高我们的工作效率。
//安装插件
npm install gulp-imagemin --save-dev //图片压缩
npm install gulp-cssnano --save-dev //css压缩
npm install uglify --save-dev //js压缩
npm install gulp-jshint --save-dev //js规范检查
npm install gulp-concat --save-dev //文件合并
npm install gulp-rename --save-dev //重命名
//gulpfile.js文件
//引入插件
var gulp = require('gulp'),
cssnano = require('gulp-cssnano'),
concat = require('gulp-concat'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename')
//css合并压缩，调用命令行 gulp build:css
gulp.task('build:css', function() {
gulp.src('./src/css/*.css')
.pipe(concat('merge.css'))
.pipe(rename({
suffix: '.min'
}))
.pipe(cssnano())
.pipe(gulp.dest('dist/css/'));
})
//js合并压缩，调用命令行 gulp build:js
gulp.task('build:js', function() {
gulp.src('src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('merge.js'))
.pipe(rename({
suffix: '.min'
}))
.pipe(uglify())
.pipe(gulp.dest('dist/js/'));
})
//图片压缩，调用命令行 gulp build:image
gulp.task('build:image', function() {
gulp.src('src/imgs/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/imgs/'));
})
//把以上三种合并一起调用，命令行 gulp build
gulp.task('build', ['build:css', 'build:js', 'build:image']);