npm-npmscript-gulp-webpack

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

npm i xxx
一般全局安装之后，还要在本地安装一次，npm i --save-dev xxx作为项目依赖。全局安装的作用是，可以在任何目录下都使用命令行

2.package.json 有什么作用？

每个项目的根目录下面，一般都有一个package.json文件，它定义了项目所需要的模块，以及包的配置信息。npm install命令会自动下载有关这个项目的配置文件，下面是一个 package.json的示例

"name": "test project",//包名
"version": "0.0.1",//每次提交时必须改变版本号
"description": "my first test",//包描述
"main": "index.js",
 "scripts": {//当在git bash输入npm run test时，会执行这句话
    "test": "echo \"Error: no test specified\" && exit 1"
  },
"author": "swh",
"license": "ISC",
"devDependencies": {
  "webpack": "^2.6.1"
}

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

npm install --save app //这个命令会把模块写入dependencies中
npm install --save-dev app //这个命令把模块写入devDependencies

前者是生产环境中用的，后者是开发环境中用的；当这个包上传到npm后，别人下载时，会下载dependencies中的模块而不会下载devDependencies中的模块

开发环境，测试环境，生产环境的区别

• 开发环境：开发环境时程序猿们专门用于开发的服务器，配置可以比较随意，为了开发调试方便，一般打开全部错误报告和测试工具，是最基础的环境。
• 测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产服务器上，是开发环境到生产环境的过度环境。
• 生产环境： 生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志，是最重要的环境。

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

当require一个模块xxx时，会首先在当前目录下寻找node_modules下的xxx，若没有，则返回到上一级目录的node_modules下寻找xxx，最终会找到根目录下node_modules下的xxx。

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

webpack是一个模块化管理以及打包的工具，还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。如下图：

webpack常用功能

webpack的优点

1. webpack支持commonjs，amd规范，ES6等
2. 加载模块十分方便，代码简洁
3. webpack有丰富的plugins以及预编译js，css的loders
4. 可以取代gulp的压缩图片打包js等功能
5. 插件功能十分丰富

各大前端工具

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

先来看一个package.json文件

{
  "name": "bootstrap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "jquery": "^3.2.1",
    "webpack": "^2.6.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "touch index1.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

当在git bash中打入代码 npm run start时，就会在package.json文件目录下执行引号里的内容，这里对应的操作是创建了一个index1.html。当命令过多时，通过npm scripts和git bash可以减少很多工作量

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

demo

bundle.js

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

gulp是一款nodejs的插件，gulp能进行图片压缩，js打包实现前端工作流，它还含有丰富的插件，是前端工作中一款简单好用的利器。

var gulp=require('gulp');
var del=require('del');
var minify=require('gulp-minify-css');
var uglify=require('gulp-uglify');
var concat=require('gulp-concat');
var imagemin=require('gulp-imagemin');


gulp.task('css',()=>{
    gulp.src('css/*.css')
        .pipe(concat('merge.css'))
        .pipe(minify())
        .pipe(gulp.dest('dist2/css'));
})

gulp.task('js',()=>{
    gulp.src('js/**/*.js')
        .pipe(concat('merge.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist2/js'));
})

gulp.task('pic',()=>{
    gulp.src('images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist2/images'));
})

gulp.task('clean',()=>{
    del([
       'dist2'
    ])
 })

gulp.task('default',['css','js','pic'])

参考文档=> webpack2.2中文文档