npm-npmscript-gulp-webpack

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

npm install name -g

全局安装，应用被下载安装到全局目录中/usr/local/lib/node_modules

2.package.json有什么作用？

执行npm init生成package.json文件，该文件对项目记录了一些配置信息，主要是用来进行包管理。包括name、version、description、author、private、scripts、dependencies、decDependencies。其中scripts定义模块包的使用方式，dependencies和devDependencies是模块包的依赖管理
package.json文件说明：

• scripts指定了运行脚本的npm命令行缩写

"scripts": {
"preinstall": "echo here it comes!",
"postinstall": "echo there it goes!",
"start": "node index.js",
"test": "tap test/*.js"
}

• dependencies字段指定了项目运行所依赖的模块，devDependencies指定项目开发所需要的模块。

{
  "devDependencies": {
    "browserify": "~13.0.0",//模版名+版本 
    "karma-browserify": "~5.0.1"
  }
}

• bin项用来指定各个内部命令对应的可执行文件的位置。

"bin": {
"someTool": "./bin/someTool.js"
}

• main字段指定了加载的入口文件，require（‘moduleName’）就会加载这个文件。这个字段的默认值是模块根目录下面的index.js。
• name：项目名称
• version：版本
• description：描述说明
• keywords：关键字

3.npm install --save app与 npm install --save-dev app有什么区别?

首先要区分dependencies和devDependencies。前者是项目开发环境必需的依赖，后者是方便于项目使用开发的工具如脚手架工具、测试工具等。

相同：都会在项目下的node_modules目录下下载app

不同：在往package.json文件写依赖时
--save 会写在dependencies下
--save-dev 会写在devDependencies下

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

在node.js中，模块分为内建模块，本地模块，node_module模块
当我们require一个模块时，先查找是否为内建模块，然后是否为本地模块，最后查找是否为node_module模块
当require的模块既不是内建模块，也不是本地模块，且在当前目录中的node_module中也找不到时，就会向上查找上一级的node_module，一直到根目录
当文件标识不以'./ ../'开头，则跳过本地模块查找，直接在node_module中查找。

5.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 很快且在增量编译上更加快

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

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

"scripts" : {
      "test": "echo hello"，
      "build": “npm install -g package”
}

执行npm run build命令就等于执行npm install -g package命令。

7.使用 webpack

代码地址

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

gulp是一个以流为基础的前端自动化构建工具，可以实现css的压缩合并、js压缩合并、图片压缩等等

使用 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

【个人总结，如有错漏，欢迎指出】
：>