构建工具 - grunt(用grunt及其插件定义css编译、js编译、文件监听等任务)

本文介绍了构建工具grunt,虽不再流行,但因其鼻祖地位仍值得学习。文中说明了可使用grunt及其插件定义编译scss为css、用babel编译最新版本js等任务,还介绍了grunt常用插件,如grunt - sass、grunt - babel等,并提及修改gruntfile.js文件内容及执行yarn grunt。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

项目网址:https://gitee.com/big-right-right/grunt-sample.git

## grunt

grunt已经不再流行 但鉴于其构建工具鼻祖的地位 还是有必要学习一下

使用grunt及其插件,可以定义编译scss为css,用babel编译最新版本js等任务

npm init -y
cnpm install grunt --save-dev
touch gruntfile.js

## 定义同步、异步、默认grunt任务,修改 gruntfile.js 文件内容为如下:

/*
Grunt 的入口文件
用于定义一些需要 grunt 自动自行的任务
需要导出一个函数 此函数接收一个 grunt 的形参,内部提供一些创建任务时可以用到的API
*/

module.exports = grunt => {
    // 定义一个同步任务,可用 yarn grunt foo 执行
    grunt.registerTask('foo', () => {
        console.log('hello grunt~')
    })

    // 定义一个异步任务, 可用 yarn grunt async-task 执行
    grunt.registerTask('async-task', function() {
        const done = this.async()
        setTimeout(() => {
            console.log('async task working')
            done()
        }, 1000)
    })

    // 标记同步任务失败
    grunt.registerTask('bar', '任务描述', () => {
        console.log('bar task')
        return false // 标记失败
    })

    // 标记异步任务失败
    grunt.registerTask('bad-async', function() {
        const done = this.async()
        setTimeout(() => {
            console.log('bad async')
            done(false) // 标记失败
        }, 1500)
    })

    // 定义默认任务 可直接用 yarn grunt 执行
    // 任务列表将会依次执行
    grunt.registerTask('default', ['foo', 'bar', 'async-task'])
}

## 定义grunt任务的配置,修改 gruntfile.js 文件内容为如下:

module.exports = grunt => {
    // 配置grunt数据
    grunt.initConfig({
        name: 'xiaoming',

        address: {
            city: 'Beijing'
        },

        build1: {
            options: {
                base: 10,
            },
            css: {
                options: {
                    base: 20,
                },
                data: 11,
            },
            js: 22
        }
    })

    // 任务中可获取grunt配置中的数据
    grunt.registerTask('ming', () => {
        console.log(grunt.config('name'))           // xiaoming
        console.log(grunt.config('address.city'))   // Beijing
    })

    // 定义一个多目标任务
    grunt.registerMultiTask('build1', function(){
        console.log(this.options())
        console.log(`target: ${this.target}, data: ${this.data}`)
    })
    /* yarn grunt build1, 将依次输出:
        { base: 20 }
        target: css, data: [object Object]

        { base: 10 }
        target: js, data: 22
    */
}

## grunt的常用插件

grunt-sass 编译scss文件为css文件

grunt-babel 编译es6+代码文件为js文件

grunt-contrib-watch 监听文件触发任务

grunt-contrib-clean 清除文件

修改 gruntfile.js 文件的内容为如下:

// grunt的常用插件

// grunt-sass:编译scss文件为css文件
// cnpm install grunt-sass sass --save-dev
// yarn grunt sass

// grunt-babel: 编译es6+代码文件为js文件
// cnpm install grunt-babel @babel/core @babel/preset-env --save-dev
// yarn grunt babel

// grunt-contrib-watch: 监听文件触发任务
// cnpm install grunt-contrib-watch --save-dev
// yarn grunt watch

// grunt-contrib-clean: 清除文件
// cnpm install grunt-contrib-clean --save-dev
// yarn grunt clean

// 可以自动加载所有grunt插件中的任务
// cnpm install load-grunt-tasks --save-dev


const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')

module.exports = grunt => {
    grunt.initConfig({
        sass: {
            options: {
                sourceMap: true,
                implementation: sass
            },
            main: {
                files: {
                    'dist/css/main.css' : 'src/css/main.scss'
                }
            }
        },

        babel: {
            options: {
                presets: ['@babel/preset-env'] // 可编译所有最新es6的特性
            },
            main: {
                files: {
                    'dist/js/app.js' : 'src/js/app.js'
                }
            }
        },

        watch: {
            js: {
                files: ['src/js/*.js'],
                tasks: ['babel']
            },
            css: {
                files: ['src/css/*.scss'],
                tasks: ['sass']
            }
        },

        clean: {
            temp: 'dist/**' // 删除dist文件夹以及其下所有文件
        }
    })

    // grunt.loadNpmTasks('grunt-sass')
    // grunt.loadNpmTasks('grunt-babel')
    loadGruntTasks(grunt) // 它可以自动加载所有grunt插件中的任务

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

执行 yarn grunt。

## package.json内容:

{
  "name": "grunt-sample",
  "version": "1.0.0",
  "description": "grunt已经不再流行 但鉴于其构建工具鼻祖的地位 还是有必要学习一下 使用grunt及其插件,可以定义编译scss为css,用babel编译最新版本js等任务",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/big-right-right/grunt-sample.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "grunt": "^1.3.0",
    "grunt-babel": "^8.0.0",
    "grunt-contrib-clean": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-sass": "^3.1.0",
    "load-grunt-tasks": "^5.1.0",
    "sass": "^1.29.0"
  }
}

本文 完。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值