npm&npmscript&gulp&webpack

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

npm install -g nodename 或 npm install -global nodename

2. package.json 有什么作用？

{
  "name": "test",  //这个模块的名字
  "version": "1.0.0",  //向npm发布时，该模块的版本号，每次修改必须升级版本号
  "description": "测试",  //这个模块功能的描述
  "main": "index.js",  //// require该模块时，该模块从此文件开始执行，也就是程序的入口文件
  "bin": {  // /usr/local/bin 目录下有一个test的文件，它的内容是在/usr/local/lib/node_modules中对应的模块中的index.js。此模块能在全局环境下运行，只要命令行工具内输入test就能执行相应的index.js的内容
    "test": "./index.js" //
  },
  "scripts": {  //这是一个对象，对象的键表示指令，值表示要在命令行中执行的代码,当指令为test和start时，可直接用npm test执行，当指令为其他的非系统预设值时，必须要用npm run command_name才可以执行。
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [  //在npm网站搜索时，通过搜索该关键字，可以找到该模块
    "test"
  ],
  "author": "zhou",  //这个模块的作者
  "license": "ISC",  //这个模块的许可证类型
  "dependencies": {
    "axios": "^0.16.1"  //该模块运行时需要依赖的其他模块，当其他人npm install该模块时，也会把该模块的依赖模块一并安装
  },
  "devDependencies": {  ////该模块的开发调试时使用的依赖，当其他人npm install该模块时，不会下载这些依赖
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2"
  }
}

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

• npm install --save app 会在 package.json文件中的 dependencies 中，记录此依赖模块的名字及其版本号，当别人安装我开发的模块时，也会一并把我开发时所依赖的模块进行下载和安装.
• npm install --save-dev app 会在 package.json 文件中的devDependencies 中，记录此开发依赖工具，及其版本号，当别人安装我开发的模块时，并不会下载安装此开发依赖工具。

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

先从当前路径找，如果找到了 node_modules，就读取 package.json 里
main 指向的入口文件，并加载这个文件。如果在当前目录下没找到
node_modules，就一直往上找，到家目录，再到根目录，还找不到就报错。

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

• npm3 在安装模块时就按字母序安装在 node_modules 的第一级目录，当后续包有重复依赖时就不需要重新安装
• yarn 是优化了的 npm，速度更快

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

• WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。主要包含四个核心概念：入口(entry)、输出(output)、loader、插件(plugins)。
• 优势
  • 在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
  • Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
  • 丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
  • 和 requirejs 相比，require.js的所有功能它都有，但编绎过程更快，因为 require.js 会去处理不需要的文件，还有一个额外的好处就是你不需要再做一个封装的函数，不需要写 define，自己用 exports 后，require 就好。

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

• npm script 允许在 package.json 中使用 scripts 字段定义脚本命令。通过设置 npm script 可以方便实现前端工作流。如此例，在命令行输入 npm run webpack，就可以在命令行中执行 webpack app.js ./bin/app.merge.js 命令。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"，
    "webpack": "webpack app.js ./bin/app.merge.js"
}

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

• 代码地址
• 预览地址

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

• gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务如使用 gulp 实现图片压缩、CSS 压缩合并、JS 压缩合并等。

1. 安装项目的开发依赖（devDependencies）安装
$ npm install --save-dev gulp
2.  在项目根目录下创建一个名为 gulpfile.js 的文件
3. 安装需要使用的插件
npm install gulp-imagemin --save-dev
npm install gulp-cssnano --save-dev
npm install --save-dev gulp-uglify
npm install gulp-concat --save-dev
4. 载入插件
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const cssnano = require('gulp-cssnano');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
5. 定义任务
//合并压缩css
gulp.task('build:css', function () {
    gulp.src('src/css/*.css')
        .pipe(concat('merge.min.css'))
        .pipe(cssnano())
        .pipe(gulp.dest('./css/'));
});

//合并压缩js
gulp.task('build:js', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('merge.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./js/'));
});

//压缩img
gulp.task('build:img', function () {
    gulp.src('src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('./img/'))
});

//合并任务
gulp.task('build', ['build:css', 'build:js', 'build:img']);
6. 运行 gulp build