第一次使用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; }