gulp自动化构建工具的使用简述现在不管是做前端还是后端，都免不了要和html打交道；并且Node非常容易开发web；我们不想自己写点东西吗？像Express这样的前卫框架，已经深度融合了很多前端的东西；现在，让我们为thinkphp手动插入gulpwings。第一步构建是在自己的thinkphp项目根目录下创建package.json；添加如下依赖{"name":"baijunyao/thinkphp-bjyadmin","version":"1.0.0","description":"WebLSSBlog","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":["WebLSS","Blog"],"author":"baijunyao","license":"Apache2","devDependencies":{"babel-preset-es2015":"^6.18.0","babel-preset-stage-2":"^6.18.0","browser-sync":"^2.14.0","gulp":"^3.9.1","gulp-babel":"^6.1.2","gulp-cleanhtml":"^1.0.1","gulp-concat":"^2.6.0","gulp-contrib-copy":"^0.1.2","gulp-decomment":"^0.1.3","gulp-imagemin":"^3.0.2","gulp-less":"^3.1.0","gulp-load-plugins":"^1.2.4","gulp-minify-css":"^1.2.4","gulp-plumber":"^1.1.0","一饮而尽重命名”：“^1.2.2”，“一饮而尽”："^2.3.2","gulp-uglify":"^2.0.0"}}第二步创建gulpfile.js文件/***WebLss创建于2018/8/3*/vargulp=需要（'gulp'）varsass=require（'gulp-sass'）varminifyCss=require（'gulp-minify-css'）varplumber=require（'gulp-plumber'）varbabel=require（'gulp-babel')varuglify=require('gulp-uglify')varclearnHtml=require('gulp-cleanhtml')varimagemin=require('gulp-imagemin')varcopy=require('gulp-contrib-copy')varbrowserSync=require('browser-sync').create()varreload=browserSync.reload//定义源代码目录和编译后的压缩目录varsrc='public/src'vardist='public/dist'varviewSrc='views/src'varviewDist='views/dist'//编译所有scss并压缩gulp.task('css',function(){gulp.src(src+'/**/*.scss').pipe(sass()).pipe(minifyCss()).pipe(gulp.dest(dist))})//编译所有js并压缩gulp.task('js',function(){gulp.src(src+'/**/*.js').pipe(plumber()).pipe(babel({presets:['es2015']})).pipe(uglify()).pipe(gulp.dest(dist))})//压缩所有htmlgulp.task('html',function(){gulp.src(src+'/**/*.+(html|ejs)').pipe(clearnHtml()).pipe(gulp.dest(dist))//编译视图文件gulp.src(viewSrc+'/**/*.+(html|ejs)').pipe(clearnHtml()).pipe(gulp.dest(viewDist))})//全部压缩imagegulp.task('image',function(){gulp.src([src+'/**/*.+(jpg|jpeg|png|gif|bmp)']).pipe(imagemin()).pipe(gulp.dest(dist))})//其他非编译文件直接copygulp.task('copy',function(){gulp.src(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html|ejs)').pipe(copy()).pipe(gulp.dest(dist))})//自动刷新gulp.task('server',function(){browserSync.init({proxy:'veekergdn.com',//指定代理urlnotify:false//刷新不弹出提示})//监听scss文件编译gulp.watch(src+'/**/*.scss',['css'])//监听其他非编译文件的变化直接复制gulp.watch(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)',['copy'])//监听html文件变化后刷新页面gulp.watch(src+'/**/*.js',['js']).on('change',reload)//监听html文件变化后刷新页面gulp.watch(src+'/**/*.+(html|ejs)',['html']).on('change',reload)//监听css文件变化后刷新页面gulp.watch(dist+'/**/*.css').on('change',reload)})//监听事件吞噬。task('default',['css','js','image','html','copy','server'])将gulpfile.js中的src和dist变量替换成自己项目的实际目录;将代理替换成自己本地的自定义域名；第三步：在命令行执行如下命令：安装各种包cnpminstall或者npminstall，不出意外的话运行gulpgulp；它会自动编译并打开浏览器；很简单；只需3个步骤；以项目为例进行说明：https://github.com/WebLss/Nod...运行gulp后，会进行以下操作；1、src目录下的图片、文件、html、scss会被编译到view_dist目录下2、开发阶段可以手动设置src/dist目录下的html页面，在`product`和`之间切换发展`。3.触发监控任务，有文件变化自动执行以上任务，并自动刷新浏览工具，这又是一次集成，终身受益，不只是终身受益；另一个项目也可以很容易地重用；意思估计大家都看出来了，为什么要用gulp编译压缩，无非就是有效利用空间资源和优化加载速度，优化网站性能，提升用户体验
