7

gulp-userref プラグインを使用して LESS ファイルをコンパイルしようとしていますが、gulp-less プラグインがコンパイルされたバージョンの LESS ファイルをパイプラインに出力しないようです。LESS ファイルは、コンパイルされずに他の CSS ファイルと連結されます。

gulp-less のみを使用して LESS を個別にコンパイルしようとしましたが、うまく機能していますが、gulp-userref プラグインと競合しているように見える理由がわかりません。

これが私のgulpfileです：

var gulp = require('gulp');
var rm = require('gulp-rimraf');
var gulpif = require('gulp-if');
var less = require('gulp-less');
var cssmin = require('gulp-minify-css');
var useref = require('gulp-useref');

gulp.task('clean', function () {
    return gulp.src(['public'])
        .pipe(rm({force: true}));
});

gulp.task('refs', ['clean'], function () {
    var assets = useref.assets({searchPath: '.'});

    return gulp.src(['templates/**/*.html'])
        .pipe(assets)
        .pipe(gulpif('*.less', less()))
        .pipe(gulpif('*.css', cssmin()))
        .pipe(assets.restore())
        .pipe(gulpif('*.html', useref()))
        .pipe(gulp.dest('public/templates'));
});

回答ありがとうございます！

4

3 に答える 3

3

私が理解している限り、あなたがしようとしていることは不可能です。

と：

<!-- build:css css/combined.css -->
<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" />
<!-- endbuild -->

userref.assets は、css/one.css、css/two.css less/website.less のコンテンツを含む css/combined.css のストリームを作成します。あなたのストリームの名前が一致css/combined.cssするだけです。.pipe(gulpif('*.css', cssmin()))

を使用する .pipe(gulpif('*.css', less()))と、less コンパイラは 3 つのファイルすべての内容を css/combined.css にコンパイルします。

したがって、次を使用できます。

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

上記は *.css と *.less ファイルの両方を Less コンパイラでコンパイルします (Less は css をコンパイルできるため、結果は期待どおりになる可能性があります)。

于 2014-12-27T21:22:25.853 に答える
0 
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')); 
});

次に、gulp.task('sass') によって生成されたファイル all.css をインクルードします。

<link rel="stylesheet" href="css/all.css" >
于 2016-12-20T15:45:11.713 に答える
0

カスタムタイプを追加してみてください

var assets = useref.assets({
   searchPath: '.', 
   types: ['js', 'css', 'less']
});
于 2014-12-25T22:21:23.597 に答える