自动化构建的学习——grunt

自动化构建
一切重复工作本应自动化，自动化是通过机器代替手工完成一些工作，构建就是转换

转换的过程称为自动化构建工作流，作用是脱离运行环境兼容带来的问题，在开发阶段使用提高效率的语法、规范和标准
比较典型的应用场景：在开发web应用时比如es6，sass,模板引擎等，这些用法大都不被浏览器直接支持，构建转换那些不被支持的【特性】变成能够直接运行的代码

安装sass官方提供的一个sass模块,做为开发依赖安装

Yarn add sass –dev

安装后找到node_modules下安装的路径，然后需要提供scss的路径和转换成的css路径

.\node_modules\.bin\sass   scss/main.scss  css/style.css

每次都需要执行这个重复的命令，所以npm scripts主要就是用来解决这个问题。可以在定义一些与项目相关的脚本命令
用npm scripts来包装你的构建命令。
在package.json里添加scripts

npm scripts是实现自动化构建工作流的最简方式

常用的自动化构建工具

grunt是最早的前段构建系统，插件生态完善，但是它的工作过程是基于临时文件实现的，所以构建速度较慢，例如用它对工程中的sass文件的构建，一般会对sass文件做编译操作，再去添加一些自由属性的前缀，再去压缩代码。这些步骤grunt每一步都有磁盘读取操作。
Gulp基于内存实现的，对文件的处理都是在内存中实现，速度快一些，默认同时支持多个任务，这是当下最流行的。
Fis是百度团队研发的，最早只是在内部使用。适合初学者
Grunt的基本使用
打开一个空项目

Yarn init –yes
Yarn add grunt
Code grunt file.js

Grunt 标记任务失败

//当任务失败时会阻碍下面的任务执行，命令可以：yarn grunt de
//Grunt 的入口文件
//用于定义一些需要Grunt自动执行的任务
//需要导出一个函数
//此函数接收一个grunt的形参，内部提供一些创建任务时可以用到的API
module.exports = grunt => {
    grunt.registerTask('foo', () => { //注册一个任务，第一个参数是名字，第二个参数是指定一个函数,如果还是字符串就是任务的描述
        console.log("hhhh");
        return false //当任务失败时会阻碍下面的任务执行，命令可以：yarn grunt default --force
    });
    grunt.registerTask("bar", "任务描述", () => {
        console.log("other-----")
    });
    //如果名称是default就是默认的任务，可以直接yarn grunt去执行
    grunt.registerTask('default', ['foo', 'bar']) //如果第二个参数是数组，就是会依次执行里面的任务

    grunt.registerTask('async-task', function() { //异步任务

        const done = this.async()
        setTimeout(function() {
            console.log(22222222222222222); //默认支持同步模式，如果需要异步操作的话要用普通的函数，this.async得到一个回调函数,表示任务完成
            done()
        }, 1000)
    })
}

Grunt 配置选项方法

Grunt多目标任务

运行了两个目标,运行某一个目标时

module.exports = grunt => {
    grunt.initConfig({
            build: {
                options: { //除了options，其他的键都做成目标，options做成配置选项
                    foo: 'bar'
                },
                css: '1',
                js: "2"
            }
        })
        //多目标模式，可以让任务根据配置形成多个子任务
    grunt.registerMultiTask('build', "描述", function() {
        console.log(this.options())
        console.log(`target:${this.target},data:${this.data}`)
    })
}

Grunt插件的使用

yarn add grunt-contrib-clean

module.exports = grunt => {
    grunt.initConfig({
        clean: {
            temp: 'temp/app.js'//需要清除的文件路径，也可以用通配符，*.js，或者**表示所有文件
        }
    })
    grunt.loadNpmTasks('grunt-contrib-clean')
}

Grunt实现常用的构建任务

Yarn add grunt-sass sass –dev

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

yarn add grunt-babel @babel/core @babel/preset-env –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/scss/main.scss"
                    }
                }
            },
            babel: {
                options: {
                    sourceMap: true,
                    presets: ['@babel/preset-env']
                },
                main: {
                    files: {
                        'dist/js/app.js': "src/js/app.js"
                    }
                }
            }
        })
        // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt) //自动加载所有的grunt插件的任务
}

yarn add grunt-contrib-watch –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/scss/main.scss"
                    }
                }
            },
            babel: {
                options: {
                    sourceMap: true,
                    presets: ['@babel/preset-env']
                },
                main: {
                    files: {
                        'dist/js/app.js': "src/js/app.js"
                    }
                }
            },
            watch: {
                js: {
                    files: ['src/js/*.js'], //要监视的文件
                    tasks: ['babel'] //修改后需要执行什么任务
                },
                css: {
                    files: ['src/scss/*.scss'],
                    tasks: ['sass']
                }
            }
        })
        // grunt.loadNpmTasks('grunt-sass')
    loadGruntTasks(grunt) //自动加载所有的grunt插件的任务

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