高级5 npm-webpack

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

npm install -g xxx表示全局安装一个node包。

题目2： package.json 有什么作用？

package.json 是一个 json 格式的文件，用来记录当前的 npm 包的相关信息，如

{
  "name" : "underscore",//包的名字
  "version" : "1.1.6",//版本号
  "description" : "programming library.",//描述
  "homepage" : "",//主页
  "keywords" : [ "browser"],//关键词
  "author" : "Jeremy ",//作者
 "license" : 版权信息
  "dependencies" : [],//项目运行依赖，发布的时候，不需要发布依赖的包，只要发布其名字，别人下载的时候，会自动下载依赖的包。
  "devDependencies"：[],//开发依赖，只有自己本地开发时候用的依赖包，发布以后别人用不到
  "main" : "underscore.js",//包的入口文件
  "script：" {} // 运行脚本命令的npm命令行缩写  
}

题目3： npm install --save app 与 npm install --save-dev app有什么区别?

• npm install --save app
  项目运行依赖：安装名为 app 的包，并在 package.json 中添加到 dependencies 项目运行依赖中去，发布以后别人会自动下载 app 依赖
• npm install --save-dev app
  开发依赖：安装名为 app 的包，并在 package.json 中添加到 devDependencies 开发依赖中去，这个 app 包依赖只有开发者自己使用，发布后别人用不到

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

从文件所在目录下的 nodule_modules 开始，逐级向上查找，直到找到根目录，如果还找不到，就会报错。

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

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

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

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

npm script 是 package.json 里的一个属性，可以自定义命令，用 npm run xxx来执行
（如果 xxx 是 test 、start，则不用加 run，因为这是 npm 内置的命令）
例如：

 "scripts": {
    "test":"mkdir abc" 
    "start": "touch def.html",
    "delete": "rm -r def.html"
  }

终端里运行 npm test 就会创建abc文件夹
npm start 就会创建def.html文件
npm run delete 会删除def.html文件

题目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"); 
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"]);