npm-npmscript-gulp-webpack

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

npm install -g xxx

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

作用：相当于你本地项目的一个文档说明。

1. 允许你指定你项目中所使用的node包的版本。
2. 构建你的项目更加容易，便于给其他人共享。
3. 一个典型的package.json文件如下所示。

{
        "name": "my_package",     //你的项目名称，全部小写，不能有空格，一个单词，允许-和_. 如果是要发布自己的node插件，一般用github上面项目名称。 下次有机会说明 npm 上面的发布流程。

        "version": "1.0.0",  //你的项目版本号，最好遵守 GNU 版本号管理。 

        "main": "index.js", //目录中启动文件名称。或者称之为入口文件，一般都是 index.js

        "scripts": {

            "test": "echo \"Error: no test specified\" && exit 1"    //一般默认一个test的空文件夹、用作写测试代码。

        },

        "keywords": [],  //项目的关键词。 一般用不到，发布npm才用得到。

        "author": "ag_dubs", //作者名称

        "license": "ISC", //协议 

        "repository": {  // 用来存放到 版本管理远程服务。 发布npm才有用

            "type": "git",

            "url": "https://github.com/ashleygwilliams/my_package.git"

        },

        "dependencies": {   // 正式使用时，依赖的包

            "my_dep": "^1.0.0"

        },

        "devDependencies" : {//开发或者测试时，依赖的包。

            "my_test_framework": "^3.1.0"

        }

        "bugs": {  //同repository

            "url": "https://github.com/ashleygwilliams/my_package/issues"

        },

        "homepage": "https://github.com/ashleygwilliams/my_package"  //项目主页、 发布才有用

    }

一般情况，如果是自己的项目，特别是前端的人，会使用到gulp或者grunt来打包自己的项目，并且一般不会吧node_modules上传到git上面，所以需要package来管理自己打包所需的插件，以便于项目中其他人员共享，这个文件的好处就是一个人添加某个插件后，更改了这个文件，其他人员只需要同步此文件，然后执行npm install命令，即可安装同样的包。

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

• 他们表面上的区别是--save 会把依赖包名称添加到 package.json 文件 dependencies 键下，--save-dev 则添加到 package.json 文件 devDependencies 键下
• 它们真正的区别是，devDependencies 下列出的模块，是我们开发时用的；dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。

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

node_module查找依赖的路线是：先从本地目录下寻找，不存在就依次向上级目录中查询，直到系统根目录。node全局安装在系统根目录下，所以全局安装后可在所有目录下使用。

题目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是什么？如何使用？

scripts属性是一个对象，里边指定了项目的生命周期个各个环节需要执行的命令。key是生命周期中的事件，value是要执行的命令。相当于自定义命令

{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

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

• 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
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