gulp是一个基于Node.js平台的构建工具，使用commonJs的模块化语法。我们需要使用gulp的包是一个TASK任务，对应一个包，对应一个处理逻辑，gulp.series对应一个同步任务，从左到右依次执行任务。长时间gulp.parallel对应异步任务，效率高，时间短。gulp.src表示从哪里读取文件gulp.dest表示从哪里输出文件constgulp=require('gulp');//gulp包consteslint=require('gulp-eslint');//eslint包语法检查constbabel=require('gulp-babel');//编译ES语法的babel包constbrowserify=require('gulp-browserify');//编译commonJs语法的工具constrename=require("gulp-rename");//重命名文件的包constless=require('gulp-less');//packagetorecognizelessfilesfromgulpconstlivereload=require('gulp-livereload');//监控文件的包constconnect=require('gulp-connect');//热更新包constopen=require("open");//打开网页包constuglify=require('gulp-uglify');//压缩JS代码包constLessAutoprefix=require('less-plugin-autoprefix');//混合LESS文件的插件包//https://github.com/browserslist/browserslistconstautoprefix=newLessAutoprefix({browsers:["cover99.5%","notdead"]});//扩展CSS识别包constcssmin=require('gulp-cssmin');//压缩CSS包constconcat=require('gulp-concat');//合并文件的包consthtmlmin=require('gulp-htmlmin');//压缩HTML包//注册任务/*开发套路：1.进入httpshttp://gulpjs.com/plugins/搜索相关插件gulp-xxx2.打开插件的npm仓库查看文档使用3.下载并导入gulp插件4.配置插件-intask*///语法检查必须有eslint配置文件gulp.task('eslint',function(){//读取所有js文件，返回值为可读流returngulp.src(['src/js/*.js'])//convectionCheckthesyntaxofthefile/data.pipe(eslint()).pipe(eslint.format()).pipe(eslint.failAfterError()).pipe(livereload());})//语法转换//babel可以将es6模块化语法转换为commonjs模块化语法//可以将es6及以上语法转换为es5及以下语法gulp.task('babel',()=>//读取所有jsfilesgulp.src('src/js/*.js')//进行语法转换.pipe(babel({presets:['@babel/preset-env']//这里需要修改，官网是wrong}))//Output.pipe(gulp.dest('build/js')).pipe(livereload()));//将commonjs的模块化语法转换为浏览器可识别的语法gulp.task('browserify',function(){//只需放入导入文件returngulp.src('build/js/app.js').pipe(browserify())//重命名文件.pipe(rename("built.js")).pipe(gulp.dest('build/js')).pipe(livereload());});//压缩js代码gulp.task('uglify',function(){returngulp.src('./build/js/built.js').pipe(uglify()).pipe(rename('dist.min.js')).pipe(gulp.dest('dist/js'))})//将less编译成cssgulp.task('less',function(){returngulp.src('./src/less/*.less').pipe(less()).pipe(gulp.dest('./build/css')).pipe(livereload());});//压缩cssgulp.task('css',function(){returngulp.src('./src/less/*.less').pipe(concat('dist.min.css')).pipe(less({plugins:[autoprefix]})).pipe(cssmin()).pipe(gulp.dest('./dist/css'))});//压缩htmlgulp.task('html',()=>{returngulp.src('src/*.html').pipe(htmlmin({collapseWhitespace:true,//删除空格removeComments:true//删除注释})).pipe(gulp.dest('dist'));});//自动化-->自动编译-->自动浏览器刷新（热更新）-->自动打开浏览器gulp.task('watch',function(){livereload.listen();//打开服务器connect.server({name:'DevApp',root:['build'],port:3000,livereload:true//热更新});//openbrowseropen('http://localhost:3000');//监听指定文件，一旦文件发生变化，执行以下任务gulp.watch('src/less/*.less',gulp.series('less'));gulp.watch('src/js/*.js',gulp.series('js-dev'));});//配置默认任务-->执行以上多个任务gulp.task('js-dev',gulp.series('eslint','babel','browserify'));//同步顺序执行，同一时间只能执行一个任务Slowgulp.task('js-prod',gulp.series('js-dev','uglify'));//gulp.task('默认',gulp.parallel('eslint','babel','browserify'));//异步执行，多个任务同时快速执行gulp.task('build',gulp.parallel('js-dev','less'));//生产环境使用说明：gulpprodgulp.task('prod',gulp.parallel('js-prod','css','html'));//开发环境说明：gulpstartgulp.task('start',gulp.series('build','watch'));以上包括了gulp工程所需要的基本所有package的使用方法和注释。喜欢的朋友希望大家收藏！
