Gulp + Less + Minify CSS error: concat multiple Less files?
Gulp + Less + Minify CSS error: concat multiple Less files?
如何连接多个 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())
})
我会得到：
Potentially unhandled rejection [2] No matching definition was found
for .rotate (@deg: 90) in file /var/www/.../style.less line no. 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 less 文件并导入所有 less 文件。
因此创建一个名为 master.less 的文件。然后通过添加以下指令编辑此文件：
@import "functions.less";
@import "styles.less";
就是这样。然后 gulp-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}))
});
如何连接多个 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())
})
我会得到：
Potentially unhandled rejection [2] No matching definition was found for
.rotate (@deg: 90)in file /var/www/.../style.less line no. 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 less 文件并导入所有 less 文件。
因此创建一个名为 master.less 的文件。然后通过添加以下指令编辑此文件：
@import "functions.less";
@import "styles.less";
就是这样。然后 gulp-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}))
});