一,缘起
前端发展到今天,ui组件库比比皆是,但为了提升下自我的业务及基础能力,还是决定造个ui框架轮子,顺带把工作的常用的一些整合下,那也是一种沉淀与分享。
然后针对 ui 组件的写法,选择less,然后采用gulp来编译及输出,也许大家会疑惑,为什么不用webpack,为了与单位项目进行无缝切合吧,忘记说了,我们现在的项目是卫星项目(很高端的),为了调试方便,采用了seaJS来进行模块化的。这个H5项目没有采用线下流行的webpack。
二,开始
1、支持nodeJS环境
npm init
生成package.json。
备注:因为我这仅仅是开发环境的,所以安装包的时候,都采用了 –save-dev 。
2、安装 gulp
npm install --save-dev gulp
3、安装gulp-less
npm install --save-dev gulp-less
在gulpfile.js中写入
var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less', function(){ gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')) });
执行结果如下
图片描述
仔细看居然有报错,百度了下,是gulp4.0 带来的。
重新改写代码:
var gulp = require(‘gulp’); var less = require(‘gulp-less’);
gulp.task(‘less’, function(done){gulp.src('less/*.less') .pipe(less()) .pipe(gulp.dest('dist/css')) done() });
妥妥的好了。
4、安装gulp-concat
npm install --save-dev gulp-concat
在gulpfile.js中写入
var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less', function(done){ gulp.src('less/*.less') .pipe(concat('style.css')) .pipe(less()) .pipe(gulp.dest('dist/css')) done(); });
5、安装gulp-minify-css
npm install --save-dev gulp-minify-css
在gulpfile.js 中写入
gulp.task(‘less’,function(done){
gulp.src('less/*.less') .pipe(concat('style.css')) .pipe(minifyCss()) .pipe(gulp.dest('dist/css')); done(); });
6、安装gulp-rename
npm install --save-dev gulp-rename
在gulpfile.js 中写入
gulp.task(‘less’,function(done){
gulp.src('less/*.less') .pipe(concat('style.css')) .pipe(minifyCss()) .pipe(rename('style.min.css')) .pipe(gulp.dest('dist/css')); done(); });
7、安装 gulp-liverelaod 自动刷新
npm install --save-dev gulp-livereload
在 gulpfile.js 中写入
gulp.task(‘watch’, function(){
livereload.listen(); gulp.watch('less/*.less', gulp.series('less')); });
8、提取 输入,输出文件夹
npm install --save-dev path
在 gulpfile.js 中写入
var path = require(‘path’); var basePath = path.resolve(__dirname,
”);//-项目路径 var src = basePath + ‘/less/*.less’,output = basePath + '/dist/css';
9、安装 gulp-clean 清空文件夹
npm install --save-dev gulp-clean
在 gulpfile.js 中写入
gulp.task(‘clean’, function(done){
return gulp.src(output, {read: false}) .pipe(clean({force: true})); });
10、合并各个任务
在 gulpfile.js 中写入
gulp.task(‘dev’, gulp.series(‘clean’, ‘less’, ‘watch’, function (done)
{done(); }));
三、总结
一个基于gulp的less编译环境已经完成了,通过watch可以监听到less中变化,并实时进行编译、合并、压缩。
后期已经将 js以及html的一些也加进去,应该分dev版本与pro版本。