首先，由于前端发展到今天，ui组件库比比皆是，但是为了提升自己的业务和基础能力，决定自己搭建一个ui框架轮子，顺便把常用的用上一些整合，也是一种沉淀和分享。然后ui组件的写法，选择less，然后用gulp编译输出。也许你会疑惑为什么不使用webpack，才能与单元项目无缝衔接。忘了说了，我们现在的项目是卫星项目（很High-end），为了调试方便，使用seaJS进行模块化。这个H5项目没有使用现在流行的离线webpack。二、启动1、支持nodeJS环境npminit生成package.json。备注：因为我只是在开发环境，安装包的时候用了--save-dev。2.安装gulpnpminstall--save-devgulp3。安装gulp-lessnpminstall--save-devgulp-less写vargulp=require('gulp');varless=require('gulpless');gulp.task('less',function(){gulp.src('less/*.less').pipe(less()).pipe(gulp.dest('dist/css'))});执行结果如下图所示。仔细一看，是有错误的。百度一下，是gulp4.0带来的。重写代码：vargulp=require('gulp');varless=require('gulp-less');gulp.task('less',function(done){gulp.src('less/*.less').pipe(less()).pipe(gulp.dest('dist/css'))完成()});4.安装gulp-concatnpminstall--save-devgulp-concatwritevargulp=require('gulp');varless=require('gulp-less');gulp.task('less',function(done){gulp.src('less/*.less').pipe(concat('style.css')).pipe(less()).pipe(gulp.dest('dist/css'))完成();});5.安装gulp-minify-cssnpminstall--save-devgulp-minify-css写入gulp.task('less',function(done){gulp.src('less/*.less').pipe(concat('style.css')).pipe(minifyCss()).pipe(gulp.dest('dist/css'));done();});6.安装gulp-renamenpminstall--save-devgulp-rename并在gulpfile.js(concat('style.css')).pipe(minifyCss()).pipe(rename('style.min.css')).pipe(gulp.dest('dist/css'));done();});7.安装gulp-liverelaod自动刷新npminstall--save-devgulp-livereload写入gulp.task('watch',function(){livereload.listen();gulp.watch('less/*.less',gulp.series('less'));});8.解压输入输出文件夹npminstall--save-dev路径中在gulpfile.js中写入varpath=require('path');varbasePath=path.resolve(__dirname,'');//-项目路径varsrc=basePath+'/less/*.less',output=basePath+'/dist/css';9.安装gulp-clean并清除文件夹npminstall--save-devgulp-clean在gulpfile.js.src(output,{read:false}).pipe(clean({force:true}));});10.合并每个任务，在gulpfile.js中写入gulp.task('dev',gulp.series('clean','less','watch',function(done){done();}));3.总结一个基于gulp的less编译环境已经完成，可以通过watch监控less中的变化，实时编译、合并、压缩。后期加入了一些js和html。应该分为dev版和pro版。
