npm-npmscript-gulp-webpack

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

npm install -g package_name
or
npm install package_name -g

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

//package.json

{
  "name": "plearner-demo0",
  "version": "1.0.0",
  "description": "this is a desrtiption of my test",
  "main": "text.js",
  "scripts": {
    "test": "echo peng"
  },
  "keywords": [
    "test"
  ],
  "author": "plearner",
  "license": "ISC",
  "dependencies": {
    "marked": "^0.3.6"
  },
  "devDependencies": {
    "easytpl": "^1.0.4"
  }
}
上述代码就是package.json的一个简易文件
name: 该node_module的名字
version: 向npm发布时，该node_module的版本号
descriptiion: 对该模块的描述
main: require该模块时，该模块从此文件开始执行，也就是程序的入口文件
scripts: 这是一个对象，对象的键表示指令，值表示要执行的代码，当指令
为test何start时，可直接用npm test或npm test执行，当指令为其他的非系
统预设值时，必须要用npm run command_name才可以执行。
keywords: 在npm网站搜索时，通过搜索该关键字，可以找到该模块
author: 该模块的作者
dependencies : 该模块运行时需要依赖的其他模块，当其他人npm install该模块时，也会把该模块的依赖模块一并安装
devDependencies: 编写该模块时，采用的开发工具，非必须，当其他人npm install该模块时，不会安装此开发依赖工具

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

npm install --save app会在package.json文件中的dependencies中，记录此依赖模块的名字及其版本号，当别人安装我开发的模块时，也会一并把我开发时所依赖的模块进行下载和安装.
npm install --save-dev app会在package.json文件中的devDependencies中，记录此开发依赖工具，及其版本号，当别人安装我开发的模块时，并不会下载安装此开发依赖工具。

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

1. 当require('模块id')不是node的核心模块
   路径也不为(. , ./, ../ , /)开头
   就会递归的往上层目录中的node_modules文件夹下寻找模块
   直到查完所有module.paths数组，还找不到，就报错

2. 是核心模块，就直接找核心模块

3. 路径以(. , ./, ../ , /)开头，就按路径查找

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

npm3在安装模块时就按字母序安装在node_modules的第一级目录

当后续包有重复依赖时就不需要重新安装

yarn是优化了的npm，速度更快

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

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
优势:

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

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

npm script允许在package.json中使用scripts字段定义脚本命令。

{
  //...
  "scripts": {
       "run": "echo 11111"
  }
}

执行npm run命令就等同于执行echo 11111命令。

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

效果预览
代码预览

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

1. 安装压缩插件
安装图像压缩插件
npm install gulp-imagemin --save-dev
安装文件合并插件
npm install gulp-concat --save-dev
安装css压缩插件
npm install gulp-cssnano --save-dev
安装js规范检查插件
npm install jshint gulp-jshint --save-dev
安装js压缩插件
npm install uglify --save-dev

创建gulpfile.js文件
//gulpfile.js
2. 载入插件
var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); // js压缩
var imagemin = require('gulp-imagemin'); // image压缩
var jshint = require('gulp-jshint'); // js代码规范性检查

3. 定义任务
定义css合并压缩任务
gulp.task('build:css', function() {
    gulp.src('./src/css/*.css')
        .pipe(concat('index-merge.css'))
        .pipe(cssnano())
        .pipe(gulp.dest('dist/css/')); // 
})

定义js合并压缩任务
gulp.task('build:js', function() {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
})

定义图片压缩任务
gulp.task('build:image', function() {
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'));
})

gulp.task('build', ['build:css', 'build:js', 'build:image']);
4. 执行任务
在命令行中执行命令:
gulp build