自动化工作流

自动化工作流

eg: 以sass为例

• 安装sass模块yarn add sass - D

• 通过npm script设置sass要编译的文件

• sass模块内置了sass命令
• 通过npm run sass 源scss文件路径 目标scss文件路径 --watch将scss文件实时的编译为css文件
• --watch参数用来监控scss文件的改变，自动编译为css

script: {
    'build': 'npm run sass scss文件的路径 css文件的输出路径  --watch',
}

• 安装bowser-async模块

• 通过bowser-async打开浏览器

script: {
    'build': 'npm run sass scss文件的路径 css文件的输出路径 --watch',
    'serve': 'bowser-async .'
}

• 通过npm-run-all模块，运行多个npm script命令

script: {
    'build': 'npm run sass scss文件的路径 css文件的输出路径 --watch',
    'serve': 'bowser-async .',
    'start': 'run-p build serve',
}

总结

• npm script只能构建些简单的自动化任务。相对复杂的我们就需要使用常用的自动化构建工具

1. Gulp

1. Gulp工作流程是基于内存文件来进行读写和操作，基于内存的操作速度也会快很多，效率更高。
2. 支持多个任务并行处理。且基于nodejs的pipe流操作来处理文件，看起来更直观。
3. 每个task由开发者自己编写各个task，不是通过配置完成。 注意：Gulp本质是一个任务调度工具，它的任务调度时借鉴了函数式编程中函数组合的思想。

2. Grunt

• Grunt的工作流程都是基于临时文件来做的，每一步都会生成临时文件，然后对文件进行读写。处理的内容越多，处理的文件就越多，效率比较低

3. Fis

• 百度推出的构建系统

• 疑问？为什么没有把webpack和rollup放到自动化构建工具中

1. webpack
2. rollup 因为webpack和rollup具体来说，他们属于新一代模块打包工具了。