Question

less文件编译css，css文件为什么是空的呢？

用webstorm自动编译的less文件下有css文件，但是文件为空。用命令行编译时，也出现css文件，也一样为空，为什么呢？该怎么设置？lessc -v 为lessc 2.7.3 (Less Compiler) [JavaScript]，node -v 为v8.9.3 , npm -v 为5.5.1.命令行使用node C:\npm\node_modules\less\bin\lessc d:/2.less > d:/2.css，和C:\npm\lessc.cmd e:/2.less > e:/2.css。谢谢

Answer 1

有些软件有插件可以实时编译，比如sublime。

我用的是gulp，方便前端自动化。你可以网上搜一下，用起来啊很方便。

举个例子：

var gulp = require('gulp');
var less = require('gulp-less');
var notify = require('gulp-notify');
var plumber = require('gulp-plumber');
var concat = require('gulp-concat');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var lessPath = './src/less/*.less';
var lessMainPath = './src/less/main.less';
var lessDist = './src/css/';
var cssPath = './src/css/*.css';
var jsSrcPath = './src/js/*.js';
var distPath = './dist/';
//编译less
gulp.task('lessCompile', function() {
gulp.src([lessMainPath])
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//监控less文件变化
gulp.task('watchLess', function() {
gulp.watch(lessPath, ['lessCompile']);
});
//css合并压缩加前缀
gulp.task('handleCss', function() {
return gulp.src(cssPath)
.pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers: ['last 5 versions', 'Android >= 4.0'],
cascade: true,
remove: false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//监控css文件变化
gulp.task('watchCss', function() {
gulp.watch(cssPath, ['handleCss']);
});