我正在使用更少和Grunt,并且正在努力.
我的作品少了.当我跑:
lessc public/less/myapp.less
我得到工作输出没有错误.我所有的少,包括包括,在公共/更少,BTW.这是我的gulpfile:
var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); gulp.task('compileLess', function () { gulp .src('./public/less/*') .pipe(less({ paths: ['./public/less'], // Search paths for imports filename: 'myapp.less' })) .pipe(gulp.dest('./public/css')); }); // The default task (called when you run `gulp`) gulp.task('default', function() { gulp.run('compileLess'); // Watch files and run tasks if they change gulp.watch('./public/less/*.less', function(event) { gulp.run('less'); }); });
当我跑了一口气,我得到:
~/Documents/myapp: gulp [gulp] Using file /Users/me/Documents/myapp/gulpfile.js [gulp] Working directory changed to /Users/me/Documents/myapp [gulp] Running 'default'... [gulp] Running 'compileLess'... [gulp] Finished 'compileLess' in 11 ms [gulp] Finished 'default' in 41 ms stream.js:94 throw er; // Unhandled stream error in pipe. ^ Error: variable @brightblue is undefined
@brightblue是在myapp.less开头导入的文件中定义的.
@import "./colors.less"; body { background-color: @brightblue; }
为什么没有吞下我的包裹?为less指定'paths'选项应该可以使它工作,但它没有修复它.
调试这个的好方法是什么?例如,我没有行号.
有没有办法让gulp工作?
mikemaccana.. 35
所不同的是什么,我编译:
当我跑步时lessc myapp.less
,我正在编译主要较少的文件和它的依赖项
当我gulp
使用上面的gulp文件运行时,我正在单独编译每个较少的文件,因为gulp.src *.less
不是myapp.less
.由于这些较少的文件只是从较少的主文件加载,因此它们所依赖的东西没有@imports(因为myapp.less依赖于它们).例如,没有必要在每个单独的文件中导入'theme.less',而不是先在myapp.less中导入它.
这是工作版本:
// Run 'gulp' to do the important stuff var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); var path = require('path'); gulp.task('less', function () { gulp .src('./public/less/myapp.less') // This was the line that needed fixing .pipe(less({ paths: ['public/less'] })) .pipe(prefixer('last 2 versions', 'ie 9')) .pipe(gulp.dest('./public/css')); }); // The default task (called when you run `gulp`) gulp.task('default', function() { gulp.run('less'); // Watch files and run tasks if they change gulp.watch('./public/less/*.less', function(event) { gulp.run('less'); }); });
编辑:请参阅下面的@noducks答案,了解适用于最新 gulp的改进版本.
注意到gulp.run
那里出现了几个弃用警告.这修复了它们,并添加了一些错误处理.我的目录结构略有不同.
'use strict'; var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); var gutil = require('gulp-util'); var plumber = require('gulp-plumber'); gulp.task('less', function() { gulp .src('./less/app.less') .pipe(plumber(function(error) { gutil.log(gutil.colors.red(error.message)); gutil.beep(); this.emit('end'); })) .pipe(less()) .pipe(prefixer('last 2 versions', 'ie 9')) .pipe(gulp.dest('./css')); }); gulp.task('less:watch', function(){ gulp.watch(['./less/*.less', './less/module/*.less'], ['less']); }); gulp.task('default', ['less','less:watch']);
所不同的是什么,我编译:
当我跑步时lessc myapp.less
,我正在编译主要较少的文件和它的依赖项
当我gulp
使用上面的gulp文件运行时,我正在单独编译每个较少的文件,因为gulp.src *.less
不是myapp.less
.由于这些较少的文件只是从较少的主文件加载,因此它们所依赖的东西没有@imports(因为myapp.less依赖于它们).例如,没有必要在每个单独的文件中导入'theme.less',而不是先在myapp.less中导入它.
这是工作版本:
// Run 'gulp' to do the important stuff var gulp = require('gulp'); var prefixer = require('gulp-autoprefixer'); var less = require('gulp-less'); var path = require('path'); gulp.task('less', function () { gulp .src('./public/less/myapp.less') // This was the line that needed fixing .pipe(less({ paths: ['public/less'] })) .pipe(prefixer('last 2 versions', 'ie 9')) .pipe(gulp.dest('./public/css')); }); // The default task (called when you run `gulp`) gulp.task('default', function() { gulp.run('less'); // Watch files and run tasks if they change gulp.watch('./public/less/*.less', function(event) { gulp.run('less'); }); });
编辑:请参阅下面的@noducks答案,了解适用于最新 gulp的改进版本.