npm-npmscript-gulp-webpack

题目1： 如何全局安装一个 node 应用?

• npm install -g xx

---

题目2： package.json 有什么作用？package.json是什么？package.json如何创建？

• package.json文件描述了一个NPM包，包括作者、简介、包的依赖、构建等所有信息。
• 通常在创建NPM包时，可以在命令行输入nmp init命令自动生成一个package.json文件，里面包含了一些常用的字段。还可以根据实际需求来自行完善或创建package.json文件。
• package.json
  文件包含的常用配置字段：
• name
  name和version是package.json中最重要的两个字段，也是发布到NPM平台上的唯一标识，如果没有正确设置这两个字段，包就不能发布和被下载。
• version
  这个字段的取值需要符合node-semver的规则，详细可以见其文档。
• description
  包的描述信息，将会在npm search的返回结果中显示，以帮助用户了解包的用途。
• author
  包的作者，可以是字符串或对象。
• files
  包所包含的所有文件，可以取值为文件夹。还可以用.npmignore来去除不想包含到包里的文件。
• main
  包的入口文件，如index.js
• repository
  包的github仓库地址。
• scripts
  通过设置这个可以使NPM调用一些命令脚本，封装一些功能。
• config
  添加一些设置，可以供scripts读取用，同时这里的值也会被添加到系统的环境变量中。
• dependencies
  指定依赖的其它包，这些依赖是指包发布后正常执行时所需要的，如果是开发中依赖的包，可以在devDependencies设置。

{
    "name": "my_package",     //项目名称
    "version": "1.0.0",  //项目版本号
    "main": "index.js", //入口文件
       // bin参数是{ 命令名：文件名 }的格式，指定了各个内部命令对应的可执行文件的位置，相当于在user.local/bin下创建一个快捷方式
      // 执行`server`,`mock`或`server-mock`命令时，将运行对应文件（./bin/server）
      // ./bin/server文件头部需添加 #!/usr/bin/env node, 表示将以node运行这个文件
    "bin":{    
        "server":"./bin/server",
        "mock":"./bin/mock",
        "server-mock":"./bin/server-mock"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"，    //一般默认一个test的空文件夹、用作写测试代码，`npm test`即可运行。
        "make":"echo 'hello world!' "  //自定义的命令名需加run才能与运行，`npm run make`
    },
    "keywords": [],  //项目的关键词。 一般用不到，发布npm才用得到。
    "author": "candy", //作者名称
    "license": "ISC", //协议 
    "repository": {  // 用来存放到 版本管理远程服务。 发布npm才有用
        "type": "git",
        "url": "https://github.com/ashleygwilliams/my_package.git"
    },
    "dependencies": {   // 正式使用时依赖的包, npm install --save xxx 生成
        "my_dep": "^1.0.0"
    },
    "devDependencies" : {//开发或者测试时，依赖的包。npm install --save-dev xxx生成
        "my_test_framework": "^3.1.0"
    }
    "bugs": {  //同repository
        "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 install --save-dev app
  指项目开发测试过程中所用的工具。

---

题目4： nodule_modules的查找路径是怎样的?

比如需要查找的依赖包叫“easytpl”,它会先在当前目录下查找node_module, 看有没有easytpl文件夹（即easytpl包），如果有的话，会读取easytpl文件夹下的package.json,找到里面的main参数,加载main里对应的路径的文件。如果当前目录下没有node_module，或当前目录下的node_module没找到easytpl，便向上级目录中查询，直到系统根目录。

---

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

npm3相比npm2主要改进了依赖管理方案
npm2安装依赖的时候比较简单直接，直接按照包的依赖的树形结构下载填充至本地目录，缺陷在于太深的目录树结构会严重影响效率，甚至在window下可能会超出系统路径限制的长度，另外有删node_modules目录经历的可能都漫长的等待。
针对 npm2 的问题，npm3 加了点算法，直白的解释就是：npm install 时会按照 package.json 里依赖的顺序依次解析，遇到新的包就把它放在第一级目录，后面如果遇到一级目录已经存在的包，会先判断版本，如果版本一样则忽略，否则会按照 npm2 的方式依次挂在依赖包目录下

在包版本差异化不太严重的情况下，这种构建方式会几乎把所有包放在一级目录下，很大程度下提升了效率以及节省了部分磁盘空间。但是npm3又遇到了新问题，有可能开发环境和测试环境的node_modules的目录结构不一样，以及其他因素，faceboook开发了yarn来替代npm。
yarn优点在于只要通过Yarn安装过的套件都会在本地目录产生Cache，也就是说只要安装过依次，下次重新安装都会从Cache重新读取， 安装速度会提升很多。

---

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

• webpack是一个module bundler（模块打包工具），所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的以来关系，所以具有更强大的JS模块化的功能， 它能对静态资源进行统一的管理以及打包发布 。

• 优势：

1. 对 CommonJS 、AMD 、ES6的语法做了兼容；
2. 对js、css、图片等资源文件都支持打包；
3. 串联式 模块加载器 以及 插件机制 ，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
4. 有独立的配置文件webpack.config.js；
5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间；
6. 支持 SourceUrls 和 SourceMaps，易于调试；
7. 具有强大的Plugin接口，大多是内部插件，使用起来比较灵活；
8. webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快；

---

题目7：npm script是什么？如何使用？

scripts属性是一个对象，里边指定了项目的生命周期个各个环节需要执行的命令。key是生命周期中的事件，value是要执行的命令。

{ // ... "scripts": { "build": "node build.js" }}

上述代码是package.json
文件的一个小片段，里面的script
字段是一个对象。每个属性对应一段脚本，比如，build
命令对应的脚本是node build.js。在命令行里

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

---

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

代码

---

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

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它不仅可以很愉快的编写代码，而且大大提高工作效率。

var gulp = require('gulp')
//js压缩插件
var jsmin = require('gulp-uglify')
//css压缩插件 
var cssnano = require('gulp-cssnano') 
//img压缩插件 
var imgmin = require('gulp-imagemin')
//文件合并插件
var concat = require('gulp-concat')
//html 压缩插件
var minhtml = require('gulp-htmlmin')

gulp.task('cssmin',function(){
 gulp.src('src/css/*.css')
     .pipe(concat(min.css))
     .pipe(cssnano())
     .pipe(gulp.dest(dist/css));
}); 

gulp.tast('jsmin',function(){ 
 gulp.src('src/js/*.js')
     .pipe(jsmin())
     .pipe(concat('all.js'))
     .pipe(gulp.dest('dist/js'));
}); 

gulp.task('imgmin', function(){ 
 gulp.src('src/img/*')
    .pipe(imgmin())
    .pipe(gulp.dest('dist/img'));
});


 gulp.task('default', ['cssmin','jsmin','imgmin']);