node的常用第三方模块和gulp模块的使用

node

nodemon第三方模块的使用：

• nodemon是一个能监听到文件保存操作后自动重新执行命令的第三方命令行形式的模块
• 全局安装：npm i -g nodemon（全局安装的模块所有项目都能用，本地安装的只有当前项目才能用）
• 在执行js文件的时候，就可以用nodemon命令代替之前的node命令，如：nodemon index.js，这个命令会让命令行挂起，想要退出挂起，可以按ctrl + c（如果有退出确认提示，输入一个y再回车）即可

gulp：

• gulp是一个基于node开发的前端构建工具，短小精悍，适合中小型项目辅助，它可以将一系列机械化操作编写成任务，然后在命令行执行这个任务就可以了

• 一般用来做什么：

  • 项目上线，html、css、js文件压缩合并
  • 语法转换：es6、less
  • 公共文件抽离
  • 修改文件后自动刷新浏览器
  • 等等…

• 使用：

  • 安装：npm i gulp，库形式的模块，提供API

    • gulp.src：获取要处理的文件

    • gulp.dest：输出文件，会自动生成目录结构（没有通配符的不会）

    • gulp.task：定义任务（已过时，目前最新版本直接通过函数定义，用module.exports对象导出即可，导出的名字就是任务名，已导出的叫公开任务，可以直接在命令行中被gulp命令调用，没有导出的叫私有任务，不能直接在命令行中被gulp命令调用）如下范例：

      gulp.task('taskName', () => {}) // 旧版本
      
      // 新版本
      function taskName (done) {
        // your code...
        done() // 这个done方法是一个回调函数，用来通知gulp该任务已经完成了，因为有可能存在异步操作
        // done(new Error('错误消息')) // 可以通过这种方式提示错误
      }
      module.exports = { taskName }
      

    • gulp.watch：监听文件变化

    • pipe方法：管道方法，用来将上一个方法的处理结果传递给下一个方法进行处理

  • 在项目根目录下创建gulpfile.js文件，注意：路径和文件名不要改

  • 重构项目目录结构，将源代码放到src文件夹中，创建一个dist（这个名字是业内约定俗成）目录，用于存放构建后的代码

  • 在gulpfile.js文件中编写你的gulp任务

  • 在命令行中通过gulp 任务名，执行gulp任务（需要借助gulp的命令行形式的模块gulp-cli）

    • 安装：npm i -g gulp-cli

    • 执行任务：打开命令行，进入到项目根目录后，执行gulp 任务名即可

    • 补充说明，在最新的gulp版本中，需要在任务回调函数上接收一个done形参，执行这个done标记任务已完成（因为可能存在异步操作）

    • 范例，在三秒钟后，复制src/css/index.css文件：

      const gulp = require('gulp')
      
      function first (done) {
        setTimeout(() => {
          gulp.src('./src/css/index.css').pipe(gulp.dest('./dist/css'))
          done()
        }, 3000)
      }
      
      module.exports = { first }
      

gulp插件的使用：

• gulp本身是一个短小精悍，轻量级的构建工具，只提供了一些基本的操作方法，其他强大的功能都是通过插件的形式实现的

• 常用插件（每个插件都是一个第三方包）：

  • html压缩：gulp-htmlmin
  • 文件包含（公共代码抽离）：gulp-file-include
  • css压缩：gulp-csso
  • js压缩：gulp-uglify
  • js语法转换：gulp-babel
  • less语法转换：gulp-less
  • 浏览器同步：brwosersync
  • 等等…

• 范例，HTML任务：

  const gulp = require('gulp')
  const htmlmin = require('gulp-htmlmin')
  const fileinclude = require('gulp-file-include')
  
  function first(done) {
    setTimeout(() => {
      gulp.src('./src/css/index.css').pipe(gulp.dest('./dist/css'))
      done()
    }, 3000)
  })
  
  function htmlmin(done) {
    gulp
      .src('./src/**/*.html')
      .pipe(fileinclude()) // 抽取html中的公共代码
      .pipe(htmlmin({ collapseWhitespace: true })) // collapseWhitespace 是否压缩空格
      .pipe(gulp.dest('./dist'))
  
    done()
  })
  
  module.exports = { first, htmlmin }
  

  补充说明：

  • *表示通配符，能匹配0个或多个任意字符
  • **也是通配符，能匹配任意级子文件夹
  • 可以一次性装多个第三方包，用空格隔开即可

• 范例，转换less以及压缩css：

  
  function cssmin(done) {
    // gulp
    //   .src(['./src/css/*.css', './src/css/*.less'])
    //   .pipe(less()) // 将less语法转换成css语法
    //   .pipe(csso()) // 压缩
    //   .pipe(gulp.dest('./dist/css'))
  
    gulp
      .src('./src/css/*.less')
      .pipe(less())
      .pipe(gulp.src('./src/css/*.css'))
      .pipe(csso())
      .pipe(gulp.dest('./dist/css'))
  
    done()
  })
  
  module.exports = { cssmin }
  

  补充说明：gulp.src的参数可以写数组，用来获取多个文件地址

• 范例，转换es6语法以及压缩js：

  function jsmin(done) {
    gulp
      .src('./src/js/*.js')
      .pipe(
        babel({
          presets: ['@babel/env'] // 自动识别当前代码运行环境
        })
      )
      .pipe(
        uglify({
          mangle: { toplevel: true } // 对变量名进行混淆，压缩后的代码可读性极差，可以别人抄袭你的代码
        })
      ) // 压缩js代码
      .pipe(gulp.dest('./dist/js'))
  
    done()
  })
  
  module.exports = { jsmin }
  

• 可以一次性执行多个任务的任务，称为组合任务（通过 gulp.parallel(taskName1, taskName2, …) 创建）

  • series和parallel都可以用来组合任务，但是series是按时顺序执行，而parallel是平行执行的，从执行效率上来看，parallel效率要比series高，所以我们优先使用parallel组合任务

• 在命令行执行gulp命令的时候，如果没有指定任务名，就会去执行名字叫default的任务

• 默认任务范例：

  module.exports = { default: gulp.series(htmlTask, cssTask, jsTask, copyTask) }
  // 组合任务需要直接导出
  

package.json文件的作用：

• 通过观察，我们发现存放第三方包的文件夹node_modules里面有非常多的琐碎目录和文件（随着项目业务越来越复杂，里面的文件结构越多），我们在把项目发送给别人时，难道把这些文件都打包一起发送吗？答案是不行的，我可以借助package.json文件来帮我们记录项目依赖的第三方包，别人可以用npm i命令来一次性下载所有的依赖，这个命令会根据package.json文件自动获取依赖的第三方包
• package.json文件就是项目的描述文件，记录了项目的基本信息和所依赖的第三方包
• 可以通过npm init -y 来生成默认的package.json文件
• 有了package.json文件后（注意：在此之前安装的第三方包会被漏掉，所以我们在项目开始之前，一定要先初始化package.json文件，再来装第三方包），当我们再来安装第三方包时，就会被自动记录到package.json文件中
  • dependencies：记录的是生产依赖
  • devDependencies：记录的是开发依赖
• 项目依赖分为两类：
  • 生产依赖：开发和生产环境都需要，被记录在pacakge.json文件的dependencies字段中，别人拿到我们项目代码时，如果只需要生产依赖，可以通过npm i --production来安装
  • 开发依赖（包括生产依赖）：仅开发环境需要，被记录在pacakge.json文件的devDependencies字段中，用npm i一次性安装所有依赖
• package-lock.json文件的作用：
  • 锁定依赖包的版本，防止再次安装时版本与当时开发时不一致
  • 加快下载速度，记录了依赖包的基本信息，如依赖关系、下载地址、版本信息等等，再次安装时省去了很多额外的加载操作
• package.json中scripts字段用来配置命令的别名，可以使用npm run 命令别名来执行，当我们的命令过长时，这个配置别名很有用

模块查找规则：

• 完整路径，如：require('./find.js')
  • 直接根据路径去查找
• 有路径，没后缀，如：require('./find')
  • ./find.js --> ./find/package.json中的main指定的入口文件 --> ./find/index.js --> 报错
• 没路径，没后缀，如：require('xxx')
  • 系统模块xxx --> node_modules/xxx.js --> node_modules/xxx/package.json文件中指定的入口文件 --> node_modules/xxx/index.js --> 报错
• 补充说明：require会执行文件中的代码，但是有缓存，多次require，只会执行一次