That's Cool

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

npm install -g <package>

---

package.json 有什么作用？

1. 可以理解为是文件种子
2. 记录着一个应用包的：名 / 版本 / 描述 / 入口文件（他人引用的入口） / 测试命令行 / git地址 / 关键字 / 作者 / 确定
3. 如果要发布一包，就必须创建一个 package.json 文件
   <pre>{ "name": "应用名称", "version": "版本号", "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" //项目主页、 发布才有用 }</pre>

---

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

npm install --save xxx

-1.可在当前目录下生成一个node_module包（文件夹）
-2.在package.json 下的 dependencies 生成该应用包的信息（用于依赖）

npm install --save-dev xxx

-1.供于自己测试用的
-2.他人不会下载到该部分的（运行npm install不会自动下载，需要手动下载。）
-3安装的是开发或者测试时依赖的包
-4在package.json的devDependencies参数里可以找到，

---

node_modules的查找路径是怎样的?

1.如果入口文件（main:index.js），需要用到依赖的应用包，会再当前目录下查找 node_module，看看是否有对应该包的这个文件夹，如有，即读取这个文件夹里面的 package.json 文件，搵到里面的main参数，加载对应的路径（文件入口）。
2.如果当前路径没有 node_module （或者不属于它的node_module） ，那么往父级目录继续找..找不到就一直找到根目录..

---

npm3与 npm2相比有什么改进？

npm3解析依赖关系不同于npm2。
npm2以嵌套的方式安装所有依赖关系，npm3会尝试减轻这种嵌套原因造成的深层树和冗余。npm3尝试通过在与要求它的主要依赖关系相同的目录中以平面方式安装一些辅助依赖关系（依赖关系的依赖关系）。

主要的主要区别是：
目录结构中的位置不再预测依赖关系的类型（主，辅助等）
依赖关系取决于安装顺序，或者安装事情的顺序将改变node_modules 目录树结构

---

yarn和 npm 相比有什么优势? (Yarn的优势)

1.并行安装
2.更简洁的输出
Yarn vs npm：你需要知道的一切
Yarn
Npm

---

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

webpack 是一款模块加载器兼打包工具，它能把各种资源 JS、CSS、图片等都作为模块来使用和处理。
优势：

用 commonJS 来书写，对 AMD/CMD 支持也很全面，
方便其他模块也兼容使用，扩展性强，插件机制完善，能被模块化处理的资源多
开发便捷，能替代部分 grunt/gulp 的工作，比如打包，压缩。

---

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

webpack是一款模块加载器兼打包工具，它能把各种资源JS/CSS/图片等都作为模块来使用和处理。优势如下：

webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
webpack可以将代码拆分成多个区块，每个区块包含一个或多个模块，它们可以按需异步加载，极大地减少了页面初次加载时间。
webpack 本身只能处理原生的 JS 模块，但是 loader 转换器可以将各种类型的资源转换成 JS 模块。这样，任何资源都可以成为 webpack 可以处理的模块。
webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。
webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 webpack 插件，来满足各式各样的需求。
webpack使用异步 I/O 和多级缓存提高运行效率，使得它能够快速增量编译。

---

npm script是什么？如何使用？

npm script 是package.json文件里面一个属性，使用该属性自定义脚本命令。
【执行命令】 ： npm run xXx ——如果xXx是test或start，则无需加 run ，因为是 npm 内置的命令

<pre>// package.json { // ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "upload": "git add .; git commit -m \"modify\"; git push" } } // commond window npm run upload</pre>

---

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

PS： 使用sass / less 时切记切记要安装全局...否则报错无法找出问题-0.-【后续才发现并补充0.-】

Code
效果展示～-。-

---

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

1.属于一种Node 应用。
2.前端工作流利器。
3.作用：打包/压缩/合并/git/远程操作。
4.特点：简单易用 / 速度快 / 高质量插件
5.数据流传递方式
En文档
中文文档

<pre>var gulp = require('gulp');

var minifycss = require('gulp-minify-css'), // CSS压缩 uglify = require('gulp-uglify'), // js压缩 imagemin = require('gulp-imagemin'); // 图片压缩 concat = require('gulp-concat'), // 合并文件 cssnano = require('gulp-cssnano');

//gulp.src | gulp.dest | gulp.task | gulp.watch

gulp.task('css', function() {
gulp.src('../../css/Apr_3.css') //要处理文件的路径 .pipe(concat('index-merge.css')) //通过pipe把数据流传递给concat进行合并为一，并取名为。 .pipe(minifycss()) //进行压缩 .pipe(gulp.dest('../../dist/css/')) //输出到这里 });
gulp.task('js', function(argument) { gulp.src('../../js/com/*.js') .pipe(concat('merge.js')) .pipe(uglify()) .pipe(gulp.dest('../../dist/js/')); });
gulp.task('img', function(argument){ gulp.src('../../img/web-phone/*') .pipe(imagemin()) .pipe(gulp.dest('../../dist/imgs/')); });
gulp.task('default',['css','js','img'])</pre>

终图

---

自制简单的NPM天气包

---

过程起伏～

如果出现此问题...
尝试运行npm link gulp在应用程序目录（以创建一个本地链接到全球安装的Gulp模块）

npm set registry=http://registry.npm.taobao.org 如果使用npm下载过程缓慢，可切换淘宝的节点下载