自动构建在开发阶段使用提高效率的语法、规范和标准，自动将源代码构建到生产代码中NPMScript每当执行npmrun时，自动创建一个新的shell，并指定shell在此shell脚本命令中执行。因此，只要是能被Shell（一般是Bash）运行的命令，都可以写在npm脚本中。也就是说，当前目录的node_modules/.bin子目录下的所有脚本都可以直接用脚本名调用，不需要加路径。"build":"sasssass/main.sasscss/style.css--watch"而不是"build":"./node_modules/.bin/sasssass/main.sasscss/style.css--watch",默认值一般情况下，npmscripts都是由用户提供的。但是，npm为这两个脚本提供了默认值。也就是说，这两个脚本可以不定义，直接使用。"start":"nodeserver.js","install":"node-gyprebuild"上面的代码中，npmrunstart默认值为nodeserver.js，前提是在脚本中有server.js项目的根目录；npmruninstall默认值为node-gyprebuild，前提是项目根目录下有binding.gyp文件。钩子npm脚本有前钩子和后钩子。构建脚本命令的挂钩示例是预构建和后构建。"prebuild":"echoIrunbeforethebuildscript","build":"cross-envNODE_ENV=productionwebpack","postbuild":"echoIrunafterthebuildscript"当用户执行npmrunbuild时，它会按照下面的顺序自动执行。npmrunprebuild&&npmrunbuild&&npmrunpostbuildnpmpackagenpm-run-all:startandrunmultiplecommandsatthesametimeparallel:并行运行多个命令，例如：npm-run-all--parallellintbuildserial:多个命令依次执行，例如：npm-run-all--serialcleanlintbuild:**continue-on-error：是否忽略错误，加上这个参数npm-run-all会自动退出错误命令并继续运行正常的race:添加这个参数后，只要执行一个命令出错，npm-run-all就会结束所有的命令browser-syncGrunt基本都是使用安装依赖yarnaddgrunt创建一个入口文件gruntfile.js//grunt入口文件，用于定义需要grunt自动执行的任务//需要导出一个函数，这个函数接收一个grunt的形参，内部提供了一些apimodule.exports，可以在创建任务时使用=(grunt)=>{//注册一个名为foogrunt.reg的任务isterTask("foo",()=>{console.log("hellogrunt");});//注册一个名为bar的任务，描述为任务描述grunt.registerTask("bar","taskDescription",()=>{console.log("othertask");});//注册一个默认任务，不需要指定任务名称yarngrunt//grunt.registerTask("default",()=>{//console.log("defaulttask");//});//注册一个默认任务，依次执行foo和bar任务grunt.registerTask("default",["foo","bar"]);//注册一个async-task异步任务grunt.registerTask("async-task",function(){//声明这是一个异步任务this.async();setTimeout(()=>{console.log("asynctask");},1000);});};通过命令执行yarngrunt${taskName}标记任务失败。在grun中标记任务失败后，后续任务一般不会执行。后续任务可以通过--force参数强制执行失败的任务yarngrunt--force同步任务：通过返回false来标记失败module.exports=(grunt)=>{grunt.registerTask("foo",()=>{console.log("hellogrunt");returnfalse;});};异步任务：通过执行状态module.exports=(grunt)=>{grunt.registerTask("async-task",function(){//声明这是一个异步任务constdone=this.async();setTimeout(())=>{console.log("asynctask");done(false);},1000);});};配置选项方法可以通过grunt.initConfig方法配置grunt属性module.exports=(grunt)=>{grunt.initConfig({foo:{name:"jasper"},});grunt.registerTask("foo",()=>{console.log(grunt.config().foo.name);});};在多目标任务的initConfig配置中，配置下的各个属性与name因为task是一个target，运行这个task可以执行配置下的所有target。module.exports=(grunt)=>{grunt.initConfig({foo:{options:{sex:"Male",},name:"jasper",age:25,},});//多目标咕噜声。registerMultiTask("foo",function(){console.log(this.options());console.log(`target:${this.target},data:${this.data}`);});};plugins使用yarnaddgrunt-contrib-clean--devloadplugins安装插件grunt.loadNpmTasks("grunt-contrib-clean");配置目标grunt.initConfig({clean:{temp:"temp/**",},});执行yarngruntcleanmodule.exports=(grunt)=>{grunt.loadNpmTasks("grunt-contrib-clean");grunt.initConfig({clean:{temp:"temp/**",},});};常用的插件load-grunt-tasksgrunt-sassgrunt-babelgrunt-contrib-watchGulp基本都是用来安装gulpyarnaddgulp--dev创建一个gulpfile.js文件。在最新的gulp中，约定了每个任务都是一个异步任务，所以我们需要通过done参数来标记任务完成exports.foo=(done)=>{console.log("footaskworking...");done();};//默认任务exports.default=(done)=>{console.log("thisisdefaulttask");done();};//Gulp4.0用来注册任务，不推荐constgulp=require("gulp");gulp.task("old",(done)=>{console.log("oldgulptask..");done();});执行任务yarngulpfoocombinationTask我们可以根据具体场景选择任务是并行（paralle）还是串行（series）执行。部署需要先执行编译任务。在执行部署任务时，应该串行执行。less/sass和js的编译没有先后依赖关系，可以并行执行，提高效率。const{系列，并行}=require("gulp");consttask1=(done)=>{setTimeout(()=>{console.log("task1working~");done();},1000);};consttask2=(done)=>{setTimeout(()=>{console.log("task2working~");done();},1000);};consttask3=(done)=>{setTimeout(()=>{console.log("task3working~");done();},1000);};exports.foo=series(task1,task2,task3);//串行执行exports.bar=parallel(task1,task2,task3);//并行执行异步任务回调函数exports.callback=(done)=>{console.log("callbacktask~");done();};//如果执行了多个任务，exports后面就不会再执行了.callback_error=(done)=>{console.log("callback_errortask~");done(newError("taskFailed"));};promiseexports.promise=()=>{console.log("promisetask~");返回Promise.resolve("确定");//返回一个promise对象};exports.promise_error=()=>{console.log("promise_errortask~");返回Promise.reject(newError("任务失败"));//返回一个promise对象};async/awaitconsttimeout=(time)=>{returnnewPromise((resolve)=>{setTimeout(resolve,time);});};exports.async=async()=>{awaittimeout(1000);console.log("异步任务~");};Gulp构建流程核心工作原理基于流的构建系统constfs=require("fs");const{转换}=require("stream");exports.default=()=>{//文件读取流constread=fs.createReadStream("normalize.css");//文件写入流constwrite=fs.createWriteStream("normalize.min.css");//文件转换流consttransform=newTransform({//transform:(chunk,encoding,callback)=>{//核心转换过程//核心转换过程实现//chunk=>在读取流中读取内容（Buffer)toString转换过程stringconstinput=chunk.toString();constoutput=input.replace(/\s+/g,"").replace(/\/\*.+?\*\//g,"");callback(null,output);//有错误优先，没有错误传null},});//读取输出文件流导入并写入文件流read.pipe(transform).pipe(write);returnread;}??;Gulp文件操作API转换流一般由插件src().pip提供e(转换流).pipe(dest(目标目录))const{src,dest}=require("gulp");constcleanCss=require("gulp-clean-css");constrename=require("gulp-rename");exports.default=()=>{returnsrc("src/*.css")//创建文件读取stream.pipe(cleanCss()).pipe(rename({extname:".min.css"}))//重命名extension.pipe(dest("dist"));//导出到dest并将参数写入stream并将参数写入目标目录};FIS安装基本使用yarnaddfis3--dev添加fis配置文件fis-conf.js//资源位置fis.match("*.{js,scss,png}",{release:"/assets/$0",//当前文件的原始目录结构});//编译压缩//yarnglobaladdfis-parser-node-sassfis.match("**/*.scss",{rExt:".css",parser:fis.plugin("node-sass"),optimizer:fis.plugin("clean-css"),});//yarn全局添加fis-parser-babel-6.xfis.match("**/*.js",{解析器：fis.plugin("babel-6.x"),优化器：fis.plugin("uglify-js"),});execute,fis3inspect查看转换文件fis3release-doutput
