Gulp + Less + Minify CSS 错误:连接多个 Less 文件

Question

你如何连接多个更少的文件？

例如，我已经functions.less了我想在style.less中使用的所有功能：

函数.less：

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

风格.无：

.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 第 107 行中的.rotate (@deg: 90)

有什么想法吗？

编辑：

当我使用@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'])

Answer 1

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

因此，例如，创建一个名为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}))
    });