gulp教程之gulp-less

Ooo_My_God发表于 分类:构建工具 阅读(24742) 评论(33)

简介:

使用gulp-less插件将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。

1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

2、本地安装gulp-less

2.1、github:https://github.com/plus3network/gulp-less

2.3、安装:命令提示符执行 cnpm install gulp-less --save-dev

2.4、注意:没有安装cnpm请使用 npm install gulp-less --save-dev 什么是cnpm,如何安装?

2.5、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

3、配置gulpfile.js

3.1、基本使用

3.2、编译多个less文件

3.3、匹配符“!”,“*”,“**”,“{}”

3.4、调用多模块(编译less后压缩css)

3.5、当less有各种引入关系时,编译后不容易找到对应less文件,所以需要生成sourcemap文件,方便修改

4、执行任务

4.1、命令提示符执行:gulp testLess

5、监听事件(自动编译less)

5.1、若每修改一次less,就要手动执行任务,显然是不合理的,所以当有less文件发生改变时使其自动编译

5.2、启动监听事件:命令提示符执行 gulp testWatch

5.3、注意:该命令提示符执行需处于打开状态,关闭后监听事件结束(Ctrl + C 或右上)

6、异常处理

6.1、当编译less时出现语法错误或者其他异常,会终止watch事件,通常需要查看命令提示符窗口才能知道,这并不是我们所希望的,所以我们需要处理出现异常并不终止watch事件(gulp-plumber),并提示我们出现了错误(gulp-notify)。

7、结束语

7.1、本文有任何错误,或有任何疑问,欢迎留言说明

下载附件

如果觉得我的文章对您有用,请随意打赏。您的支持将是我继续创作的动力! ¥ 打赏支持 ¥

本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

http://www.ydcss.com/archives/34

相关推荐

评论

网友最新评论 (33)

  1. 如果我引入的LESS有好几个,其中一个(如:index-1.less通过@important 引入余下的几个less。 在生成的CSS文件中,只要生成 一个对应的index-1.css 文件呢? 这样的通过什么方式卡才能实现呢?

    王先森 05-24 10:31 回复
    • gulp.src([‘./src/less/index-1.less’, ‘!./src/less/important/**/*.less’]
      “!”:排除important里面的less不生成css

      Ooo_My_God 05-25 11:45
  2. A really good answer, full of raitnoality!

    Allayna 06-15 14:52 回复
  3. 为啥不弄个从命名。。。其他的都很好,配置成功

    小秃驴 06-20 14:18 回复
  4. //less语法编译
    gulp.task(‘less’, function() {
    var lessSrc = [‘src/**/*.less’, ‘!src/vendor/**/*.less’,’!src/**/*.min.less’],
    lessDst = ‘dist/’;
    gulp.src(lessSrc)
    .pipe(plumber())
    .pipe(less())
    .pipe(rename({ suffix: ‘.min’ }))
    .pipe(gulp.dest(‘src/’));
    });

    Plumber found unhandled error:
    Error in plugin ‘gulp-less’
    Message:
    Unrecognised input in file D:\phpStudy\WWW\project\src\index.less line no. 1
    Details:
    type: Parse
    filename: D:\phpStudy\WWW\project\src\index.less
    index: 0
    line: 1
    callLine: NaN
    callExtract: undefined
    column: 0
    extract: ,@#111,.nn{color: @;}
    lineNumber: 1
    fileName: D:\phpStudy\WWW\project\src\index.less

    hdl 06-30 17:11 回复
    • 不知道为什么会出错

      hdl 06-30 17:12
  5. 比官方文档清楚多了,谢谢!

    冯嘉楠 08-24 15:50 回复
  6. 什么时候用gulp编译sass,是页面结构的样式写完之后呢,还是边写css边编译sass,每次都要在node里执行一次吗

    刘婵娟 08-24 19:32 回复
    • 是你对sass文件进行修改,然后进行保存后,监控会发现文件被修改,会进行编译一次的

      黄帝e 09-16 18:16
    • 边写边编译,用watch监听事件,就可以。

      刘娜 11-01 15:32
  7. 什么时候编译sass呢

    刘婵娟 08-24 19:33 回复
  8. 还可以加一个雪碧图模块

    路小雨 09-07 10:37 回复
  9. 有没有node-sass的教程嘞

    幻世魔方 10-21 11:00 回复
  10. 写的挺干净的,不会拖泥带水

    陈先友友友 12-08 21:11 回复
输入关键字