gulp和webpack对比

[huangchucai]

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

npm install -g XXX
// 模块全局安装，可以直接全局使用，如果是windows下，npm会安装在c盘的根目录下面

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

1. 项目的基本说明，作者，名字，版本，描述等基本信息
2. 可以让别人看到你项目依赖的node安装包，方便别人使用
3. 可以利用package.json实现npm srript脚本流编译

npm init 可以生成一个package.json

npm install -y可以快速生成一个package.json

{
  "name": "hcctest",  //你的模块名称，必须小写，不能一'_'或'.'开头
  "version": "1.0.0",  //你的模块版本，和name一起形成了一个npm模块的唯一标识符,模块中内容变更的同时，模块版本也应该一起变化。
  "description": "pageage.json说明", // 你的模块的描述，方便别人了解你的模块作用，搜索的时候也会有用。
  "main": "index.js",  //模块的主入口文件，一般是index.js 
  "scripts": {//一个对象，指定了项目生命周期所使用的命令行。key是生命周期中的事件，value是要执行的命令。
    "test": "echo \"Error: no test specified\" && exit 1"
  },  
  "keywords": [],  //项目的关键词。 一般用不到，发布npm才用得到。      
  "repository": { //指定一个代码存放地址，对想要为你的项目贡献代码的人有帮助。
    "type": "git",
    "url": "git@192.168.36.42:web/xxxx.git"
  }, 
  "author": "hcc", //项目作者
  "license": "ISC", //模块的协议
  "dependencies": { //模块的依赖包
    "font-awesome-stylus": "^4.7.0",
    "nzh": "^1.0.0",
    "route-coc": "^1.2.3",
    "vue": "^2.2.6"
  },  
  "devDependencies" : { //开发或者测试时，依赖的包。
    "my_test_framework": "^3.1.0"
  }
}

**说明：**一般对于通过打包后的项目上传到网上时，都不会上传node_modules文件夹，通过package.json，可以让其他使用者轻松的通过npm install安装项目的依赖。

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

 npm install --save app 会说明到dependencies下，作为项目的依赖包，项目使用的时候需要安装的包。通过运行npm install命令时，会自动安装项目到node_modules目录中

npm install --save-dev app 会说明到devDependencies下，作为项目的开发依赖，之后运行npm install命令时，不会自动安装

--save 安装包信息将加入到dependencies（生产阶段的依赖）

--save-dev 安装包信息将加入到devDependencies（开发阶段的依赖）所以开发阶段一般使用它

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

首先在当前目录下查找模块，如果没有找到对应的模块，就去上一级目录寻找，直到系统的根目录，如果是node全局安装模块的话，在所有目录都是可以使用的。对应模块的引用require则不同，requir只能引用到文件的根目录，无法引用全局安装的系统根目录。

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

**webpack：**是一个可以让我们项目中的文件模块化的一个工具，它会根据模块之间的相互依赖关系，然后通过制定的规则然后生成对应的静态资源。通过entry，output，loader，plugins四大快，对内容进行解析和串联，从而生成浏览器可以识别的文件。

1. 打包工具
2. 模块化识别
3. 编译模块化代码

webpack的优势：

• 支持commejs规范和amd规范
• 代码的拆分。webpack把可以将应用代码拆分为多个块（chunk），每个块包含一个或多个模块，块可以按需被异步加载。
• 可以通过loader智能的加载不同的静态资源
• 可以结合node动态的监听资源的变化，实施的刷新编译

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

npm script: 通过脚本流实现工程化，方便快捷。

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

gulp是一个自动化的构建工具，我们可以用gulp对网站资源的优化。

1. 构建工具
2. 自动化
3. 提高效率用

// 安装依赖和插件
npm install --save gulp
npm install --save-dev gulp-imagemin  //图片压缩
npm install --save-dev gulp-cssnano  // css压缩
npm install --save-dev gulp-uglify  //js压缩
npm install --save-dev gulp-jshint  //js代码检查规范
npm install --save-dev gulp-concat  //文件合并
npm install --save-dev gulp-rename //重命名
npm install --save-dev gulp-autoprefixer //自动后编译
npm install --save-dev gulp-rev  //添加版本号

//引用的相应的模块
const gulp = require('gulp')
const rev = require('gulp-dev')
const imagemin = require('gulp-imagemin')
const cssnano = require('gulp-cssnano')
const concat = require('gulp-concat')
const jshint = require('gulp-jshint')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const autoprefixer = require('gulp-autoprefixer')

// 图片压缩
gulp.task('dist:img',()=>{
  gulp.src('src/imgs/*')
  .pipe(imagemin())
  .pipe(gulp.dest('dist/imgs'))
})
// css压缩
gulp.task('dist:css',()=>{
  gulp.src('src/css/*')
  .pipe(concat('merge.css'))
  .pipe(rename({
     suffix: '.min'
  }))
  .pipe(cssnano())
  .pipe(autoprefixer({
    browsers: ['last 3 versions'],
    cascade:false
  }))
  .pipe(gulp.dest('dist/css'))	   
})
// js压缩
gulp.task('dist:js',()=>{
  gulp.src('src/js/*')
  .pipe(concat('merge.js'))
  .pipe(uglify())
  .pipe(gulp.dest('dist/js'))
})

//生成版本号
gulp.task('revision',['dist:css','dist:js'], ()=>{
  return gulp.src(['dist/**/*.css','dist/**/*.js'])
  		.pipe(rev())
  		.pipe(gulp.dest('dist'))
  		.pipe(rev.mainfest())
  		.pipe(gulp.dest('dist'))
})
//首页绑定版本号
gulp.tast('index',['revision'],()=>{
  let mainfest = gulp.src('./dist/rev-mainfest.json');
  return gulp.src("src/index.html")
  		.pipe(revReplace({
          mainfest:mainfest
  		}))
  		.pipe(useref())
  		.pipe(gulp.dest('dist'))
})
// 全部执行
gulp.task('default',['dist:css','dist:img','dist:js'])