【问题标题】:gulpjs merge css and lessgulpjs 合并 css 和更少
【发布时间】:2015-07-23 17:42:58
【问题描述】:

我正在尝试获取我的 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"));
});

【问题讨论】:

    标签: css gulp-jscs


    【解决方案1】:

    刚刚遇到一个插件调用 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"));
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2015-04-10
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多