• 使用 gulp 编译 LESS
    • 安装
    • 基本用法
    • LESS 代码和编译后的CSS代码

    使用 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')
    5. // 编译less
    6. // 在命令行输入 gulp less 启动此任务
    7. gulp.task('less', function () {
    8. // 1. 找到 less 文件
    9. gulp.src('less/**.less')
    10. // 2. 编译为css
    11. .pipe(less())
    12. // 3. 另存文件
    13. .pipe(gulp.dest('dist/css'))
    14. });
    15. // 在命令行使用 gulp auto 启动此任务
    16. gulp.task('auto', function () {
    17. // 监听文件修改,当文件被修改则执行 less 任务
    18. gulp.watch('less/**.less', ['less'])
    19. })
    20. // 使用 gulp.task('default') 定义默认任务
    21. // 在命令行使用 gulp 启动 less 任务和 auto 任务
    22. 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