npm-npmscript-gulp-webpack

1. 如何全局安装一个 node 应用?

在终端输入npm install -g pkg pkg为安装包的名字
pkg会被下载到到特定的系统目录下，安装的pkg能够在所有目录下使用。

2. package.json 有什么作用？

1. 相当于你本地项目的一个文档说明。
2. 允许你指定你项目中所使用的node包的版本。
3. 构建项目更加容易，便于给其他用户下载使用。

package.json示例：

{
  "name": "my_package",     //项目名称，全部小写，不能有空格，一个单词，允许-和_. 如果是要发布自己的node插件，一般用github上面项目名称。
  "version": "1.0.0",  //项目版本号，每发布一次，版本号要变更 
  "main": "index.js", //目录中启动文件名称。或者称之为入口文件，一般都是 index.js

  "scripts": { //scripts字段是一个对象。它的每一个属性，对应一段命令。
      "test": "echo \"Error: no test specified\" && exit 1"    //一般默认一个 test的空文件夹、用作写测试代码。
  },

  "keywords": [],  //项目的关键词。 一般用不到，发布npm才用得到。
  "author": "jrg", //作者名称
  "license": "ISC", //协议 

  "repository": {  // 用来存放到 版本管理远程服务。 发布npm才有用
      "type": "git",
      "url": "https://github.com/ashleygwilliams/my_package.git"
  },

  "dependencies": {   // 正式使用时，依赖的包
      "my_dep": "^1.0.0"
  },

  "devDependencies" : {  //开发或者测试时，依赖的包。
      "my_test_framework": "^3.1.0"
  }
}

3： npm install --save app 与 npm install --save-dev app有什么区别?

• npm install --save app
  可以下载名为app的npm包，同时把自己npm包中所依赖这个app包的信息保存在package.json的dependencies中。这样用户在单独下载npm包时，会同时把dependencies中的包也下载下来。缩减了上传时包的大小。

• npm install --save-dev app
  可以下载名为app的npm包，同时把这个包的信息保存在package.json的devDependencies中，表示这是用户自己做development或测试时使用的包，正式发布时不会用到。这样其他用户在单独下载npm包时，不会同时把devDependencies中的app包也下载下来。缩减了下载时包的大小。

4. node_modules的查找路径是怎样的?

• 当require的内容以./或者../开头的按照正常的查找路径。
• 当require内容不加./或者../查找的js文件时，先从本地目录下寻找，不存在就依次向上级目录中查询，直到系统根目录。node全局安装在系统根目录下，所以全局安装后可在所有目录下使用。

5. npm3与 npm2相比有什么改进？yarn和 npm 相比有什么优势? (选做题目)

• npm3与 npm2
  参考文章
  npm3虽然慢，但解决了windows上npm包目录太深的问题，npm3将依赖模块扁平化存放了，node_modules文件夹里面子文件夹增多了，出现了很多没有通过npm install安装过的模块。npm3在安装包的时候，由于每个包和包的依赖都会去计算是否需要再安装，搜索起来确实变慢了，好在至少现在的npm3速度还是可以接受的。
  示例：
  假如我们写了个模块App，需要安装两个包A@1和C@1，其中A@1依赖另一个包B@1，C@1依赖B@2，用npm2和npm3安装之后的依赖图分别是这样的
  
  npm3按照安装顺序存放依赖模块，先安装A@1，发现依赖模块B@1没有安装过也没有其他版本的B模块冲突，所以B@1存放在第一级目录，B@2为了避免和B@1的冲突，还是继续放在C@1之下。
  npm2没什么好说的，来什么安装什么，根本不用理会公共依赖关系，依赖模块一层一层往下存放就是了，下面重点讲解npm3在这方面的改进。
  现在App又需要安装一个包D@1，D@1依赖B@2，使用npm3安装之后，包结构将变成下面这样
  
  虽然C@1和D@1都依赖B@2，但是由于A@1先安装，A@1依赖的B@1已经安装到第一级目录了，后续需要安装的所有包B，只要版本不是1，都需要避免和B@1的冲突，所以只能像npm2一样，安装在相应包下面。
  接着又安装了一个E@1，依赖B@1，因为B@1已经安装过，且不会有版本冲突，这时候就不用重复安装B@1了，包结构会变成这样
  
  随着App升级了，需要把A@1升级到A@2，而A@2依赖B@2，把E@1升级到E@2，E@2也依赖B@2，那么B@1将不会再被谁依赖，npm将卸载B@1，新的包结构将变成这样
  
  可以看到出现了冗余，结果跟预期的不一样，既然所有对B的依赖都是B@2，那么只安装一次就够了。
  npm dedupe
  npm在安装包的时候没有这么“智能”，不过npm dedupe命令做的事就是重新计算依赖关系，然后将包结构整理得更合理。
  执行一遍npm dedupe将得到
  
  这才是最优且符合预期的结构，看来在每次安装/卸载了包之后最好重新执行npm dedupe，以保证包结构是最优的。
  npm3通过将依赖模块扁平化安装，避免了冗余又解决了windows上一大头疼问题。
• yarn和npm
  目前看来 Yarn 要比 npm 更好用：默认就有锁定文件、更快速地安装依赖以及依赖的更新会自动同步到 package.json 文件中。从 npm 迁移到 Yarn 成本几乎为零，你大可以在一个项目里用用看，感受下它是否适合你。以上优点都让 Yarn 成为了目前 npm 最好的替代品。
  我非常鼓励大家尽快在项目中用起 Yarn。不过如果你是一个对新工具相当谨慎的人，也可以等多两三个月再去尝试。毕竟 npm 才是久经沙场的老将。
  参考文章

6. webpack是什么？和其他同类型工具比有什么优势？

• Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
• webpack已经是大部分前端项目打包工具的首选，grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。在grunt、glup、browserify等已经相当火了之后，webpack长江后浪推前浪，把前辈们拍死在沙滩上，实力惊人。

7. npm script是什么？如何使用？

npm允许在package.json文件里面，使用scripts字段定义命令。

"scripts": {
  "build": "node build.js",
  "test": "cd desktop"
}

scripts字段是一个对象。它的每一个属性，对应一段命令。build命令对应的脚本是node build.js。命令行下使用npm run命令，就可以执行这段命令。另外，执行test等node定义过的名字时，只需输入npm test即可执行。

$ npm run build
等同于执行
$ node build.js

$ npm test
等同于执行
$ cd desktop

优点：

1. 项目的相关脚本，可以集中在一个地方。
2. 不同项目的脚本命令，只要功能相同，就可以有同样的对外接口。用户不需要知道怎么测试你的项目，只要运行npm run test即可。
3. 可以利用 npm 提供的很多辅助功能。

8. 使用 webpack 替换 入门-任务15中模块化使用的 requriejs

效果预览
代码地址

9. gulp是什么？使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并

gulp是一款nodejs应用，它具有以下优点：
1. 易于使用
通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
2. 构建快速
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
3. 高质量的插件
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
4. 易于学习
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握，如同一系列流管道。

示例：

//下载npm包
npm install --save gulp            //本地使用gulp
npm install --save gulp-imagemin   //压缩图片
npm install --save gulp-minify-css //压缩css
npm install --save gulp-uglify     //压缩js
npm install --save gulp-concat     //文件合并

var gulp = require('gulp');
// 引入组件
var minifycss = require('gulp-minify-css'), // CSS压缩
    uglify = require('gulp-uglify'), // js压缩
    imagemin = require('gulp-imagemin'); //图片压缩
    concat = require('gulp-concat'), // 合并文件
    //rename = require('gulp-rename'), // 重命名
    //jshint = require('gulp-jshint'), //js代码规范性检查
    
gulp.task('css', function(argument) {
    gulp.src('src/css/*.css') //src/css路径下的所有css文件
        .pipe(concat('merge.css')) //合并所有css文件，新文件名为merge.css
        // .pipe(rename({
        //     suffix: '.min'
        // }))
        .pipe(minifycss()) //压缩merge.css
        .pipe(gulp.dest('dist/css/')); //输出至该目录
});

gulp.task('js', function(argument) {
    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.task('img', function(argument){
    gulp.src('src/imgs/*') //选择
        .pipe(imagemin()) //压缩
        .pipe(gulp.dest('dist/imgs')); //输出
});