自动化构建

自动化构建

重复的工作都应自动化
自动化工作流：脱离运行环境兼容带来的问题，使用提高效率的语法，规范和标准
ECMAScript
SASS
模板引擎：增强减少重复的html
都需要自动化构建工具，转义，被浏览器支持

自动化的体验

Sass编译
yarn add scss --dev 安装sass依赖
sass scss/main.sass css/style.css 编译后路径
NPM Scripts 解决重复执行的命令，也是实现构建工作流最简单的方式

在package.json 中添加scripts字段

"scripts": {
    "build": "sass scss/main.scss css/style.css  --watch",
    "preserve":"yarn build",
     "serve":"browser-sync"
  },

yarn add browser-sync --dev 启动测试服务器
yarn serve 启动服务器

常用的自动化构建工具
Grunt 最早的构建系统，基于临时文件，速度较慢，会有磁盘读写操作
Gulp 基于内存实现，速度快，同时执行多个
FIS 百度推出，把项目需求都实现，捆绑完善

Grunt是使用
命令
yarn init --yes
yarn add grunt
code gruntfile.js 添加入口文件

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

module.exports = grunt=>{
    grunt.registerTask("foo",()=>{
        console.log('grunt start')
    })

  grunt.registerTask("bar",'任务描述', ()=>{
        console.log('grunt task')
    })

    // grunt.registerTask("default", ()=>{
    //     console.log('grunt default  默认任务')
    // })
    // 多个任务
    grunt.registerTask("default", ['foo','bar'])

    // 异步任务
    // grunt.registerTask("async-task", ()=>{  同步模式，异步未生效
    //     setTimeout(()=>{
    //         console.log('async task stetimeout')
    //     },1000)
    // })
    grunt.registerTask("async-task", function(){
        const dome = this.async();
        setTimeout(()=>{
            console.log('async task stetimeout')
            dome()
        },1000)
    })

}

运行 yarn grunt foo foo是任务名
grunt 标记失败

module.exports = grunt=>{
    grunt.registerTask("bad",()=>{
        console.log('grunt bad')
        return false;  // bad 失败，bar未执行
    })
    grunt.registerTask("foo",()=>{
        console.log('grunt start')
    })

    grunt.registerTask("bar",'任务描述', ()=>{
        console.log('grunt task')
    })


    grunt.registerTask("default", ['foo','bad','bar'])

   
}

运行 yarn grunt default --force 解决

Grunt 配置方法

module.exports = grunt=>{
    // 压缩文件
    grunt.initConfig({
        // foo:'bar'
        foo:{
            bar:123
        }
    })

    grunt.registerTask('foo',()=>{
        console.log(grunt.config("foo.bar"))
    })
   
}

Grunt 多目标任务

module.exports = grunt=>{
    grunt.initConfig({
        build:{
            // 配置选项 options
            options:{
                foo: 'bar'
            },
            // 目标名称
            css: 1,
            js: 2
        }
    })
    // 多目标模式，可以让任务根据配置形成多个子任务
    grunt.registerMultiTask('build',function(){
        // 运行build命令时，会同时执行css任务及js任务
        console.log('build task')
        console.log(this.options())
        console.log(`target:${this.target},data:${this.data}`)

    })
} 

Grunt 插件
找到插件，安装到npm模块中
grunt.loadNpmTasks(‘grunt-contrib-clean’) 加载对应模块

添加配置选项

module.exports = grunt=>{
    
    grunt.initConfig({
       clean:{
           temp: 'temp/*.txt'
       }
    })
    grunt.loadNpmTasks('grunt-contrib-clean')
} 

常用模块
grunt-sass
grunt-babel

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'])
}