npm-npmscript-gulp-webpack

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

npm install -g 应用名

---

2. package.json 有什么作用？

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

{
        "name": "my_package",     //你的项目名称，全部小写，不能有空格，一个单词，允许-和_. 如果是要发布自己的node插件，一般用github上面项目名称。 下次有机会说明 npm 上面的发布流程。

        "version": "1.0.0",  //你的项目版本号，最好遵守 GNU 版本号管理。 

        "main": "index.js", //目录中启动文件名称。或者称之为入口文件，一般都是 index.js

        "scripts": {

            "test": "echo \"Error: no test specified\" && exit 1"    //一般默认一个test的空文件夹、用作写测试代码。

        },

        "keywords": [],  //项目的关键词。 一般用不到，发布npm才用得到。

        "author": "ag_dubs", //作者名称

        "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"

        }

        "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有什么区别?

-save-dev是指将包信息添加到 package.json 里的 devDependencies节点，表示开发时依赖的包。
-save 是指将包信息添加到 package.json 里的dependencies节点，表示发布时依赖的包。
如：

gulp，gulp-less 等等编译js或者css的包，运行时是不需要的，所以建议安装到 devDependencies ，
如jade，express等包，运行时会用到，所以建议安装到 dependencies

---

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

先从本地文件夹里找，找不到再一级级向上找，一直找到系统根目录为止。
如：

/home/user/node_modules/foo/bar
 /home/node_modules/foo/bar
 /node_modules/foo/bar

---

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

npm2 安装依赖的时候比较简单直接，直接按照包依赖的树形结构下载填充本地目录结构。

因为 npm 设计的初衷就是考虑到了包依赖的版本错综复杂的关系，同一个包因为被依赖的关系原因会出现多个版本，简单地填充结构保证了无论是安装还是删除都会有统一的行为和结构。

比如一个 App 里模块 A 和 C 都依赖 B，无论被依赖的 B 是否是同一个版本，都会生成对应结构：

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

可以看下 npm2 和 npm3 生成的结构对比：

在包版本差异化不太严重的情况下，这种构建方式会几乎把所有包放在一级目录下，很大程度上提升了效率以及节省了部分磁盘空间。

但npm3也存在开发环境和测试环境的 node_modules 目录结构不一样以及其他的问题，因此FaceBook搞了 yarn 用来替代 npm了。
yarn 构建步骤如下：
Resolution: 向仓库请求依赖关系
Fetching: 看看本地缓存了没有，否则把包拉到缓存里
Linking: 直接全部从缓存里构建好目录树放到 node_modules 里

---

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

webpack是一个“模块打包工具”，它可以编译各种语言成为浏览器可以执行的css，js，html；也可以模块化引入文件进行压缩合并等操作，还可以通过插件来实现一些其他的前端工作流操作例如将文件名加上hash以避免缓存等。
它具有以下优势

代码拆分
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require(“./templates/“ + name + “.jade”)。

插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

---

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

• npm script 是package.json的一个属性，可以在scripts里面定义一些脚本命令

• 除了npm可以直接执行的以外（例如：npm start，npm test），其余的都要通过npm run xxx

---

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

代码地址：https://github.com/zhanghan0529/modular-page-1
预览：https://zhanghan0529.github.io/modular-page-1/index.html

---

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

var gulp = require("gulp");
var cssnano = require("gulp-cssnano"),//css压缩
    concat = require("gulp-concat"),//合并文件
    uglify = require("gulp-uglify"),//压缩js文件    
    // rename = require("gulp-rename"),//重命名
    clean = require("gulp-clean"),//清空文件
    imagemin = require("gulp-imagemin");//压缩图片
    jshint = require("gulp-jshint");//js规范检查
    minhtml = require("gulp-minhtml");//压缩html

gulp.task("bulid:css",function(){
    gulp.src("*.css")//找到某路径下的css文件
    .pipe(concat("index-merge.css"))//合并需要合并的css文件
    .pipe(cssnano())//压缩合并后的css文件
    .pipe(gulp.dest("dist/css/"));//输出
});

gulp.task("bulid:js",function(){
    gulp.src("src/js/*.js")
    .pipe(jshint())//检查格式
    .pipe(concat("merge.js"))//合并js文件
    // .pipe(rename({
    //     suffix: '.min'
    // }))
    .pipe(uglify())//压缩
    .pipe(gulp.dest("dist/js/"));
});

gulp.task("bulid:img",function(){
    gulp.src("pic/*")
      .pipe(imagemin())
      .pipe(gulp.dest("dist/img/"));
});

// gulp.task("clear",function(){
//     gulp.src("dist/*",{read: false})
//     .pipe(clean());
// });


gulp.task("default",["bulid:css","bulid:img","bulid:js"])

10.开发一个 node 命令行天气应用用于查询用户当前所在城市的天气，发布到 npm 上去。可以通过如下方式安装使用(可使用api.jirengu.com里提供的查询天气接口) (选做题目)

包地址：https://www.npmjs.com/package/weatherdemo0529

使用