常用的自动化构建工具

Grunt
构建过程基于临时文件，所以会慢，基本每一步都会有磁盘读写
gulp
基于内存，可同时执行多个
FIS

Grunt 基本使用

//Grunt 的入口文件
//用于定义一些需要 grunt 自动执行的任务
//需要导出一个函数
//这个函数接受一个 grunt的形参，内部提供一些创建任务是可以用到的 api

module.exports = grunt =>{
    grunt.registerTask('foo',()=>{
        console.log('hello grunt')
    })
    //第二个参数是任务描述  yarn grunt --help 可以找到
    grunt.registerTask('bar','任务描述',()=>{
        console.log('hello grunt-two')
    })
    //如果定义任务时的名称是 default 那这个任务就是 grunt的默认任务
    // grunt.registerTask('default',()=>{
    //     console.log('default task')
    // })
    //default 一般用来映射其他任务,在第二个参数位置传入任务名称数组，就会依次执行
    grunt.registerTask('default',['foo','bar'])
    //grunt 默认执行同步模式 如果要执行异步操作 需要使用this的async得到一个回调函数
    grunt.registerTask('async-task',function(){
        const done = this.async();//回调函数
        setTimeout(()=>{
            console.log('async-task')
            done()
        },1500)
    })
}

grunt中标记任务失败

module.exports = grunt =>{
    //通过return false 来标记此任务失败，会阻断后续任务执行
    grunt.registerTask('foo',()=>{
        console.log('hello grunt')
        return false
    })
    grunt.registerTask('bar','任务描述',()=>{
        console.log('hello grunt-two')
    })
    grunt.registerTask('default',['foo','bar'])
    grunt.registerTask('async-task',function(){
        const done = this.async();//回调函数
        setTimeout(()=>{
            console.log('async-task')
            //通过回调函数中添加false 来标记异步任务失败
            done(false)
        },1500)
    })
}

grunt 多目标任务

module.exports = grunt =>{
    //配置子任务
    grunt.initConfig({
        build:{
            options:{//options 作为任务的配置选项出现 不会当做普通任务处理
                bar:'foo'
            },
            //如果目标的配置也是一个对象，在这个对象中也能添加options
            js:{
                options:{//如果这么写就会覆盖对象中的配置
                    bar:'bar'
                }
            },
            css:'b'
        }
    })
    //grunt 多目标模式 可以让任务根据配置形成多个子任务
    grunt.registerMultiTask('build',function(){
        // 通过this.options来获取任务的配置选项
        console.log(this.options())
        // console.log('dadasdas')
        //可以通过this.target获取当前执行任务的名称，this.data 获取当前执行任务的值
        console.log(`target:${this.target},data:${this.data}`)
    })
    
}

grunt 插件基本使用

module.exports = grunt =>{
    grunt.initConfig({
        clean:{
            //删除temp下的app.js文件
            // temp:'temp/app.js'
            //删除swh下所有的txt文件
            // temp:'swh/*.txt'
            //清空swh下所有的文件
            swh:'swh/**'
        }
    })
    //通过loadNpmTasks 加载插件中提供的任务 通常情况下 grunt的插件名称都是grunt-contrib-"任务名称"
    grunt.loadNpmTasks('grunt-contrib-clean')
}

Gulp 基本使用

//gulp 入口文件
// 定义构建任务的方式 是 通过导出函数成员的方式去定义
exports.foo=done=>{
    console.log('hello foo')
    done()//标识任务完成
}
// 在新的gulp中取消了同步代码模式，约定每个任务都是异步模式，
// 当任务完成之后需要调用回调函数或者其他方式标记这个任务已经完成

//默认任务 default
exports.default=done=>{
    console.log('默认执行')
    done()
}

// gulp 4.0之前的写法
const gulp = require('gulp')
gulp.task('bar',done=>{
    console.log('bar working !')
    done()
})

gulp 串行任务和并行任务

//串行任务series
//并行任务parallel
const {series,parallel} = require('gulp')
const task1 = done=>{
    setTimeout(()=>{
        console.log('task1')
        done()
    },1000)
}
const task2 = done=>{
    setTimeout(()=>{
        console.log('task2')
        done()
    },1000)
}
const task3 = done=>{
    setTimeout(()=>{
        console.log('task3')
        done()
    },1000)
}
exports.foo = series(task1,task2,task3)
exports.bar = parallel(task3,task1,task2)