Grunt && Gulp前端自动化构建工具

一、自动化构建的认识

1. 概念相关

学自动化构建的目的？
比如说在一个项目中我们想使用 ecmascript 的最新特性，以及想使用 sass来编写css，但这些内容都不是浏览器所能够识别的，此时我们就需要借助一些工具如 如可以借助 sass 编译工具将sass语法编译为css语法使浏览器识别。

自动话构建的概念感觉不好定义
个人理解
从源码到生产代码中间通过编译转换的步骤就是构建步骤，在利用一些工具将构建的过程不需要人为的进行构建，通过监听源代码的变化之后会自动构建编译，这应该就是自动化构建

2. 自动化初体验

需求： 在项目中使用sass来编写样式。

1. 构建环节

借助 sass 官方提供的工具来将 scss文件转换为 css文件.

yarn add sass

在package.json中配置 npm scripts 执行脚本

ps：scripts 中的脚本可以省略 ./node_modules/.bin/， 当借助 yarn 或是 npm run 脚本命令的时候，他会自动的去 ./node_modules/.bin/ 找我们配置的命令。

yarn build 得到了构建之后的代码

2. 借助 broswer-sync 启动一个服务器运行我们的项目

yarn add browser-sync -D

在 scripts 中配置命令

运行 yarn serve 启动服务

如果此时我们更改了style.scss 中的文件，就需要重新构建css之后再启动服务，这样我们需要输入两遍命令，此时我们可以借助 npm scripts 中的钩子命令，

运行 yarn serve

3. 自动化
此时我们像监听scss文件变化之后，自动执行build命令。

此时发现加上–watch之后，后面的serve命令就被堵塞不执行了，这时就需要同时执行多个script任务，可以借助与 npm-run-all 来实现。

yarn add npm-run-all -D

安装这个模块之后，我们就可以执行多个任务了，同时也可以监听style.scss文件的变化。
当style.scss变化之后，会自动执行build命令。

虽然说 build的命令会随着 style.scss变化而执行， 但是修改style.scss之后我们希望的是自动的更新页面。

此时就能够达到我们的效果了。

二、Grunt

对于 Grunt 仅了解既可以，因为其已经推出历史的舞台了，能够看懂别的项目中的代码就行了。

1. Grunt 的基本使用

1. 安装grunt

yarn add grunt -D

2. 创建 grunt 的入口文件 gruntfile.js

// Grunt 的入口文件
// 这个文件主要是用来定义 Grunt 自动执行的任务
// 需要导出一个函数
// 此函数接受一个 grunt 的参数， 该参数提供创建任务所用到的 API

module.exports = grunt => {
  // 1. grunt.registerTask(任务名, 任务函数| 任务数组(已经注册过任务名) 如：[ task1, task 2]) 来注册一个任务，通过 yarn grunt 任务名称，如要执行task1 =》 yarn grunt task1。
  grunt.registerTask('task1', () => {
    console.log('task1任务执行了')
  })
  
  grunt.registerTask('task2', () => {
    console.log('task2任务执行了')
  })
  
  // 2. 如果注册的任务名称为 default 就可以直接通过命令 yarn grunt 来执行 default 任务
  // 任务函数可以为数
  grunt.registerTask('default', ['task1', 'task2'])
  grunt.registerTask('task3', ['task1', 'task2'])

  // 3. grunt 还可以创建异步任务, 不过创建异步任务需要通过 任务函数体的this.async()得到一个回调函数，再异步操作之后调用这个回调函数来告诉grunt 任务结束
  grunt.registerTask('async-task', function() {
    const doneFn = this.async()
    setTimeout(() => {
      console.log('异步任务执行了')
      doneFn()
    }, 1000);
  })
}

3. 通过 yarn grunt + 任务名来运行grunt 任务

2. Grunt 标记任务失败

1. 如何标记

module.exports = grunt => {
  // 1. 标记grunt 任务失败，同步任务只需要再 任务函数体返回一个false
  grunt.registerTask('task1', () => {
    console.log('task1任务执行了')
    // 任务函数体返回一个false
    return false
  })
  
  grunt.registerTask('task2', () => {
    console.log('task2任务执行了')
  })
  
  grunt.registerTask('default', ['task1', 'task2'])
  grunt.registerTask('task3', ['task1', 'task2'])

  // 2. 异步任务标记失败，需要给 异步任务结束回调传递一个false
  grunt.registerTask('async-task', function() {
    const doneFn = this.async()
    setTimeout(() => {
      console.log('异步任务执行了')
      // 传递false
      doneFn(false)
    }, 1000);
  })
}

2. 失败之后带来的影响

比如现在有一个 grunt default 任务，该任务执行task1，task2，task3, 现在再task2任务中标记任务失败，当执行这个default任务的时候，task1会执行，到task2就执行失败，同时task2后面的任务终止执行。
以上面的例子来运行代码得到如下结果：

3. Grunt 的配置方法

4. Grunt 多目标任务

module.exports = grunt => {
 
  grunt.initConfig({
    // 2. 将多目标任务的名再 initConfig 里进行初始化

    build: {
      // 3. build 对象中的每一个键值对就是一个任务,除了options是配置项
      options: {
        config1: 'hhhh'
      },
      css: 'css~~~',
      js: 'js~~~'
    }

  })
  // 1. 再 grunt 通过grunt.registerMultiTask 与 grunt.initConfig 我们可以
  //  配置多目标任务
  grunt.registerMultiTask('build', function() {
    // 4. 通过 this.target 可以拿到任务吗，this.data 可以拿到任务目标值
    console.log('创建多目标任务','name: => ', this.target, 'value: => ', this.data)

    // 5. 通过this.options() 可以拿到配置项中的数据
    console.log(this.options()) 

    // 6. 通过 yarn grunt build 运行多任务，如果仅想指定某个任务可以 build: 子任务名
  })

  grunt.registerTask('async-task', function () {
    const doneFn = this.async()
    setTimeout(() => {
      console.log('异步任务执行了')
      // 传递false
      doneFn(false)
    }, 1000);
  })
}

5. Grunt 插件的使用

仅介绍 Sass，babel，watch 插件的使用

const { loadNpmTasks } = require("grunt")
const loadGruntTasks = require('load-grunt-tasks')
const sass = require('sass')

module.exports = grunt => {

  grunt.initConfig({
    // sass
    // yarn add grunt-sass sass -D
    sass: {
      main: {
        options: {
          sourceMap: true,
          implementation: sass
        },
        files: {
          // key 为 输出路径， value 为 输入路径
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    },

    // babel
    // yarn add grunt-babel @babel/core @babel/preset-env -D
    babel: {
      options: {
        presets: ['@babel/preset-env']
      },
      main: {
        files: {
          // key 为 输出， value 为 输入
          'dist/js/app.js': 'src/js/app.js'
        }
      }
    },

    // watch
    // yarn grunt-contrib-watch
    // 当监听的文件发生变化之后，会自动执行对于的 task
    watch: {
      js: {
        files: ['src/js/*.js'],
        tasks: ['babel']
      },
      css: {
        files: ['src/scss/*.scss'],
        tasks: ['sass']
      },
    }
  })

  grunt.registerTask('default', ['sass', 'babel', 'watch'])

  // grunt.loadNpmTasks('grunt-sass')

  // 1. 使用loadNpmTasks 导入 插件不方便，可以使用 loadGruntTasks 插件帮忙自动导入安装的插件
  loadGruntTasks(grunt) // 将 grunt 传入之后会自动所有的插件

}

grunt 使用插件的操作总结

1. 安装对于的插件
2. 通过 grunt-loadNpmTasks(‘grunt-sass’) 载入sass
3. 再 initConfig 中配置 sass 任务。(具体配置可以参考官网)

三、Gulp

Gulp 内容太多了单独写了一篇，可以查看这个文章

Gulp