前端自动化（npm、npmscript、gulp、webpack）

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

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。
  可以让js在服务端运行的工具

  npm install -g **
  

2.package.json 有什么作用？

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

• --save 将产品运行时（或生产环境）需要的依赖模块添加到 package.json 的 dependencies 中，在发布后还需要继续使用，否则就运行不了。
• --save-dev 将产品的开发环境需要的依赖模块添加到 package.json 的 evDependencies 中，只在开发时才用到，发布后用不到它。

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

• 先从当前文件夹下的node_modules查找，找不到就往上级目录持续找到根目录下的node_modules

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

• yarn和 npm 相比有什么优势：
• 离线模式
• 依赖关系确定性
• 网络性能优化
• 网络回弹
• 多注册来源
• 扁平模式

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

• webpack是一款模块加载器兼打包工具，它能把各种资源JS/CSS/图片等都作为模块来使用和处理。
• 优势：
• webpack 是以commonJS的形式来书写脚本，对 AMD/CMD 的支持也很全面，方便其它模块也兼容使用
  扩展性强，插件机制完善，能被模块化处理的资源多，例JS/CSS/IMG等
  开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。

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

通过npm init来得到package.json文件，然后里面有script，这个就是npm script

使用：

{
  "name": "clcwebpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "komo": "echo xixi"    
  },
  "author": "komolei",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^2.5.1"
  }
}

先在package.json文件中配置script，然后输入命令行npm test（其有一些关键字，可以就直接这样启动命令），但是对于komo而言。不是关键字，所以要通过npm run komo来启动

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

源文件
效果

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

gulp是一款可以实现自动化的工具，能帮助你在开发过程中自动完成任务。

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require("gulp-concat");
var jshint = require("gulp-jshint"); //在npm中会出现问题。所以使用npm install --save-dev jshint gulp-jshint这个命令行
var clean = require('gulp-clean');
var imagemin = require("gulp-imagemin");
var uglify = require("gulp-uglify");
var htmlmin = require("gulp-htmlmin");
// var browse = require("browser-sync");
// var sequence = require("run-sequence");

gulp.task("css", function () {
  return gulp.src("./src/image/*.css")
      .pipe(concat("index1.css"))
      .pipe(cssnano())
      .pipe(gulp.dest("./src/dest"))
})
gulp.task("js", function () {
 gulp.src("./src/app/*.js")
      .pipe(jshint())
      .pipe(jshint.reporter('default'))
      .pipe(concat("index1.js"))
      .pipe(uglify())
      .pipe(gulp.dest("./src/dest/"))
})
gulp.task("html", function () {
  return gulp.src("./*.html")
      .pipe(htmlmin({
          collapseWhitespace: true
      }))
      // .pipe(htmlmin("index.html"))
      .pipe(gulp.dest("./src/dest"))
})
gulp.task("img", function() {
 return  gulp.src("./src/image/*")
      .pipe(imagemin({optimizationLevel:5}))
      // .pipe(concat())
      .pipe(gulp.dest('./src/dest/img'))
})
gulp.task("default", ["js", "css","img", "html"]);

最后通过命令行：gulp，就可以直接打包弄好了。

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

安装：

 npm install -g weather-demo

运行：

weather 城市名