使用 gulp 编译 LESS

访问论坛获取帮助

请务必理解如下章节后阅读此章节：

  1. 安装 Node 和 gulp
  2. 使用 gulp 压缩 JS

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护。

安装

  1. npm install gulp-less

基本用法

你可以 下载所有示例代码 - 或在线查看代码

  1. // 获取 gulp
  2. var gulp = require('gulp')
  3. // 获取 gulp-less 模块
  4. var less = require('gulp-less')
  6. // 编译less
  7. // 在命令行输入 gulp less 启动此任务
  8. gulp.task('less', function () {
  9.     // 1. 找到 less 文件
  10.     gulp.src('less/**.less')
  11.     // 2. 编译为css
  12.         .pipe(less())
  13.     // 3. 另存文件
  14.         .pipe(gulp.dest('dist/css'))
  15. });
  17. // 在命令行使用 gulp auto 启动此任务
  18. gulp.task('auto', function () {
  19.     // 监听文件修改，当文件被修改则执行 less 任务
  20.     gulp.watch('less/**.less', ['less'])
  21. })
  23. // 使用 gulp.task('default') 定义默认任务
  24. // 在命令行使用 gulp 启动 less 任务和 auto 任务
  25. gulp.task('default', ['less', 'auto'])

你可以访问 gulp-less 以查看更多用法。

LESS 代码和编译后的CSS代码

less/a.less

  1. .less{
  2.     a{
  3.         color:pink;
  4.     }
  5. }

less/import.less

  1. @import "a.less";
  2. .import{
  3.     a{
  4.         color:red;
  5.     }
  6. }

less/a.css

  1. .less a {
  2.   color: pink;
  3. }

less/import.css

  1. .less a {
  2.   color: pink;
  3. }
  4. .import a{
  5.   color: red;
  6. }

访问论坛获取帮助

接着阅读：使用 gulp 编译 Sass