Grunt 前端自动化构建

·  阅读 159

一、自动化构建的认识

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
复制代码
  1. 创建 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);
  })
}
复制代码
  1. 通过 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 的配置方法

<font color=#999AAA >代码如下(示例):

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 任务。(具体配置可以参考官网)
分类:
前端
标签:
分类:
前端
标签: