npm-npmscript-gulp-webpack

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

npm install [pkg]

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

package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称，版本等数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

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

--save 参数表示将模块写入dependencies属性，--save-dev表示将模块写入devDependencies属性。
dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

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

当js文件运行时，引入文件，会现在当前项目目录下寻找node_modules文件夹，在该文件夹中寻找引入的模块，读取该模块的package.json文件，找到入口的main字段。如果没有找到node_modules文件夹，则继续往上层目录寻找，直到找不到，报错。

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

npm2 安装依赖的时候比较简单直接，直接按照包依赖的树形结构下载填充本地目录结构。
针对 npm2 的问题，npm3 加了点算法，直白的解释就是：npm install 时会按照 package.json 里依赖的顺序依次解析，遇到新的包就把它放在第一级目录，后面如果遇到一级目录已经存在的包，会先判断版本，如果版本一样则忽略，否则会按照 npm2 的方式依次挂在依赖包目录下

yarn 革命性的更改在于其改变了构建的步骤，其它有点都是新构建方式的副产物，yarn 构建步骤如下：

• Resolution: 向仓库请求依赖关系
• Fetching: 看看本地缓存了没有，否则把包拉到缓存里
• Linking: 直接全部从缓存里构建好目录树放到 node_modules 里

为了防止拉取到不同的版本，Yarn 有一个锁定文件 (lock file) 记录了被确切安装上的模块的版本号。每次只要新增了一个模块，Yarn 就会创建（或更新）yarn.lock 这个文件。这么做就保证了，每一次拉取同一个项目依赖时，使用的都是一样的模块版本。

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

webpack是一个模块加载器兼打包工具。它的作用是把互相依赖的模块处理成静态资源。
Webpack 优势：

• 代码分割： 在Webpack的依赖树里有两种类型的依赖：同步依赖和异步依赖。异步依赖会成为一个代码分割点，并且组成一个新的代码块。在代码块组成的树被优化后，每个代码都会在一个单独的文件夹里。
• 加载器：Webpack原生是只能处理JavaScript的，而加载器的作用把其他的代码转换成Javascript代码，这样一来所有种类的代码到能组成一个模块
• 智能解析： Webpack的智能解析器能处理肌肤所有的第三方库
• 插件系统：Webpack有丰富的插件系统，大部分功能都是基于这个插件系统

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

nom scripts 指的是package.json中的scripts字段。scripts指定了运行脚本命令的npm命令行缩写。如：

"scripts": {
     "start": "node index.js",
}

运行 npm run start 便可以执行命令。

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

gulp是一个项目构建工具，核心是流式操作。

```
var gulp = require('gulp');

// 引入组件
var minifycss = require('gulp-minify-css'), // CSS压缩
    uglify = require('gulp-uglify'), // js压缩
    concat = require('gulp-concat'), // 合并文件
    rename = require('gulp-rename'), // 重命名
    clean = require('gulp-clean'), //清空文件夹
    minhtml = require('gulp-htmlmin'), //html压缩
    jshint = require('gulp-jshint'), //js代码规范性检查
    imagemin = require('gulp-imagemin'); //图片压缩


gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(minhtml({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});

gulp.task('css', function(argument) {
    gulp.src('src/css/*.css')
        .pipe(concat('merge.css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css/'));
});
gulp.task('js', function(argument) {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
});

gulp.task('img', function(argument){
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'));
});

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

gulp.task('build', ['html', 'css', 'js', 'img']);
```