css - gulpjs 合并 css 和 less

标签 css gulp-jscs

我正在尝试将我的 less 文件转换为 css 文件,然后获取其他 css 文件并将两组文件组合在一起形成一个 css 文件。我没有收到任何错误,但 css 文件从未创建。有没有一种方法可以将两组不同的 css 组合在一起形成一个 css 文件?提前致谢。

var gulp = require("gulp");
var gulpUtil = require("gulp-util");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var minify = require("gulp-minify-css");
var notify = require("gulp-notify");
var addsrc = require("gulp-add-src");

/*CSS Section*/
gulp.task("build-less", function () {

    return gulp.src([
            "Less/common.less",
            "Less/box.less",
            "Less/callout.less",
            "Less/form-controls.less",
            "Less/form.less",
            "Less/scrollbar.less",
            "Less/overflow-table.less",
            "Less/button.less",
            "Less/theme.less",
            "Less/auto-complete.less"
        ]).pipe(less())
        .pipe(addsrc([
            "Css/bootstrap.css",
                "Css/bootstrap-theme.css",
                "Distribution/Styles/theme.css",
                "Css/font-awesome.css",
                "Css/font-awesome-animation.css",
                "Css/animate.css",
                "Css/bootstrap-select.css"
        ]))
        .pipe(concat("dustball.min.css"))
        .pipe(minify())
        .pipe(gulp.dest("Destination/Styles"));
});

最佳答案

刚刚遇到一个名为 merge2 的插件,它起作用了。以下是更新后的版本。

var gulp = require("gulp");
var gulpUtil = require("gulp-util");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var less = require("gulp-less");
var minify = require("gulp-minify-css");
var notify = require("gulp-notify");
var merge = require("merge2");

/*CSS Section*/
gulp.task("build-less", function () {
    var cssFiles = gulp.src([
            "Css/bootstrap.css",
            "Css/bootstrap-theme.css",
            "Distribution/Styles/theme.css",
            "Css/font-awesome.css",
            "Css/font-awesome-animation.css",
            "Css/animate.css",
            "Css/bootstrap-select.css"
        ])
        .pipe(concat("css-files.css"));

    var lessCssFiles = gulp.src([
            "Less/common.less",
            "Less/box.less",
            "Less/callout.less",
            "Less/form-controls.less",
            "Less/form.less",
            "Less/scrollbar.less",
            "Less/overflow-table.less",
            "Less/button.less",
            "Less/theme.less",
            "Less/auto-complete.less"
        ])
        .pipe(less())
        .pipe(concat("less-files.css"));

    return merge(cssFiles, lessCssFiles)
        .pipe(concat("dustball.min.css"))
        .pipe(minify())
        .pipe(gulp.dest("Distribution/Styles"));
});

关于css - gulpjs 合并 css 和 less,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31594539/

相关文章:

javascript - javascript中的可扩展框

css - 我没有在表单中对齐我的输入复选框

css - 用自定义字形替换 <hr> 行

javascript - gulp-jscs 自动修复不起作用

css - 如何引用来自同一域的样式表?

GULP:就地修改监视文件而不会导致无限循环

node.js - 如何在 Windows 上创建 JSCS 配置文件

gulp - 无法让 gulp-jscs 在原始文件上写入固定文件

html - <ul> 用于格式化的用法