正文
用gulp把less文件编译成css文件
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
第一次使用gulp构建工具,使用gulp将.less文件编译成.css文件并输出。根据视频做了笔记。提供新手和自己以后做参考。
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<title>less</title>
</head>
<body>
<div class="box">
<span>我是内容</span>
</div>
</body>
</html>
styles.less文件
@base:pink;
body{
background-color: @base;
}
.border-top{
border-top: 2px solid #000;
}
.box{
width: 200px;
height: 200px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
.border-top;
}
创建package.json文件
$ npm init
安装插件 gulp 和gulp-less
$ npm install gulp gulp-less --save-dev
注:先在全局安装gulp,安装过的忽略此步骤。否则先全局安装。mac用户建议在npm前加上sudo,避免安装不上的情况
$ npm install gulp -g
新建配置文件gulpfile.js,放在根目录
// 导入插件
var less = require('gulp-less');
var path = require('path');
var gulp = require('gulp');
// 配置打包信息
gulp.task('less',function(){
// 找到less文件
return gulp.src('./styles.less')
// 用gulp-less做处理
.pipe(less({
paths:[path.join(__dirname,'less','includes')]
}))
// 输出到当前目录下
.pipe(gulp.dest('./'))
})
// 定义默认任务
gulp.task('default',['less'])
然后再控制台中输入gulp命令
$ gulp
执行完毕截图
最终生成的styles.css为:
body {
background-color: pink;
}
.border-top {
border-top: 2px solid #000;
}
.box {
width: 200px;
height: 200px;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid #000;
}