使用gulp-useref和gulp-less编译LESS？

作者: 特狼普
发布时间: 2024-12-11 08:21:14 (2月前)
转自：

4 条回复

0#
回复此人
坚挺的阿袁 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 据我所知，你是不可能的。 </p> <P> 有： </p> <pre> <code>  <link href="css/one.css" rel="stylesheet"> <link href="css/two.css" rel="stylesheet"> <link rel="stylesheet/less" type="text/less" href="less/website.less" />  </code> </pre> <P> useref.assets为css / combined.css创建一个流，其中包含css / one.css，css / two.css less / website.less的内容。因为您的流的名称是 <code> css/combined.css </code> 只有 <code> .pipe(gulpif('*.css', cssmin())) </code> 火柴。 </p> <P> 如果你使用 <code> .pipe(gulpif('*.css', less())) </code> ，编译器会将所有三个文件的内容编译成css / combined.css。 </p> <P> 所以你可以使用： </p> <pre> <code> .pipe(gulpif('*.css', less())) .pipe(gulpif('*.css', cssmin())) </code> </pre> <P> 上面使用Less编译器编译你的* .css和* .less文件（因为Less可以编译css，结果可能符合预期） </p> </DIV>

编辑
1#
回复此人
一生流水 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 尝试添加自定义类型 </p> <pre> <code> var assets = useref.assets({ searchPath: '.', types: ['js', 'css', 'less'] }); </code> </pre> </DIV>

编辑
2#
回复此人
苞米地里的蒙面妖 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> var gulp = require('gulp'); var sass = require('gulp-sass'); var concat= require('gulp-concat'); var minifyCss = require('gulp-cssnano'); var uglify = require('gulp-uglify'); var pump = require('pump'); var useref = require('gulp-useref'); gulp.task('sass', function(){ gulp.src(['css/**/*.scss' ,'css/**/*.css' ]) .pipe(sass()) // Using gulp-sass .pipe(minifyCss()) .pipe(concat('all.css')) .pipe(gulp.dest('build/css')) }); gulp.task('compressJS', function (cb) { return gulp.src(['lib/*.js']) .pipe(concat('concat.js')) .pipe(uglify()) .pipe(gulp.dest('build/js')) }); var gulp = require('gulp'), useref = require('gulp-useref'); gulp.task('default', ['sass'] , function () { //薪械屑邪 return gulp.src('*.html') .pipe(useref()) .pipe(gulp.dest('dist')); }); </code> </pre> <P> 然后包含由gulp.task（'sass'）生成的文件all.css </p> <pre> <code> <link rel="stylesheet" href="css/all.css" > </code> </pre> </DIV>

编辑

登录后才能参与评论