使用gulp將bootstrap.less文件編譯到主bootstrap.css中？

Question

我真的很喜歡gulpjs這是我選擇的任務管理器，但是我希望我幾個月前就知道任務管理器，並且主要是爲了支持而進入gruntjs。對於gulpjs來說，很難找到關於具體事物的信息。

我的問題是如何設置我的gulpfile.js，以便我可以編輯引導文件，尤其是variables.less。我確實安裝了「gulp-less」，並按如下所示實施。

var less = require('gulp-less'), 
    path = require('path'); 

gulp.task('less', function() { 
    gulp.src('./source/less/variables.less') 
    .pipe(less()) 
    .pipe(gulp.dest('./source/css/bootstrap.css')); 
}); 

運行後出現以下錯誤gulp less。

events.js:72 throw er; // Unhandled 'error' event ^
Error: EEXIST, mkdir 'C:\wamp\www\myproj\source\css\bootstrap.css'

我不認爲我的青菜任務代碼的設置是否正確，我一飲而盡noobie，但我已經嘗試了多種組合，是的，我沒有使用來自「gulp-less」文檔，代碼示例中我使用的是我想要完成的最簡潔明確的代碼。

編輯：我發現在谷歌這樣一些好的關鍵字，我發現這個最近的一些帖子，這裏是一個Starting Gulp with Gulp-less maintain folder structure似乎並不像有一個很好的答案生病了閱讀起來。

附加：我從文檔使用的代碼的時候忘了，我得到alerts.less

gulp.task('less', function() { 
    gulp.src('./source/less/*.less') 
    .pipe(less({ 
     paths: [ path.join(__dirname, 'less', 'includes') ] 
    })) 
    .pipe(gulp.dest('./source/css')); 
}); 

錯誤

stream.js:94
throw er; // Unhandled stream error in pipe.
^
[gulp] Error in plugin 'gulp-less': variable @alert-padding is undefined in file C:\wamp\www\myproj\source\less\alerts.less line no. 10

錯誤甚至當我刪除了這一行，它只是不斷髮現新的錯誤。

編輯：文檔確實說了，下面的但對我來說沒有意義，它是說應該有一個錯誤，如果有這樣的混淆，我會按照他們提供的指導進行嘗試。

錯誤處理

默認情況下，一飲而盡任務將失敗，當錯誤發生的所有流將停止。要改變這種行爲，請查看這裏的錯誤處理文檔

Answer 1

我試圖編譯Bootstrap CSS時遇到了同樣的問題。我的簡化的解決方案最終看起來像：

// Compiles LESS > CSS 
gulp.task('build-less', function(){ 
    return gulp.src('styles.less') 
     .pipe(less()) 
     .pipe(gulp.dest('./source/css')); 
}); 

和我styles.less文件包含導入到bootstrap.less。我注意到如果引導文件較少被包含在gulp.src()路徑中，那就會出錯。

我styles.less：

@import "../lib/bootstrap/less/bootstrap.less"; 
@body-bg:  red; // test background color 

Answer 2

我得到它的工作，我不知道sourceLess需要爲bootstrap.less，這是主要的問題。

var sourceLess = './source/less'; 
var targetCss = './source/css'; 

// Compile Our Less 
gulp.task('less', function() { 
    return gulp.src([sourceLess + '/bootstrap.less']) 
     .pipe(less()) 
     .pipe(gulp.dest(targetCss)); 
}); 

Answer 3

gulp less plugin只是將less轉換爲css。 在Bootstrap中，索引減少的文件是Bootstrap.less，它依次導入所有其他與Bootstrap相關的較少文件。所以你所需要的就是找到Bootstrap.less。如果你想要自己的一組變量，只需創建另一個較少的文件（my-custom-bs.less）並在Bootstrap.less之後導入無變量文件（假設所有引導較少的文件位於名爲bootstrap的文件夾中）：

@import "bootstrap/less/bootstrap.less"; 
@import "my-custom-bs-variables.less"; 

然後在你一飲而盡的任務，只是信號源僅此文件：

gulp.task('build-less', function(){ 
return gulp.src('my-custom-bs.less') 
    .pipe(less()) 
    .pipe(gulp.dest('./source/css')); 
}); 

Answer 4

我對這個問題的解決方案是創建自己的bootstrap.less副本以外的供應商文件夾和更改所有的進口路徑：

@import "../vendor/bootstrap/less/variables.less"; 

然後我可以註釋掉那些我不需要包含的bootstrap部分 - 這裏有很多，你通常不需要它。

然後我可以選擇，以取代個人包括我是否打算修改它們：

@import "./custom-bootstrap/variables.less"; 
// etc... 

這樣就沒有必要修改供應商的文件夾，我可以去掉或隨意，變化再添加組件默認的字體，默認的顏色等...

另一個傾向於那些誰喜歡sass/scss。這是可能的，如果你轉換爲CSS來引導從少源結合，然後包括使用這個插件羅盤是：

https://github.com/chriseppstein/sass-css-importer

Answer 5

你不想指定一套少文件作爲來源。只有bootstrap.less，它導入其他的。

gulp.task('less', function() { 
    return gulp.src('./less/bootstrap.less') 
     .pipe(less({ 
      paths: [ path.join(__dirname, 'less', 'includes') ] 
     })) 
     .pipe(gulp.dest('./ui/css')); 
}); 

Answer 6

以下gulpfile應引導並一飲而盡的最新版本。

var gulp = require('gulp'); 
var postcss = require('gulp-postcss'); 
var less = require('gulp-less'); 
var autoprefixer = require('autoprefixer'); 

gulp.task('css', function() { 
    var processors = [ 
     autoprefixer 
    ]; 
    return gulp.src('./node_modules/bootstrap/less/bootstrap.less') 
     .pipe(less()) 
     .pipe(postcss(processors)) 
     .pipe(gulp.dest('./public/css')); 
}); 

gulp.task('default', ['css']); 

您也可以單獨編譯每個引導程序模塊/組件，只需單獨解析每個較少的文件即可。或者你可以用bootstrap.css所做的相同的方式導入每個模塊。

例如警報

@import "../node_modules/bootstrap/less/variables.less"; 
@import "../node_modules/bootstrap/less/mixins.less"; 

@import "../node_modules/bootstrap/less/alerts.less"; 

我用這種方法進行自舉bootstrap-css其中每個引導模塊可以單獨導入到組件的CSS模塊兼容版本。