前端的发展真快。前些年打开一个编辑器还是刀耕火种的操作，几行html和js代码就可以在浏览器中运行。现在怎么办？各种包，各种库，各种框架，各种编程范式。究其原因，是我国高中社会教材中人民日益增长的素质文化需求与社会生产落后的矛盾。想想看。过去通过刀耕火种的方式写网页效率很低，到目前为止，在我国，网民的网页数量已经超过7亿。可以想象，对于网页的数量和种类的需求是巨大的。那么有什么方法可以提高网页的制作效率呢？这就是今天要讲的基于gulp平台的自动化生产平台。什么是吞咽？官方解释是一个基于流的自动化构建工具。好的，什么是流？这个stream是从英文单词stream翻译过来的，但是还是不太好理解。其实可以这样理解，流水线就是一个工厂的一个生产车间生产出半成品，半成品在传送带上被送到下一个加工车间的过程。把运动的半成品想象成数据，那么流动的数据就是流量。出色地！很难解释！看看代码。代码我已经上传到github了，有需要的同学可以自己去取，请点个小星星https://github.com/NicknameID...1.依赖npm由于npm在国内比较慢，推荐大家使用淘宝的cnpm，在国内访问更快（不明白国内为什么要竖墙，不舒服）。2、cnpminit初始化package.json文件的作用-y可以跳过查询步骤，直接生成默认的package.json文件3、安装依赖包由于依赖包太多，就不一一写了.主要是通过cnpminstall--save-dev包的名称进行安装。下图列出的包是自动化工具使用的包。我已经上传到github，点击这里获取。下载并安装json中的依赖。在package.json中添加gulp字段，方便调用本地安装的gulp命令。这里配置了Package.json。目录//gulpfile.js/*首先全局加载gulp，这个很重要*/constgulp=require('gulp');/*全局定义项目的目录结构，供应后使用*/constdirs={dist:'./dist',src:'./src',css:'./src/css',less:'./src/less',js:'./src/js',img:'./src/img',};gulp.task('create-directory',()=>{constmkdirp=require('mkdirp');//这里依赖包mkdirp，通过cnpm安装for(letiindirs){mkdirp(dirs[i],err=>{err?console.log(err):console.log('mkdir-->'+dirs[i]);;});}});//在终端运行cnpmrungulpcreate-directory生成需要生成的项目目录，不用每次都手动创建，幸福感爆棚！！！功能2---少编译，实现少注入功能，页面热更新，方便开发调试。要处理的文件*/const文件={lessFiles:'./src/less/go.less',cssFiles:'./src/css/*.css',jsFiles:'./src/js/*.js',imgFiles:'./src/img/*.*'}//编译lessgulp.task('compile-less',()=>{constless=require('gulp-less');//依赖gulp-less插件constnotify=require('gulp-notify');constplumber=require('gulp-plumber');constbrowserSync=require('browser-sync').create();//浏览器同步同步服务器constreload=browserSync.reload;//保存browser-sync的reload方法方便调用returngulp.src(files.lessFiles).pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))//使用gulp-notify和gulp-plumber防止因为less语法错误而跳出监控程序.pipe(less()).pipe(gulp.dest(dirs.css+'/')).pipe(reload({stream:true}));});//本地服务器功能，自动刷新（开发环境）gulp.task('server',['compile-less'],()=>{constbrowserSync=require('browser-sync').create();constreload=browserSync.reload;browserSync.init({server:'./'});gulp.watch(dirs.less+'/**/*.less',['compile-less']);//监听less文件夹下的所有less文件，如果有变化，调用compile-less任务编译lessgulp.watch('./*.html').on('change',reload);//监听html文件，如果有变化就刷新浏览器gulp.watch(dirs.js+'/**/*.js').on('change',reload);//监听所有的js文件，有变化就刷新浏览器});//在cmd中运行cnpmrungulpserver可以看到程序在后台运行，正在监听文件变化，这样就可以打开编辑器了左边写代码，右边打开浏览器看效果。非常爽，人生无所求（感动！！！）功能3---添加插件包用于添加浏览器私有前缀1.gulp-postcss2.gulp-sourcemaps3.autoprefixer//添加浏览器的私有前缀（生产环境）gulp.task('autoprefixer',()=>{constpostcss=require('gulp-postcss');constsourcemaps=require('gulp-sourcemaps');constautoprefixer=require('autoprefixer');returngulp.src(files.cssFiles).pipe(sourcemaps.init())//添加sourcemap方便调试.pipe(postcss([autoprefixer()]))//添加解决浏览器兼容性问题的浏览器私有前缀.pipe(sourcemaps.write('.')).pipe(gulp.dest(dirs.css+'/'))});Function4---压缩css的插件包1.gulp-minify-css2.gulp-rename//压缩css（生产环境）gulp.task('minify-css',function(){constminifyCSS=require('gulp-minify-css');constrename=require("gulp-rename");returngulp.src(dirs.css+'/**/*.css').pipe(minifyCSS({/*keepBreaks:true*/})).pipe(rename(path=>path.basename+='.min'))//将文件的输出样式重命名为原来的样式文件名.min.css.pipe(gulp.dest('./dist/css/'))});功能5---JavaScript文件合并压缩插件包1.gulp-concat2.gulp-uglify3.gulp-rename//js文件--合并--压缩（生产环境）gulp.task('js-concat-compress',(cb)=>{letname='';//先定义一个变量，后面会用到保存文件名constconcat=require('gulp-concat');constuglify=require('gulp-uglify');constrename=require("gulp-rename");返回gulp.src(dirs.js+'/**/*.js').pipe(rename(path=>{path.basename+='';name=path.basename;})).pipe(concat('bundle.js'))//合并js文件.pipe(uglify())//压缩js文件.pipe(rename(path=>{path.basename=name+'.'+path.basename+'.min';//更改文件名并添加.min})).pipe(gulp.dest('dist/js/'));});Function6---图片无损压缩插件包1.gulp-imagemin//图片无损压缩gulp.task('img-handl',()=>{constimagemin=require('gulp-imagemin');returngulp.src(files.imgFiles).pipe(imagemin())//参数可以写在imagemin()中，需要的话可以去gi看看thub.pipe(gulp.dest('./dist/img/'))});的页面功能7---项目打包有时候我们需要把东西做完后打包，方便传输，而有些文件是不需要打包的，比如node_modules文件夹，一键打包的快感体验过了1.gulp-zip//项目打包（生产环境）gulp.task('zip',()=>{constzip=require('gulp-zip');returngulp.src(['./*.html','**/dist/**/*.*','!**/node_modules/**/*.*'])//需要什么这里需要注意的是，在写要打包的文件时，避免把打包文件写在开头，这里'!**/node_modules/**/*.*'放在最后.pipe(zip('project.zip'))//打包后的文件名，随意取.pipe(gulp.dest('./'))});5.组织任务执行，方便调用任务因为gulp是同时执行任务的并发任务数最多，所以有时候我们需要一步步进行，所以就需要插件gulp-sequence来按顺序写任务，他们将按顺序执行。需要整理功能模块，方便调用完整的代码我已经上传到github了，需要的同学可以自己拿，请点个小星星https://github.com/NicknameID...//-------------------开发阶段命令-------------------------------------------------gulp.task('开始',['创建目录']);//项目初始化第一条命令gulp.task('dev-watch',['server']);//开始写项目后开启服务器实时更新//----------------生产阶段命令------------------------------------------------------gulp.task('prefixer',['自动前缀']);//给css文件添加浏览器私有前缀files.cssFiles==>>.src/css/gulp.task('min-css',['minify-css']);//压缩css文件files.cssFiles==>>dist/css/gulp.task('js-handl',['js-concat-compress']);//Concatjs文件dirs.js/**/*.js==>>./dist/js/concated.jsgulp.task('img-handl',['img-handl'])//处理图片并无损压缩图片//------------------一键生成工程文件的命令--------------------------------------------//因为gulp以最大并发任务数同时执行任务，有时我们需要要一步步进行，所以我们需要插件`gulp-sequence`来编写顺序输入的任务，它会按顺序执行construnSequence=require('gulp-sequence').use(gulp);gulp。任务（'bunld-project'，runSequence（'clean-dist'，'compile-less'，'autoprefixer','minify-css','js-concat-compress','img-handl','zip'))6.总结看看有没有用到gulp其实并没有用到很多自己的API，所有的处理过程都是通过不同的插件来实现的，所以gulp更像是一个处理平台而不是一个综合的处理程序。他只负责数据的流动，从管道（pipeline）的一端流向另一端，剩下的就交给各个插件了。不像现代社会分工细化就能提高效率。这是对社会发展经验的总结。文章有点长，感谢阅读的小伙伴！！！
