javascript – 使用gulp-useref和gulp-less编译LESS?

前端之家收集整理的这篇文章主要介绍了javascript – 使用gulp-useref和gulp-less编译LESS?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用gulp-useref插件编译我的LESS文件,但就好像gulp-less插件永远不会在管道中输出我的LESS文件的编译版本. LESS文件与其他CSS文件连接而不进行编译.

我尝试单独编译我​​的LESS,只使用gulp-less,它运行良好,但我不知道为什么它似乎与gulp-useref插件冲突.

这是我的gulpfile:

  1. var gulp = require('gulp');
  2. var rm = require('gulp-rimraf');
  3. var gulpif = require('gulp-if');
  4. var less = require('gulp-less');
  5. var cssmin = require('gulp-minify-css');
  6. var useref = require('gulp-useref');
  7.  
  8. gulp.task('clean',function () {
  9. return gulp.src(['public'])
  10. .pipe(rm({force: true}));
  11. });
  12.  
  13. gulp.task('refs',['clean'],function () {
  14. var assets = useref.assets({searchPath: '.'});
  15.  
  16. return gulp.src(['templates/**/*.html'])
  17. .pipe(assets)
  18. .pipe(gulpif('*.less',less()))
  19. .pipe(gulpif('*.css',cssmin()))
  20. .pipe(assets.restore())
  21. .pipe(gulpif('*.html',useref()))
  22. .pipe(gulp.dest('public/templates'));
  23. });

提前谢谢你的答案!

解决方法

据我所知,你是不可能的.

有:

  1. <!-- build:css css/combined.css -->
  2. <link href="css/one.css" rel="stylesheet">
  3. <link href="css/two.css" rel="stylesheet">
  4. <link rel="stylesheet/less" type="text/less" href="less/website.less" />
  5. <!-- endbuild -->

useref.assets为css / combined.css创建一个流,其中包含css / one.css,css / two.css less / website.less的内容.由于你的流的名称是css / combined.css,只有.pipe(gulpif(‘*.css’,cssmin()))匹配.

如果使用.pipe(gulpif(‘*.css’,less())),则较少的编译器会将所有三个文件内容编译为css / combined.css.

所以你可以使用:

  1. .pipe(gulpif('*.css',less()))
  2. .pipe(gulpif('*.css',cssmin()))

上面使用Less编译器编译你的* .css和* .less文件(因为Less可以编译css,结果可能符合预期)

猜你在找的JavaScript相关文章