自动化构建工具

自动化构建开发阶段写的源代码自动化的转化程生产环境中能够运行的代码或程序，个别咱们把转化的过程称之为自动化工作流，脱离运行环境兼容带来的问题应用提高效率的语法标准和规范 罕用的自动化构建工具Grunt Gulp FIS （webpack是模块打包工具，不在此次范畴之内）NPM ScriptsGrunt最早的前端构建零碎，插件生态欠缺，然而工作过程是基于临时文件实现的，因而构建速度较慢例如用它实现sass文件构建，先编译sass，主动增加公有属性前缀，最初再压缩代码。这个过程中Grunt每一步都会有磁盘读写操作例如sass在编译实现后，将后果写入临时文件，下一个插件再读取这个临时文件进行下一步构建解决的环节越多，文件读写的次数就越多，对于超大型我的项目，文件多，解决慢grunt入口Gulp解决了Grunt构建速度慢的问题，基于内存去实现的，也就是说他对于文件的解决环节都是在内存中实现的，绝对于磁盘读写速度就快了很多另外它默认反对同时执行多个工作，效率大大提高，应用形式通俗易懂，插件也比较完善gulp入口F.I.S百度外部的构建零碎相比于前两个微内核的特点，它更像是捆绑套餐，领有高度集成的特点，他把咱们我的项目中典型的需要尽可能集成在外部例如，资源加载，模块化开发，代码部署，性能优化FIS入口备注：对于脚本#!/usr/bin/env node的参考。带有这一行的文件就是脚本文件，加这一行为了让node晓得这个脚本文件运行的目录

GulpGrunt装置 yarn add gulp --dev code gulpfile.js gulp入口文件,编写须要gulp执行的构建工作 yarn gulp 工作名 执行gulp构建 gulpfile.js文件时gulp的入口文件 在最新的gulp中约定每个工作都是异步工作，因而咱们须要标记工作实现通过done参数 exports.foo = done =>{ console.log('foo task working~'); done() //标识工作实现}//默认工作exports.default = done=>{ console.log("default task working~"); done()}//gulp 4.0以前注册一个工作通过,不举荐，举荐下面导出函数成员形式const gulp = require('gulp')gulp.task('bar',done=>{ console.log('bar working~'); done()})组合工作例如编译css和js，他们是互不烦扰的，这两个工作能够并行处理，进步构建效率 例如部署，部署的工作须要先执行编译工作，须要通过串行执行工作 const {series,parallel} = require('gulp')const task1 = done =>{ setTimeout(()=>{ console.log('task1 working~'); done() },1000)}const task2 = done =>{ setTimeout(()=>{ console.log('task2 working~'); done() },1000)}const task3 = done =>{ setTimeout(()=>{ console.log('task3 working~'); done() },1000)}exports.foo = series(task1,task2,task3) //串行顺次执行exports.bar = parallel(task1,task2,task3) //并行执行异步工作回调函数 ...

GruntGrunt装置 yarn add grunt code gruntfile.js grunt的入口文件 yarn grunt 工作名执行node_modules gruntcli命令 /*** Grunt的入口文件* 用于定义一些须要 Grunt 主动执行的工作* 须要导出一个函数* 此函数接管一个 grunt 的形参，外部提供一些创立工作时能够用到的 API*/module.exports = grunt => { grunt.registerTask('foo',()=>{//注册一个工作 工作产生主动执行函数 yarn grunt foo console.log('hello grunt'); })}工作形容 grunt.registerTask('bar','工作形容',()=>{ //‘工作形容’会呈现在yarn grunt --help帮忙信息中 console.log('other task~'); })默认工作 // grunt.registerTask('default',()=>{ // console.log('default task~'); //默认工作 执行时能够不增加名称 // }) grunt.registerTask('default',['foo','bar']) //顺次执行数组中的工作异步工作 grunt.registerTask('async-task',function(){ const done = this.async()//失去一个回调函数，异步操作完结调用它，标识工作曾经实现 setTimeout(()=>{ console.log("async task working"); done() },1000) })标记工作失败 grunt.registerTask('bad',()=>{ //yarn grunt bad console.log('bad working~'); return false //标记工作失败,如果在工作列表中，它的失败会阻止后续工作运行 }) grunt.registerTask('good1',()=>{ console.log('good1 working~'); }) grunt.registerTask('good2',()=>{ console.log('good2 working~'); }) grunt.registerTask('default',['good1','bad','good2']) //good2内容不再输入异步工作标记失败 ...