一、Gulp定位Gulp是一个基于流的自动化构建工具。2.初始化如果之前已经全局安装了gulp，请运行以下命令删除旧安装：npmrm--globalgulp然后安装独立的gulp-clinpmi--globalgulp-cli运行以下命令为什么放弃gulp而使用gulp-cli代替？我想解耦cli和gulp，处理仅在gulp-cli中进行。目的：主要目的是减小安全安装包的大小。与主包gulp分离，在不影响后续sips主题的gulp-cli进程的情况下执行gulp功能和bug修复，并在任务中添加自定义元数据和配置文件。查看安装的版本2.xgulp-vCLIversion:2.3.0Localversion:Unknown3.在工程中使用gulp进入工程，安装gulpnpmi--save-devgulp，执行gulp-vchengxinsong$gulp-vCLIversion:2.3.0Localversion:4.0.2在项目根目录下创建gulpfile.js文件，在文件中输入如下内容：functiondefaultTask(cb){cb();}exports.default=defaultTask;4、gulp的基本转换过程在src目录下找到所有的js文件并压缩这些js文件会将压缩后的js代码输出到dist/js目录下constgulp=require('gulp');constuglify=require('gulp-uglify');gulp.task('gulpSaucxs',function(done){gulp.src('src/*.js')//dist和src在同一个目录.pipe(uglify()).pipe(gulp.dest('dist/js'));//相对路径done();})上面代码中task方法接收任务代码，必须有回调函数。gulp.src()方法在src目录中找到js文件。.pipe是接收流并返回处理后的流的结果。结构体，在pipe方法中执行uglifg()方法来压缩js代码。gulp.dest()方法输出到指定的相对目录。done()方法是回调函数执行。gulp.task('taskname',callbackfunction)，任务名也是后续gulp任务的名字，执行这个任务，回调函数中需要处理的代码来处理这个任务。src()方法读取一个文件并生成一个Node流，它将所有匹配的文件读入内存并通过流进行处理。Node流(stream)提供的主要API方法pipe()方法。dest()方法接收一个输出目录作为参数，并将文件内容和文件属性写入指定目录。我们在src下新建一个index.js文件，我们来写最长递增子序列的方法。//最长递增子序列functionlis(n){if(n.length===0)return0//创建一个与参数大小相同的数组，并用1letarray=newArray(n.length).fill填充值(1)//从下标1开始遍历，因为数组已经填满了1for(leti=1;in[j]){array[i]=Math.max(array[i],1+array[j])}}}letres=1for(leti=0;i{emitter.emit('data')console.log(emitter,'松宝写代码')},500);完成();}exports.eventEmitterTask=eventEmitterTask;执行gulpeventEmitterTask，结果如下：chengxinsong$gulpeventEmitterTask[21:42:26]Usinggulpfile~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js[21:42:26]Starting'eventEmitterTask'...[21:42:26]Finished'eventEmitterTask'after1.77msEventEmitter{_events:[Object:nullprototype]{},_eventsCount:0,_maxListeners:undefined,[Symbol(kCapture)]:false}宋宝写道代码4.返回子进程请参见返回childProcess的示例。//返回child_process子进程const{exec}=require('child_process');functionchildProcessTask(done){exec('data');console.log('松宝写代码')done();}exports.childProcessTask=childProcessTask;执行gulpchildProcessTask，结果如下：chengxinsong$gulpchildProcessTask[21:48:32]Usinggulpfile~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js[21:48:32]Starting'childProcessTask'...松宝写代码[21:48:32]7.02ms5后完成'childProcessTask'，返回RxJSobservable观察对象看返回observable的例子。//返回observable观察对象constObservable=require('rx').Observable;functionobservableTask(done){Observable.return('松宝写代码');console.log('松宝写代码')done();}exports.可观察任务=可观察任务；执行gulpobservableTask，结果如下：chengxinsong$gulpobservableTask[21:53:14]Usinggulpfile~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js[21:53:14]Starting'observableTask'...宋宝写代码[21:53:14]在2.28ms6后完成'observableTask'。使用callback回调函数查看使用callback回调函数的例子。如果任务不返回任何内容，则必须使用回调来指示任务已完成。要通过回调通知gulp任务中的错误，请将Error作为参数传递给回调。//返回回调回调函数functioncallbackTask(done){console.log('松宝写代码')done(newError('抛出错误'));}exports.callbackTask=callbackTask;执行gulpcallbackTask，结果是chengxinsong$gulpcallbackTask[21:58:22]Usinggulpfile~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js[21:58:22]Starting'callbackTask'...松宝写代码[21:58:22]'callbackTask'erroredafter2.09ms[21:58:22]Error:anerrorwasthrowedatcallbackTask7,usingasync/awaitLookanexampleofusingasync/awaitasynchronousfunctions.一个任务可以被定义为一个异步函数，它用一个承诺来包装你的任务。这将允许您使用await处理承诺并使用其他同步代码。//使用async/await回调函数constfs=require('fs');asyncfunctionasyncTask(done){const{version}=fs.readFileSync('package.json');console.log(version,'version=====')constdata=awaitPromise.resolve('松宝写代码');console.log(data,'松宝写代码=========')done();}exports.asyncTask=asyncTask;执行gulpasyncTask结果chengxinsong$gulpasyncTask[22:26:06]Usinggulpfile~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js[22:26:06]Starting'asyncTask'...undefinedversion=====松宝写代码松宝写代码=========[22:26:06]Finished'asyncTask'after2.02ms八、我们看一个例子比如我们需要清除dist目录先用series处理然后压缩css和压缩js并行处理，用parallel处理输出到dist/js和dist/css//instanceconstminifycss=require('gulp-minify-css');//compresscssconstdel=require('del');//删除目录//清空目录functionclean(done){del(['dist/**']);done();}//compresscssfunctionminifyCss(done){gulp.src('src/*.css').pipe(minifycss()).pipe(gulp.dest('dist/css'));done()}//压缩jsfunctionuglifyJs(done){gulp.src('src/*.js').pipe(uglify()).pipe(gulp.dest('dist/js'));完成();}exports.exampleGulpTask=gulp.series(clean,gulp.parallel(minifyCss,uglifyJs));//执行顺序clean=>并行执行cssjs压缩
