Gulp + Less +缩小CSS错误：连续多个Less文件？

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Gulp + Less +缩小CSS错误：连续多个Less文件？相关的知识，希望对你有一定的参考价值。

你如何连接多个Less文件？

例如，我有functions.less以及我想在style.less中使用它们的所有函数：

functions.less：

.rotate (@deg) {
    -webkit-transform: rotate(@deg * 1deg);
    -moz-transform: rotate(@deg * 1deg);
    -ms-transform: rotate(@deg * 1deg);
    -o-transform: rotate(@deg * 1deg);
}

style.less：

.button {
    .rotate (@deg: 90);
}

gulpfile.js：

// Task to compile less.
gulp.task('compile-less', function () {
  return gulp.src([
    'stylesheets/*.less'
  ])
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(concat('compiled.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('stylesheets'))
})

// Task to minify css.
gulp.task('minify-css', function () {
  return gulp.src([
    'stylesheets/compiled.css'
  ])
  .pipe(sourcemaps.init())
  .pipe(cleanCSS({debug: true}))
  .pipe(concat('bundle.min.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist'))
  .pipe(livereload())
})

我会得到：

可能未处理的拒绝[2]在文件/var/www/.../style.less line no中找不到.rotate (@deg: 90)的匹配定义。 107

有任何想法吗？

编辑：

我有时候使用@import时会出现这个错误：

undefined:1



SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at loadInputSourceMapFromLocalUri (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:177:15)
    at extractInputSourceMapFrom (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:116:17)
    at fetchAndApplySourceMap (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:79:10)
    at doApplySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:57:14)
    at applySourceMaps (/var/www/.../node_modules/clean-css/lib/reader/apply-source-maps.js:33:5)
    at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:25:12)
    at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25)
    at Object.callback (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:324:14)
    at doInlineImports (/var/www/.../node_modules/clean-css/lib/reader/read-sources.js:200:25

编辑2：

显然是导致问题的是gulp-clean-css：

// CSS compilation.
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var concatCss = require('gulp-concat-css') // optional

gulp.task('minify-css', function () {
  return gulp.src([
    'stylesheets/style.css'
  ])
  .pipe(sourcemaps.init())
  // .pipe(cleanCSS({debug: true}))
  .pipe(concat('bundle.min.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist'))
  .pipe(livereload())
})

如果我删除该行没有错误，但如果我这样做，我不会再缩小css。

有任何想法吗？

编辑3：

gulpfile中的全部内容：

var gulp = require('gulp')
var sourcemaps = require('gulp-sourcemaps')
var livereload = require('gulp-livereload')

// javascript development.
var browserify = require('browserify')
var babelify = require('babelify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')

// Less compilation.
var less = require('gulp-less')

// CSS compilation.
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var concatCss = require('gulp-concat-css') // optional

// html compilation.
var htmlmin = require('gulp-htmlmin')
var path = require('path')
var foreach = require('gulp-foreach')

// Task to compile js.
gulp.task('compile-js', function () {
  return browserify({
    extensions: ['.js', '.jsx'],
    entries:  ['./javascripts/app.js'],
    debug: true
  })
  .transform('babelify', {
    presets: ['es2015', 'es2017', 'react'],
    plugins: [

      // Turn async functions into ES2015 generators
      // https://babeljs.io/docs/plugins/transform-async-to-generator/
      "transform-async-to-generator"
    ]
  })
  .bundle()
  .pipe(source('bundle.min.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init())
  .pipe(uglify())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist'))
  .pipe(livereload())
})

// Task to compile less.
gulp.task('compile-less', function () {
  return gulp.src([
    'stylesheets/*.less'
  ])
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('stylesheets'))
})

// Task to minify css.
gulp.task('minify-css', function () {
  return gulp.src([
    'stylesheets/style.css'
  ])
  .pipe(sourcemaps.init())
  .pipe(cleanCSS({debug: true}))
  .pipe(concat('bundle.min.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('dist'))
  .pipe(livereload())
})

// Loop each html.
// https://www.npmjs.com/package/gulp-foreach
gulp.task('minify-html', function () {
  return gulp.src('*.html')
    .pipe(foreach(function(stream, file){
      // Get the filename.
      // https://github.com/mariusGundersen/gulp-flatMap/issues/4
      // https://nodejs.org/api/path.html#path_path_basename_p_ext
      var name = path.basename(file.path)
      return stream
        .pipe(htmlmin({
          collapseWhitespace: true,
          removeComments: true
        }))
        .pipe(concat('min.' + name))
    }))
    .pipe(gulp.dest(''))
})

// Task to copy fonts to dist.
gulp.task('compile-fonts', function() {
  return gulp.src([
    'fonts/*',
    'node_modules/material-design-icons/iconfont/MaterialIcons-Regular.*',
    'node_modules/foundation-icon-fonts/foundation-icons.*',
  ])
  .pipe(gulp.dest('dist/fonts/'))
})

// Task to copy images to dist.
gulp.task('compile-images', function() {
  return gulp.src([
    'images/*',
    'node_modules/jquery-ui-bundle/images/*',
  ])
  .pipe(gulp.dest('dist/images/'))
})

// Task to watch less & css changes.
gulp.task('watch', function () {
  gulp.watch('javascripts/*.js', ['compile-js'])  // Watch all the .js files, then run the js task
  gulp.watch('stylesheets/*.less', ['compile-less'])  // Watch all the .less files, then run the less task
  gulp.watch('stylesheets/*.css', ['minify-css'])  // Watch all the .css files, then run the css task
  gulp.watch('stylesheets/*.css', ['compile-fonts'])  // Watch all the .css files, then run the font task
  gulp.watch('stylesheets/*.css', ['compile-images'])  // Watch all the .css files, then run the image task
})

// Development:
// Task when running `gulp` from terminal.
gulp.task('default', ['watch'])

// Production:
// Task when running `gulp build` from terminal.
gulp.task('build', ['minify-css', 'compile-fonts', 'compile-js', 'minify-html'])
答案

您需要做的就是创建一个master少文件并导入所有较少的文件。

因此，创建一个名为master.less的文件。然后通过添加以下指令编辑此文件：

 @import "functions.less";
 @import "styles.less";

就是这样。然后不喝酒就剩下了!! :)它编译一个css文件中的所有代码。

我对你的任务的建议是（这是我项目启动时的代码）：

    var gulp = require('gulp'),
        postcss = require('gulp-postcss'),
        less = require('gulp-less'),
        autoprefixer = require('autoprefixer');
        concat = require('gulp-concat'),
        cssnano = require('gulp-cssnano'),
        browserSync = require('browser-sync');


    gulp.task('less', function () {
        var processors = [
            autoprefixer,
            cssnano
        ];
        gulp.src(config.paths.less.src)
            .pipe(less())
            .pipe(postcss(processors))
            .pipe(concat('bundle.min.css'))
            .pipe(cssnano())
            .pipe(gulp.dest('dist'))
            .pipe(browserSync.reload({stream:true}))
    });

以上是关于Gulp + Less +缩小CSS错误：连续多个Less文件？的主要内容，如果未能解决你的问题，请参考以下文章

gulp教程之gulp-less

使用 gulp 编译 LESS

gulp-less使用

gulp插件的使用方法

gulp 插件之 gulp-less，gulp-sass 和 gulp-sourcemaps

Gulp 开发 HTML 静态页面和 Less 实时更新