我还是Gulp的新手,并且只在一个示例项目上使用过一次,但那是几个月前的事。现在我正在尝试在一个新的测试应用程序中使用它来工作。目前我所要做的就是使用styles.less和main.less编译我的Bootstrap.less以制作CSS文件。
我通过npm init来设置package.json文件。然后我将带有以下代码的gulpfile.js添加到我的项目的根目录中。
var gulp = require('gulp');
var uglify = require('gulp-uglify');
// Compiles LESS > CSS
gulp.task('build-less', function () {
return gulp.src('./Content/LESS/styles.less')
.pipe(less())
.pipe(gulp.dest('./Content'));
});
我还运行了以下所有npm命令。
npm install gulp --save-dev
npm install gulp-concat --save-dev
npm install gulp-uglify --save-dev
npm install del --save-dev
我还创建了一个Content \ LESS文件夹,其中包含Bootstrap.less文件以及我的自定义文件。
这是我的styles.less文件。
@import "Bootstrap/bootstrap";
@import "main";
现在这就是我的main.less文件中的所有内容。
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
当我在Visual Studio 2015中打开Task Runner Explorer时,我希望看到“无构建”任务,但我没有看到它。当我点击默认值时,我得到一个“代码1终止进程”。这可能是正确的,因为我没有“默认”任务。
这是我的文件夹结构。我正在尝试将已编译的.css文件转到Content文件夹。
我不应该看到我的任务命名为“无构建”吗?我是否必须执行运行“无构建”任务的“默认”任务?
更新
答案 0 :(得分:1)
只需删除任务中的回复:
gulp.task('build-less', function () {
gulp.src('./Content/LESS/styles.less')
.pipe(less())
.pipe(gulp.dest('./Content'));
在您更新的问题上,问题是您尚未定义less
。您可以通过安装gulp-less
然后在您的gulpfile中执行此操作:
var less = require('gulp-less')